Ant Design 3表单：如何灵活设置字段校验规则的触发时机？

在 Ant Design 3 中，表单字段的校验规则可以通过 rules 属性来设置。默认情况下，字段的校验会在用户输入内容、改变焦点（如从输入框移出）或提交表单时触发。如果你需要更灵活地控制校验规则的触发时机，可以通过以下几种方式来实现：

1. 使用 validateTrigger 属性

validateTrigger 属性允许你指定校验规则的触发时机。它可以是一个字符串或字符串数组，常见的值包括 onChange、onBlur 和 onSubmit。

import { Form, Input } from 'antd';

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

export default CustomForm;

2. 手动触发校验

你可以通过 form 实例手动触发字段的校验。form.validateFields 方法可以用于手动校验表单中的所有字段，而 form.validateFields([fieldName]) 可以用于校验指定的字段。

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

const CustomForm = () => {
  const [form] = Form.useForm();

  const handleSubmit = () => {
    form.validateFields(['username']).then(values => {
      console.log('Validation passed:', values);
    }).catch(errorInfo => {
      console.log('Validation failed:', errorInfo);
    });
  };

  return (
    <Form form={form}>
      <Form.Item
        label="Username"
        name="username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>
      <Button type="primary" onClick={handleSubmit}>
        Submit
      </Button>
    </Form>
  );
};

export default CustomForm;

3. 动态设置校验规则

你可以根据不同的条件动态设置校验规则。例如，根据用户选择的选项来设置不同的校验规则。

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

const { Option } = Select;

const CustomForm = () => {
  const [form] = Form.useForm();

  const handleSelectChange = (value) => {
    if (value === 'option1') {
      form.setFieldsValue({ username: '' }); // 清空字段值
      form.setFields([{ name: 'username', errors: [] }]); // 清除错误信息
      form.setFields([{
        name: 'username',
        rules: [{ required: true, message: 'Please input your username!' }],
      }]);
    } else {
      form.setFields([{
        name: 'username',
        rules: [],
      }]);
    }
  };

  return (
    <Form form={form}>
      <Form.Item
        label="Select Option"
        name="option"
        rules={[{ required: true, message: 'Please select an option!' }]}
      >
        <Select onChange={handleSelectChange}>
          <Option value="option1">Option 1</Option>
          <Option value="option2">Option 2</Option>
        </Select>
      </Form.Item>
      <Form.Item
        label="Username"
        name="username"
      >
        <Input />
      </Form.Item>
    </Form>
  );
};

export default CustomForm;

4. 使用 validateFirst 属性

validateFirst 属性可以用于控制校验的顺序。如果设置为 true，则在第一个校验规则失败后立即停止校验。

import { Form, Input } from 'antd';

const CustomForm = () => {
  return (
    <Form>
      <Form.Item
        label="Username"
        name="username"
        rules={[
          { required: true, message: 'Please input your username!' },
          { min: 6, message: 'Username must be at least 6 characters!' },
        ]}
        validateFirst // 在第一个校验规则失败后停止校验
      >
        <Input />
      </Form.Item>
    </Form>
  );
};

export default CustomForm;

总结

通过 validateTrigger 属性、手动触发校验、动态设置校验规则以及 validateFirst 属性，你可以灵活地控制 Ant Design 3 表单字段的校验时机和规则。根据具体的业务需求，选择合适的方式来优化用户体验和表单的校验逻辑。