antd的Form表单校验的方式有几种

Ant Design 的 Form 组件提供了多种灵活的表单校验方式，以下是常见的几种方法及示例：

---

1. 内置校验规则

通过 rules 配置预定义的校验规则（如必填、长度、格式等）。

<Form.Item
  name="email"
  label="邮箱"
  rules={[
    { required: true, message: '邮箱不能为空' },
    { type: 'email', message: '邮箱格式不正确' },
    { min: 6, message: '至少6个字符' },
    { max: 30, message: '最多30个字符' },
    { pattern: /^[a-z0-9]+$/, message: '仅允许小写字母和数字' }
  ]}
>
  <Input />
</Form.Item>

---

2. 自定义校验函数

使用 validator 编写自定义校验逻辑。

<Form.Item
  name="password"
  label="密码"
  rules={[
    {
      validator: (_, value) => {
        if (value && value.length >= 8) {
          return Promise.resolve();
        }
        return Promise.reject(new Error('密码至少8位'));
      },
    },
  ]}
>
  <Input.Password />
</Form.Item>

---

3. 异步校验

在 validator 中处理异步操作（如接口验证）。

<Form.Item
  name="username"
  label="用户名"
  rules={[
    {
      validator: async (_, value) => {
        const isExist = await checkUsernameExists(value);
        if (isExist) {
          throw new Error('用户名已存在');
        }
      },
    },
  ]}
>
  <Input />
</Form.Item>

---

4. 跨字段校验

通过 dependencies 或 getFieldValue 实现字段联动校验。

// 方法一：使用 dependencies
<Form.Item
  name="confirmPassword"
  label="确认密码"
  dependencies={['password']}
  rules={[
    { required: true, message: '请确认密码' },
    ({ getFieldValue }) => ({
      validator(_, value) {
        if (value === getFieldValue('password')) {
          return Promise.resolve();
        }
        return Promise.reject(new Error('两次密码不一致'));
      },
    }),
  ]}
>
  <Input.Password />
</Form.Item>

// 方法二：直接获取字段值
const password = Form.useFormInstance().getFieldValue('password');

---

5. 手动触发校验

通过 validateFields 手动触发表单校验（如提交时）。

const [form] = Form.useForm();

const handleSubmit = () => {
  form.validateFields()
    .then(values => console.log('提交成功', values))
    .catch(err => console.log('校验失败', err));
};

// 校验特定字段
form.validateFields(['email', 'password']);

---

6. 动态校验规则

根据条件动态调整校验规则。

<Form.Item
  name="age"
  label="年龄"
  rules={[
    { required: isAdult, message: '成年人需填写年龄' },
    { type: 'number', min: 0, max: 150 },
  ]}
>
  <InputNumber />
</Form.Item>

---

7. 控制校验触发时机

通过 validateTrigger 修改校验触发的时机（默认为 onChange 和 onBlur）。

<Form.Item
  name="code"
  label="验证码"
  validateTrigger="onBlur"
  rules={[{ required: true, message: '请输入验证码' }]}
>
  <Input />
</Form.Item>

---

8. 编程式控制校验状态

使用 setFields 或 resetFields 手动设置/重置校验状态。

// 设置错误状态
form.setFields([{ name: 'email', errors: ['手动错误提示'] }]);

// 重置校验状态
form.resetFields(['email']);

---

这些方法覆盖了从简单到复杂的表单校验需求，可根据实际场景灵活组合使用。