[React]antd表单校验函数写法

来自文心一言

通过 rules 属性来定义校验规则，其中可以包含自定义的校验函数 validator

import React from 'react';
import { Form, Input, Button } from 'antd';const MyForm = () => {const [form] = Form.useForm();// 自定义校验函数const checkUsername = (_, value) => {if (!value) {return Promise.reject(new Error('用户名不能为空'));}if (value.length < 3) {return Promise.reject(new Error('用户名长度不能少于3个字符'));}return Promise.resolve();};const onFinish = (values) => {console.log('Success:', values);};const onFinishFailed = (errorInfo) => {console.log('Failed:', errorInfo);};return (<Formform={form}name="basic"labelCol={{ span: 8 }}wrapperCol={{ span: 16 }}initialValues={{ remember: true }}onFinish={onFinish}onFinishFailed={onFinishFailed}autoComplete="off"><Form.Itemlabel="用户名"name="username"rules={[{ required: true, message: '请输入用户名!' },{ validator: checkUsername }  // 使用自定义校验函数
        ]}><Input /></Form.Item><Form.Item wrapperCol={{ offset: 8, span: 16 }}><Button type="primary" htmlType="submit">提交</Button></Form.Item></Form>
  );
};export default MyForm;