自定义校验,在form.Item中添加rules->validator
<Form.Item
labelCol={{ span: 10 }}
wrapperCol={{ span: 4 }}
label={language.messages["device.currentSpeedMax"]}
>
{getFieldDecorator('currentSpeedMax', {
initialValue: objectData?.currentSpeedMax,
rules: [
{ validator: (rule: any, value = "", callback: any) => validateHeightAndMin(value, callback, 'currentSpeedMax') }
]
})(<InputNumber precision={currentPrecision} min={0} className={"my-input"}
size={"default"} style={{ width: 157 }} placeholder={language.messages["form.pleaseinput"]} />)}
</Form.Item>
validateHeightAndMin
方法如下,其中callback()是必须要返回的,不然所有的校验都会失效:
const validateHeightAndMin = (value: any, callback: any, alarmAttr: string) => {
if (alarmAttr.indexOf("Max") != -1) {
const lowAttr = alarmAttr.split("Max")[0] + "Min";
if (parseFloat(form.getFieldsValue()[lowAttr]) > parseFloat(value)) {
const back = intl.formatMessage({ id: `device.${alarmAttr}` }) + "需大于"
+ intl.formatMessage({ id: `device.${lowAttr}` })
callback(back)
}
}
else if (alarmAttr.indexOf("Min") != -1) {
const highAttr = alarmAttr.split("Min")[0] + "Max";
if (parseFloat(form.getFieldsValue()[highAttr]) < parseFloat(value)) {
const back = intl.formatMessage({ id: `device.${alarmAttr}` }) + "需小于"
+ intl.formatMessage({ id: `device.${highAttr}` })
callback(back)
}
}
callback()
}
校验输入文本框首字符不能为空格:
<Form.Item
labelCol={{ span: 8 }}
wrapperCol={{ span: 8 }}
label={language.messages["device.flowmeterName"]}
>
{getFieldDecorator('flowmeterName', {
initialValue: objectData?.flowmeterName,
rules: [
{
required: true, message: language.messages["device.flowmeterNameCannotEmpty"]
},
{
max: 50, message: language.messages["device.moreThanMaxLength"]
},
],
getValueFromEvent: (event: any) => {
return event.target.value.replace(/(^\s*)/g, "")
},
})(<Input placeholder={language.messages["form.pleaseinput"]} />)}
</Form.Item>
主要是在getFieldDecorator
中添加如下代码:
getValueFromEvent: (event: any) => {
return event.target.value.replace(/(^\s*)/g, "")
},