antd rc-form 表单使用

开发需求中要对表单 onChange 和 onBlur 分开验证，搜了一遍antd官方文档，并没有发现相关的示例，还好找到了这片博客(18条消息) React 实战 | antd form表单验证，同时支持onBlur与onChange事件验证_辣爷的博客-CSDN博客，原来antd的form组件是基于rc-form开发的，在官网居然没有明确提示，属实有点。。。。

rc-form：react-component/form: React High Order Form Component(web & react-native) (github.com)

知乎的一篇rc-form源码解析：rc-form源码浅析 - 知乎 (zhihu.com)

以下为搬运(18条消息) React 实战 | antd form表单验证，同时支持onBlur与onChange事件验证_辣爷的博客-CSDN博客： 通常antd form组件使用rules来定义校验规则：

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

但其实使用rc-form的校验规则也可以，而且会更加灵活：

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

通过给给validate传不同的对象，就可以 定义规则和触发时机

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