参考文献:https://3x.ant.design/components/form-cn/#components-form-demo-validate-other
antd form validateFields的校验指定元素
其实antd form validateFields有三种用法,用于不同的场景。
下图是antd关于validateFields的介绍。
1.校验form所有字段
这是最常用的写法,一般在提交表单的数据时候,大多数情况用这种写法,对于所有元素的正确性进行校验,只有全部通过校验才能进行下一步操作,比如调接口等等。
const {
form: { validateFields },
} = this.props;
validateFields((errors, values) => {
if(errors) return; //如果有一个校验不通过,代码将不再往下执行
//校验通过,调接口传参
axios.post('url',values).then((res) => {
}).catch((err) => {
})
});
2.校验form指定字段
在操作的时候对于指定元素的正确性进行校验,如果指定字段通过校验才能进行下一步操作。比如我有三个表单字段,我只对其中一个进行校验,就可以用下面的方法,这里会用到validateFields的第一个参数,是一个数组,数组里是指定字段的名称。
const {
form: { validateFields },
} = this.props;
<Form >
<Form.Item>
{getFieldDecorator('email', {
rules: [
{
type: 'email',
message: '请输入正确的邮箱',
},
{ required: true, message: '请输入邮箱号' },
],
initialValue: ''
})(
<Input placeholder="请输入邮箱号" size="large" />
)}
</Form.Item>
<Form.Item>
{getFieldDecorator('password', {
rules: [
{
type: 'password',
message: '请输入密码',
},
{ required: true, message: '请输入密码' },
],
initialValue: ''
})(
<Input placeholder="请输入密码" size="large" />
)}
</Form.Item>
</Form>
// 现在form又邮箱和密码两个字段,只对于邮箱进行校验
form.validateFields(['email'],(err) => {
console.log(err,'err-----')
if(err){
message.error('请输入正确的邮箱')
return
}else{
// 邮箱校验通过以后的操作
}
})
3.校验form增加options校验规则
在操作的时候对于元素的正确性进行校验,可以根据需求,增加以下的校验规则。关于option的校验规则如下:
const {
form: { validateFields },
} = this.props;
// 现在form又邮箱和密码两个字段,只对于邮箱进行校验
validateFields(['field1', 'field2'], options, (errors, values) => {
// ...
});