Antd的Form组件提供了比较灵活的表单校验功能，在本文汇总，我将讨论一下触发antd的Form表单校验的几种方法。

通过rules属性进行表单验证

在antd的Form组件中，我们可以通过rules属性为表单项添加验证规则。rules是一个对象数组，每个对象都定义了一条验证规则。以下是如何为一个简单的登录表单添加规则：

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

const Form = () => (
  <Form>
    <Form.Item
      name="email"
      rules={[
        { required: true, message: '请输入您的邮箱!' },
        { type: 'email', message: '请输入有效的邮箱!' }
      ]}
    >
      <Input placeholder="邮箱" />
    </Form.Item>
    <Form.Item
      name="password"
      rules={[
        { required: true, message: '请输入您的密码!' },
        { min: 8, message: '密码不能少于8个字符!' }
      ]}
    >
      <Input.Password placeholder="密码" />
    </Form.Item>
    <Button type="primary" htmlType="submit">登录</Button>
  </Form>
);

自定义校验规则

除了antd内置的验证类型，我们还可以使用validator函数创建自定义的校验规则。validator是一个返回Promise的函数，我们可以在其中实现任何自定义的校验逻辑。以下是一个如何确保两次密码输入一致的例子：

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

const Form = () => {
  const validatePasswords = ({ getFieldValue }) => ({
    validator(rule, value) {
      if (!value || getFieldValue('password') === value) {
        return Promise.resolve();
      }
      return Promise.reject('两次输入的密码不一致!');
    }
  });

  return (
    <Form>
      <Form.Item
        name="password"
        rules={[{ required: true, message: '请输入您的密码!' }]}
      >
        <Input.Password placeholder="密码" />
      </Form.Item>
      <Form.Item
        name="confirm"
        rules={[
          { required: true, message: '请确认您的密码!' },
          validatePasswords
        ]}
      >
        <Input.Password placeholder="确认密码" />
      </Form.Item>
      <Button type="primary" htmlType="submit">注册</Button>
    </Form>
  );
};

通过dependencies联动触发校验

有时，我们希望一个表单项的变化会影响另一个表单项。antd的Form组件允许我们通过dependencies属性来实现这种联动。dependencies是一个数组，其中的元素代表了这个表单项所依赖的其他表单项。以下是一个基于一个checkbox的选中状态来决定一个文本框是否必填的例子：

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

const Form = () => (
  <Form>
    <Form.Item name="remember" valuePropName="checked">
      <Checkbox>记住我</Checkbox>
    </Form.Item>
    <Form.Item
      name="name"
      rules={[
        {
          required: true,
          message: '请输入您的姓名!'
        }
      ]}
      dependencies={['remember']}
    >
      <Input placeholder="姓名" />
    </Form.Item>
    <Button type="primary" htmlType="submit">注册</Button>
  </Form>
);

通过shouldUpdate触发校验

有时，我们需要根据其他表单项的值来改变某个表单项的验证规则。antd的Form组件通过shouldUpdate属性来实现这种需求。shouldUpdate可以接受一个函数，当这个函数返回true时，表单项将被重新渲染并触发校验。以下是把上述基于一个checkbox的选中状态来决定一个文本框是否必填用shouldUpdate实现的例子：

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

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

  return (
    <Form form={form}>
      <Form.Item name="remember" valuePropName="checked">
        <Checkbox>记住我</Checkbox>
      </Form.Item>
      <Form.Item
        name="name"
        rules={[
          ({ getFieldValue }) => ({
            required: getFieldValue('remember'),
            message: '请输入您的姓名!',
          })
        ]}
        shouldUpdate={(prevValues, currentValues) => prevValues.remember !== currentValues.remember}
      >
        <Input placeholder="姓名" />
      </Form.Item>
      <Button type="primary" htmlType="submit">注册</Button>
    </Form>
  );
};