React 实战 | antd form表单验证，同时支持onBlur与onChange事件验证

通常使用ant design的表单验证时，我们直接在getFieldDecorator中使用rules来定义校验规则，默认的触发校验规则则的事件validateTrigger为onChange，也就是说，触发onblur事件时不会校验其中的规则。

 <FormItem {...formItemLayout} label="文章标题">
	  {getFieldDecorator('title', {
	    rules: [{
	      required: true,
	      message: '请输入标题',
	    }],
	  })(
	    <Input size="large" placeholder="请输入标题"/>
	  )}
</FormItem>

当项目中需要我们对onChange和onBlur事件分别使用不同规则时，该怎么做？

看一下校验获取的详情

getFieldProps(name, option): Object { [valuePropName], [trigger], [validateTrigger] }

Will create props which can be set on a input/InputComponent which support value and onChange interface.

我们观察到其中存在option.validate[n].trigger和option.validate[n].rules这两项

来看一下官方的tips

{
  validateTrigger: 'onBlur',
  rules: [{required: true}],
}
// is the shorthand of
{
  validate: [{
    trigger: 'onBlur',
    rules: [{required: true}],
  }],
}

那么我们就可以给validate传不同的对象来定义规则和触发时机啦

注意：触发时机trigger可以是string或string[]

举个例子：

<Form.Item label="Password">
  {getFieldDecorator(
    "password",
    {
      validate: [
        // 在onBlur时，触发两个对象中的规则
        {
          trigger: "onBlur",
          rules: [{ required: true }]
        },
        // 在onChange时，只触发第二个对象的规则
        {
          trigger: ["onChange", "onBlur"],
          rules: [{ len: 9 }]
        }
      ]
    }
  )(<Input.Password />)}
</Form.Item>

这样就可以在一个表单域中分别触发onBlur和onChange的校验规则啦