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

本文主要是介绍React Ant Design 中内置、自定义表单验证的火速上手，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、常见的内置验证规则

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

required:
- 表示该字段是必填的。
min:
- 用于数字字段,表示最小值。
- 用于字符串字段,表示最小长度。
max:
- 用于数字字段,表示最大值。
- 用于字符串字段,表示最大长度。
email:
- 验证输入是否为有效的电子邮件地址。
url:
- 验证输入是否为有效的 URL。
pattern:
- 使用正则表达式验证输入。
type:
- 验证输入的数据类型,可选项有 string、number、boolean、integer、float。
validator:
- 使用自定义函数进行验证。可以返回 Promise 以实现异步验证。
whitespace:
- 验证输入是否只包含空白字符。
len:
- 验证字符串长度是否等于指定值。

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

例1: 内置邮箱验证

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

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

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

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

<Form.Itemname="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 字段添加了两个验证规则:

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

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

二、自定义表单验证步骤

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

<Form.Itemname="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>

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

const [form] = Form.useForm();return (<Form form={form} onFinish={onFinish}>{/* 表单项 */}</Form>
);

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

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

使用 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.Itemname="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.Itemname="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.Itemname="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;