Ant Design 3表单：如何灵活控制字段校验触发时机（onChange与onBlur）？

在 Ant Design 3 中，表单字段的校验触发时机可以通过 validateTrigger 属性来灵活控制。validateTrigger 决定了字段校验的触发时机，默认情况下，校验会在 onChange 和 onBlur 时触发。

1. 全局设置校验触发时机

你可以在 Form.create() 中通过 validateMessages 和 onFieldsChange 等配置项来全局设置校验触发时机。

import { Form, Input } from 'antd';

const CustomForm = Form.create({
  onFieldsChange(props, changedFields) {
    // 在这里可以处理字段变化
  },
  mapPropsToFields(props) {
    // 在这里可以将 props 映射到字段
  },
  validateMessages: {
    // 自定义校验消息
  },
})((props) => {
  const { getFieldDecorator } = props.form;

  return (
    <Form>
      <Form.Item label="Username">
        {getFieldDecorator('username', {
          rules: [{ required: true, message: 'Please input your username!' }],
          validateTrigger: 'onBlur', // 只在 onBlur 时触发校验
        })(<Input />)}
      </Form.Item>
    </Form>
  );
});

export default CustomForm;

2. 单个字段设置校验触发时机

你也可以在每个字段的 getFieldDecorator 中单独设置 validateTrigger，来控制该字段的校验触发时机。

import { Form, Input } from 'antd';

const CustomForm = (props) => {
  const { getFieldDecorator } = props.form;

  return (
    <Form>
      <Form.Item label="Username">
        {getFieldDecorator('username', {
          rules: [{ required: true, message: 'Please input your username!' }],
          validateTrigger: 'onBlur', // 只在 onBlur 时触发校验
        })(<Input />)}
      </Form.Item>

      <Form.Item label="Email">
        {getFieldDecorator('email', {
          rules: [{ required: true, message: 'Please input your email!' }],
          validateTrigger: ['onChange', 'onBlur'], // 在 onChange 和 onBlur 时都触发校验
        })(<Input />)}
      </Form.Item>
    </Form>
  );
};

export default Form.create()(CustomForm);

3. 动态控制校验触发时机

在某些情况下，你可能需要根据某些条件动态控制校验触发时机。你可以通过 setFieldsValue 和 validateFields 方法来实现。

import { Form, Input, Button } from 'antd';

const CustomForm = (props) => {
  const { getFieldDecorator, setFieldsValue, validateFields } = props.form;

  const handleChange = (e) => {
    const value = e.target.value;
    setFieldsValue({ username: value });

    // 根据条件动态触发校验
    if (value.length > 5) {
      validateFields(['username'], (errors, values) => {
        if (!errors) {
          console.log('Validation passed:', values);
        }
      });
    }
  };

  return (
    <Form>
      <Form.Item label="Username">
        {getFieldDecorator('username', {
          rules: [{ required: true, message: 'Please input your username!' }],
          validateTrigger: 'onBlur', // 默认只在 onBlur 时触发校验
        })(<Input onChange={handleChange} />)}
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Form.create()(CustomForm);

总结

• 全局设置：通过 Form.create() 的配置项来全局设置校验触发时机。
• 单个字段设置：在 getFieldDecorator 中使用 validateTrigger 来单独设置字段的校验触发时机。
• 动态控制：通过 setFieldsValue 和 validateFields 方法动态控制校验触发时机。

通过这些方法，你可以灵活地控制 Ant Design 3 表单字段的校验触发时机，以满足不同的业务需求。