Ant Design 表单验证：深入剖析

2023-11-08 15:16:23

前言

表单验证是 web 开发中的必备功能，它确保用户在提交表单之前输入了有效数据。在 React 生态系统中，Ant Design 是一个流行的 UI 框架，它提供了强大的表单验证功能。本文将深入探讨 Ant Design 中的表单验证机制，揭秘其背后的技术。

Ant Design 表单验证机制

Ant Design 表单验证基于 JavaScript 的表单验证 API 和 React 的受控组件模型。它提供了一系列验证规则，涵盖了各种常见的验证场景，例如：

必填验证：确保用户填写了必需字段。
类型验证：检查用户输入是否与预期类型匹配，例如数字、电子邮件或 URL。
范围验证：限制用户输入的范围，例如最小和最大值。
正则表达式验证：使用正则表达式自定义验证规则。
异步验证：执行服务器端或第三方 API 调用进行验证。

表单验证语法

在 Ant Design 中，表单验证语法简单明了。您可以使用 rules 属性指定验证规则，如下所示：

const [form] = Form.useForm();

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

const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo);
};

return (
  <Form
    form={form}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
  >
    <Form.Item
      label="用户名"
      name="username"
      rules={[{ required: true, message: '请输入用户名' }]}
    >
      <Input />
    </Form.Item>
    <Form.Item
      label="密码"
      name="password"
      rules={[{ required: true, message: '请输入密码' }]}
    >
      <Input.Password />
    </Form.Item>
    <Form.Item>
      <Button type="primary" htmlType="submit">
        登录
      </Button>
    </Form.Item>
  </Form>
);

自定义验证规则

除了内置的验证规则外，您还可以定义自己的自定义验证规则。这是通过编写一个自定义验证函数来完成的，该函数接收要验证的值并返回一个错误消息（如果验证失败）或 null（如果验证通过）。

const validateUsername = (rule, value) => {
  if (value.length < 6) {
    return Promise.reject(new Error('用户名长度必须至少为 6 个字符'));
  }

  return Promise.resolve();
};

...

<Form.Item
  label="用户名"
  name="username"
  rules={[{ validator: validateUsername }]}
>
  <Input />
</Form.Item>

表单校验失败处理

当表单验证失败时，Ant Design 会自动触发 onFinishFailed 回调函数。您可以在此回调函数中处理验证错误，例如显示错误消息或聚焦到第一个错误输入字段。

const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo);

  // 显示错误消息
  errorInfo.errorFields.forEach((field) => {
    form.setFieldsError({
      [field.name]: new Error(field.errors[0]),
    });
  });
};