使用AntD
Form表單驗證validator不生效
1. 注意是validator,而不是validate
2. validator總需要返回一個callback,有問題返回callback（錯誤提醒文字）拥刻，驗證沒有問題也要執(zhí)行callback(),
3. 一個FormItem 中，getFieldDecorator一個選項锡垄，例如：
<FormItem>
{ getFieldDecorator('wakeup_prompt', {
rules: [{
required: true,
message: 'This field is required'
}],
initialValue: 'defalut'
})(
<Select>
{
fileList.map(function(item) {
return <Option
key={ item.text }
value={ item.val }
>
{ item.text }
</Option>
}
)
}
</Select>
<a className="prompt_setting" style={{ marginLeft: '10px' }} onClick={ this._showUploadModal } >Click Me</a>
) }
</FormItem>
此時，getFieldDecorator中同時有Select 和 a 元素来破， require: true驗證不生效篮灼，需要把a(bǔ)標(biāo)簽元素移除FormItem
Form表單Select中設(shè)置initialValue 無效（AntD 2.9.1)
1. initialValue值屬性為字符串，與Option中的value 值對應(yīng)
2. 同個FormItem 中不能包含多個getFieldDecorator徘禁，但是可以里面可以包含多個FormItem
3. Select 外面不要多加元素诅诱，否則有異常
<FormItem
{ ...formItemLayout }
label={(
<Tooltip title={ <FormattedHTMLMessage id="LANG2230" /> }>
<span>{ formatMessage({id: "LANG2230"}) }</span>
</Tooltip>
)}
>
<FormItem
style={{ display: 'inline-block', width: 'calc(50%)' }}
>
{ getFieldDecorator('end_time', {
getValueFromEvent: (e) => {
return UCMGUI.toggleErrorMessage(e)
},
rules: [{
required: true,
message: formatMessage({id: "LANG2150"})
}],
initialValue: '0'
})(
<Select>
<Option value='0'>0</Option>
<Option value='1'>1</Option>
</Select>
) }
</FormItem>
<FormItem
style={{ display: 'inline-block', width: 'calc(50%)' }}
>
{ getFieldDecorator('day_min', {
initialValue: '15'
})(
<div>
<Select style={{ width: 128, marginRight: 10 }}>
<Option value="0">0</Option>
<Option value="15">15</Option>
</Select>
分鐘
</div>
)}
</FormItem>
</FormItem>
其中因為Select 外面加了div 導(dǎo)致initialValue 設(shè)置無效
<FormItem
style={{ display: 'inline-block', width: 'calc(50%)' }}
>
{ getFieldDecorator('day_min', {
initialValue: '15'
})(
<!--<div>-->
<Select style={{ width: 128, marginRight: 10 }}>
<Option value="0">0</Option>
<Option value="15">15</Option>
</Select>
<!--</div>-->
)}
</FormItem>
Form 布局問題
外formitem添加formLayout樣式，內(nèi)部加Col 控制顯示
<FormItem
{ ...formItemDnLayout }
label={ formatMessage({id: "LANG2016"}) }
>
<Col span={ 8 }>
<FormItem>
{ getFieldDecorator('pbxdn', {
getValueFromEvent: (e) => {
return UCMGUI.toggleErrorMessage(e)
},
rules: [{
required: true,
message: formatMessage({id: "LANG2150"})
}, {
validator: (data, value, callback) => {
let basedn = this.state.basedn
this._validLdapChars(data, value + basedn, callback, formatMessage, formatMessage({id: "LANG2016"}))
}
}, {
validator: (data, value, callback) => {
let basedn = this.state.basedn
this._validDn(data, value + basedn, callback, formatMessage)
}
}, {
validator: (data, value, callback) => {
let basedn = this.state.basedn
this._validAttr(data, value + basedn, callback, formatMessage)
}
}, {
validator: (data, value, callback) => {
let basedn = this.state.basedn
this._isUnderBasedn(data, value + basedn, callback, formatMessage)
}
}, {
validator: (data, value, callback) => {
let basedn = this.state.basedn
this._isPrefixExist(data, value + basedn, callback, formatMessage)
}
}],
initialValue: pbxdn
})(
<Input />
)}
</FormItem>
</Col>
<Col span={ 6 }>
<span style={{ paddingLeft: '10px' }}>{ this.state.basedn }</span>
</Col>
</FormItem>