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

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

{getFieldDecorator('title', { rules: [{ required: true, message: '请输入标题', }], })( )}

当项目中需要我们对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.

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

文章图片

我们观察到其中存在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[]
举个例子：

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

【React 实战 | antd form表单验证，同时支持onBlur与onChange事件验证】这样就可以在一个表单域中分别触发onBlur和onChange的校验规则啦