React项目中使用antd表单如何添加自定义校验？Validator函数可用吗？

实现方案 #

Ant Design Form 组件的rules配置原生支持validator自定义校验函数，完全适配你的需求，具体实现方式如下：

基础用法 #

自定义校验函数为Promise类型，校验通过返回resolve，校验不通过返回携带错误提示的reject即可，示例如下：

1. 先定义自定义校验函数

// 自定义名称校验逻辑
const validateName = async (rule, value) => {
  // 空值已被必填规则拦截，此处可不做判断
  if (!value) return Promise.resolve()
  // 自定义规则1：名称长度不小于3位
  if (value.length < 3) {
    return Promise.reject(new Error('名称长度不能少于3个字符'))
  }
  // 自定义规则2：不能以数字开头
  if (/^\d/.test(value)) {
    return Promise.reject(new Error('名称不能以数字开头'))
  }
  return Promise.resolve()
}

2. 将校验函数配置到Form.Item的rules数组中

<Form.Item
  label="名称"
  name="name"
  rules={[
    {
      required: true,
      message: '请输入名称',
    },
    {
      pattern: /^[a-zA-Z0-9]+$/,
      message: '名称只能包含字母和数字',
    },
    // 新增自定义校验规则
    {
      validator: validateName,
    }
  ]}
>
  <Input />
</Form.Item>

常见注意事项 #

• validator默认接收两个参数：rule为当前规则的配置对象，value为当前表单项的输入值
• 校验完成必须返回Promise对象，不可直接返回布尔值或字符串
• 如需联动其他表单项校验，可通过Form实例的getFieldValue方法获取其他字段的值，示例如下：

联动校验示例：校验两次输入的密码是否一致

import { Form, Input } from 'antd'

const [form] = Form.useForm()

const onFinish = (values) => {
  console.log('提交参数：', values)
}

return (
  <Form
    form={form}
    onFinish={onFinish}
    autoComplete="off"
  >
    <Form.Item
      label="密码"
      name="password"
      rules={[{ required: true, message: '请输入密码' }]}
    >
      <Input.Password />
    </Form.Item>

    <Form.Item
      label="确认密码"
      name="confirmPassword"
      rules={[
        { required: true, message: '请再次输入密码' },
        {
          validator: async (rule, value) => {
            const pwd = form.getFieldValue('password')
            if (value && pwd !== value) {
              return Promise.reject(new Error('两次输入的密码不一致'))
            }
            return Promise.resolve()
          }
        }
      ]}
    >
      <Input.Password />
    </Form.Item>
  </Form>
)

• 类组件中使用时，需要将校验函数绑定到组件实例，避免this指向错误

内容的提问来源于stack exchange，提问作者mohit gupta