Ant Design表单：如何控制字段多规则校验的触发时机？

在 Ant Design 的表单组件中，你可以通过 rules 属性为表单字段设置校验规则。默认情况下，Ant Design 的表单校验会在字段值发生变化时（onChange）触发。如果你需要控制字段多规则校验的触发时机，可以通过以下几种方式来实现：

1. 使用 validateTrigger 属性

validateTrigger 属性可以指定校验规则的触发时机。你可以为每个规则单独设置 validateTrigger，从而控制不同的校验规则在不同的时机触发。

import { Form, Input } from 'antd';

const MyForm = () => {
  return (
    <Form>
      <Form.Item
        name="username"
        label="用户名"
        rules={[
          {
            required: true,
            message: '请输入用户名',
            validateTrigger: 'onBlur', // 在失去焦点时触发校验
          },
          {
            pattern: /^[a-zA-Z0-9_]+$/,
            message: '用户名只能包含字母、数字和下划线',
            validateTrigger: 'onChange', // 在输入时触发校验
          },
        ]}
      >
        <Input />
      </Form.Item>
    </Form>
  );
};

export default MyForm;

在上面的例子中，required 规则会在输入框失去焦点时触发校验，而 pattern 规则会在输入框内容发生变化时触发校验。

2. 使用 validateFirst 属性

validateFirst 属性可以控制是否在校验失败时停止后续规则的校验。默认情况下，Ant Design 会依次校验所有规则，即使前面的规则已经失败。

import { Form, Input } from 'antd';

const MyForm = () => {
  return (
    <Form>
      <Form.Item
        name="username"
        label="用户名"
        validateFirst // 在校验失败时停止后续规则的校验
        rules={[
          {
            required: true,
            message: '请输入用户名',
          },
          {
            pattern: /^[a-zA-Z0-9_]+$/,
            message: '用户名只能包含字母、数字和下划线',
          },
        ]}
      >
        <Input />
      </Form.Item>
    </Form>
  );
};

export default MyForm;

3. 手动触发校验

如果你需要手动控制校验的触发时机，可以使用 form.validateFields 方法。你可以在特定的用户操作（如点击按钮）时手动触发校验。

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

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

  const onFinish = (values) => {
    console.log('表单值:', values);
  };

  const handleValidate = () => {
    form.validateFields(['username']).then(() => {
      console.log('校验通过');
    }).catch((error) => {
      console.log('校验失败:', error);
    });
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item
        name="username"
        label="用户名"
        rules={[
          {
            required: true,
            message: '请输入用户名',
          },
          {
            pattern: /^[a-zA-Z0-9_]+$/,
            message: '用户名只能包含字母、数字和下划线',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Button onClick={handleValidate}>手动校验</Button>
      <Button type="primary" htmlType="submit">提交</Button>
    </Form>
  );
};

export default MyForm;

在这个例子中，点击“手动校验”按钮时会触发 username 字段的校验。

4. 使用 onFieldsChange 和 onValuesChange

你还可以通过 onFieldsChange 和 onValuesChange 回调函数来监听字段的变化，并在特定的时机手动触发校验。

import { Form, Input } from 'antd';

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

  const onFieldsChange = (changedFields, allFields) => {
    console.log('字段变化:', changedFields);
    // 在这里手动触发校验
    form.validateFields(['username']);
  };

  return (
    <Form form={form} onFieldsChange={onFieldsChange}>
      <Form.Item
        name="username"
        label="用户名"
        rules={[
          {
            required: true,
            message: '请输入用户名',
          },
          {
            pattern: /^[a-zA-Z0-9_]+$/,
            message: '用户名只能包含字母、数字和下划线',
          },
        ]}
      >
        <Input />
      </Form.Item>
    </Form>
  );
};

export default MyForm;

总结

通过 validateTrigger、validateFirst、手动触发校验以及 onFieldsChange 和 onValuesChange 回调函数，你可以灵活地控制 Ant Design 表单字段的多规则校验触发时机。根据你的具体需求选择合适的方式来实现。