Development needs to form onChange and onBlur separate validation, searched again antd official documents, and did not find the relevant examples, good also found this blog (18) the React of actual combat | antd form form validation, The form component of ANTD is based on the RC-Form component. The form component of ANTD is based on the RC-Form component.

Rc-form: react- Component/Form: React High Order Form Component(Web & React – Native) (github.com)

Rc-form source code analysis – Zhihu (zhihu.com)

Below for handling (18) the React of actual combat | antd form form validation, at the same time support the onBlur and onChange event validation _ hot guy’s blog – CSDN: usually antd form components use rules to define the validation rules:

<FormItem {... formItemLayout} label="Article title">
	  {getFieldDecorator('title', {
	    rules: [{
	      required: true.message: 'Please enter a title',,})} (<Input size="large" placeholder="Please enter a title"/>
	  )}
</FormItem>
Copy the code

Rc-form validation rules can also be used, and are more flexible:

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

By passing different objects to validate, you can define rules and trigger times

<Form.Item label="Password">
  {getFieldDecorator(
    "password",
    {
      validate: [
        // In onBlur, the rules in both objects are triggered
        {
          trigger: "onBlur".rules: [{ required: true}},// In onChange, only the rule for the second object is triggered
        {
          trigger: ["onChange"."onBlur"].rules: [{ len: 9}}]})(<Input.Password />)}
</Form.Item>
Copy the code