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']);