在开发过程中,form表单的验证用的十分广泛,可以说只要需要用户输入就肯定会有验证,不然就乱套了哈哈哈,但是默认的验证的适用性虽然广,但是在一些特殊验证需求上又很有限,所以就需要有自定义验证规则。
因此在使用antD的form来管理我们的表单的时候,我们需要自定义规则校验某个字段,这个时候就可以在rules里面添加validator属性,指向我们定义的方法。(举个简单例子 比如我的自定义校验规则是是否输入重复的名称)
<Form.Item
label="名称"
labelCol={
{ span: 7 }}
wrapperCol={
{ span: 14 }}
>
{getFieldDecorator("key", {
rules: [
{ required: true, message: "请输入名称" },
{ validator: isRepeat } //校验名称是否重复
]
})(<Input placeholder="请输入" maxLength="64" />)}
</Form.Item>
//这个是校验规则的函数
//rule应该是当前检测form的名称等信息 具体在下面用图展示具体内容
//value表示当前form表单内容,callback则是校验的返回函数
const isRepeat = (rule, value, callback) => {
if (arrs.length > 0 && arrs.filter(item => item.newKey == value).length > 0) {
return callback("自定义配置项名称重复");
} else {
return callback();
}
};
值得注意的是 必须要有callback() 当callback内为空则表示该条件下校验通过,否则callback内的就是校验未通过后显示的名字
↓这个就是参数rule的信息