培训班网站建设wordpress登陆可见
Ant Design 的 Form 组件提供了多种灵活的表单校验方式，以下是常见的几种方法及示例：
1. 内置校验规则
通过 rules 配置预定义的校验规则（如必填、长度、格式等）。
<Form.Itemname="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.Itemname="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.Itemname="username"label="用户名"rules={[{validator: async (_, value) => {const isExist = await checkUsernameExists(value);if (isExist) {throw new Error('用户名已存在');}},},]}
><Input />
</Form.Item>
4. 跨字段校验
通过 dependencies 或 getFieldValue 实现字段联动校验。
// 方法一：使用 dependencies
<Form.Itemname="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.Itemname="age"label="年龄"rules={[{ required: isAdult, message: '成年人需填写年龄' },{ type: 'number', min: 0, max: 150 },]}
><InputNumber />
</Form.Item>
7. 控制校验触发时机
通过 validateTrigger 修改校验触发的时机（默认为 onChange 和 onBlur）。
<Form.Itemname="code"label="验证码"validateTrigger="onBlur"rules={[{ required: true, message: '请输入验证码' }]}
><Input />
</Form.Item>
8. 编程式控制校验状态
使用 setFields 或 resetFields 手动设置/重置校验状态。
// 设置错误状态
form.setFields([{ name: 'email', errors: ['手动错误提示'] }]);// 重置校验状态
form.resetFields(['email']);