React Ant Design 中内置、自定义表单验证的火速上手

一、常见的内置验证规则

在 React Ant Design 中,除了自定义验证规则外,还有一些常见的内置验证规则,包括:

1. required:

   • 表示该字段是必填的。

2. min:

   • 用于数字字段,表示最小值。
   • 用于字符串字段,表示最小长度。

3. max:

   • 用于数字字段,表示最大值。
   • 用于字符串字段,表示最大长度。

4. email:

   • 验证输入是否为有效的电子邮件地址。

5. url:

   • 验证输入是否为有效的 URL。

6. pattern:

   • 使用正则表达式验证输入。

7. type:

   • 验证输入的数据类型,可选项有 string、number、boolean、integer、float。

8. validator:

   • 使用自定义函数进行验证。可以返回 Promise 以实现异步验证。

9. whitespace:

   • 验证输入是否只包含空白字符。

10. len:

    • 验证字符串长度是否等于指定值。

这些内置的验证规则可以帮助您快速实现常见的表单验证需求。您可以根据实际情况,选择合适的规则并组合使用,以满足业务需求。同时,您也可以根据特殊需求,定义自定义的验证规则。

例1: 内置邮箱验证

<Form.Item
  name="email"
  label="Email"
  rules={[
    {
      required: true,
      message: 'Please input your email!',
    },
    {
      type: 'email',
      message: 'Please enter a valid email address!',
    },
  ]}
>
  <Input />
</Form.Item>

为 email 字段添加了两个验证规则:

1. required 规则确保该字段是必填的。
2. email 规则验证输入是否为有效的电子邮件地址。
   如果用户输入的内容不符合电子邮件地址的格式,表单验证会失败,并显示错误消息"Please enter a valid email address!"。

例2：len 验证规则
len 规则用于验证字符串长度是否等于指定值。

<Form.Item
  name="password"
  label="Password"
  rules={[
    {
      required: true,
      message: 'Please input your password!',
    },
    {
      len: 8,
      message: 'Password must be exactly 8 characters long!',
    },
  ]}
>
  <Input.Password />
</Form.Item>

为 password 字段添加了两个验证规则:

1. required 规则确保该字段是必填的。
2. len 规则验证输入的字符串长度是否等于 8。

如果用户输入的密码长度不是 8 个字符,表单验证会失败,并显示错误消息"Password must be exactly 8 characters long!"。

二、自定义表单验证步骤

1. 使用自定义表单验证规则:
   • 在表单字段定义中使用 rules 属性指定表单验证规则。
   • 自定义验证规则可以通过 validator 属性来实现。

<Form.Item
  name="myField"
  label="My Field"
  rules={[
    {
      required: true,
      message: 'Please input your field!',
    },
    {
      validator: (_, value) => {
        if (value > 10) {
          return Promise.resolve();
        }
        return Promise.reject(new Error('Value must be greater than 10!'));
      },
    },
  ]}
>
  <Input />
</Form.Item>

2. 使用 Form.useForm() 自定义表单:
   • 通过 Form.useForm() 钩子创建一个自定义表单实例。
   • 将表单实例传递给表单组件的 form 属性。

const [form] = Form.useForm();

return (
  <Form form={form} onFinish={onFinish}>
    {/* 表单项 */}
  </Form>
);

3. 使用 validateFields 手动触发表单验证:
   • 通过 form.validateFields() 方法手动触发表单验证。
   • 可以在表单提交或其他特定事件中调用该方法。

const onFinish = async () => {
  try {
    await form.validateFields();
    // 表单验证通过, 执行提交逻辑
  } catch (errorInfo) {
    console.log('Failed:', errorInfo);
  }
};

4. 使用 form.getFieldsValue() 获取表单数据:
   • 通过 form.getFieldsValue() 方法获取表单当前的值。
   • 在表单提交时可以使用该方法获取表单数据。

const onFinish = () => {
  const values = form.getFieldsValue();
  console.log('Received values of form:', values);
};

通过以上步骤,您可以在 React Ant Design 中实现自定义的表单验证逻辑,满足您的业务需求。同时,Ant Design 还提供了其他丰富的表单相关功能,如动态增减表单项、表单联动等,可以根据实际情况进一步探索和应用。

三、完整示例

效果

下面是一个使用 React Ant Design 实现自定义表单验证的完整示例代码:

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

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

  const onFinish = async () => {
    try {
      await form.validateFields(); //验证表单
      const values = form.getFieldsValue(); //获取表单数据
      
      console.log('Received values of form:', values);
      // 提交表单逻辑
    } catch (errorInfo) {
      console.log('Failed:', errorInfo);
    }
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item
        name="username"
        label="Username"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
          {
            min: 3,
            message: 'Username must be at least 3 characters long!',
          },
          {
            pattern: /^[a-zA-Z0-9]+$/,
            message: 'Username can only contain letters and numbers!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        name="password"
        label="Password"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
          {
            min: 8,
            message: 'Password must be at least 8 characters long!',
          },
          {
            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]+$/,
            message: 'Password must contain at least one uppercase letter, one lowercase letter, and one number!',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>
		<Form.Item
		   name="email"
		    label="邮箱"
		    rules={[
		        {
		            required: true,
		            message: '请输入邮箱地址',
		        },
		        {
		            type: 'email',
		            message: '邮箱格式不对，请重新输入',
		        },
		    ]}
		>
		    <Input />
		</Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default MyForm;

在这个示例中,我们使用了 Form.useForm() 钩子创建了一个自定义的表单实例,并将其传递给表单组件的 form 属性。

对于用户名字段,我们定义了以下自定义验证规则:

• 必填
• 至少 3 个字符
• 只能包含字母和数字

对于密码字段,我们定义了以下自定义验证规则:

• 必填
• 至少 8 个字符，最多12个字符
• 必须包含至少一个大写字母、一个小写字母和一个数字

在表单提交时,我们使用 form.validateFields() 方法手动触发表单验证。如果验证通过,我们可以获取表单数据并执行提交逻辑。如果验证失败,我们会在控制台打印错误信息。

这个示例展示了如何在 React Ant Design 中实现自定义的表单验证逻辑。您可以根据实际需求,进一步扩展和修改这个示例代码。