antd form validateFields的校验指定元素

参考文献：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) => {
  // ...
});