以下是一个使用自定义验证器验证表单字段的示例代码:
import React from 'react';
import { Form, Input, Button } from 'antd';
const CustomValidatorExample = () => {
const onFinish = (values) => {
console.log('Received values:', values);
};
const validateUsername = (_, value) => {
// 自定义验证逻辑,例如验证用户名是否符合要求
if (value && value.length < 4) {
return Promise.reject('用户名长度不能少于4个字符');
} else {
return Promise.resolve();
}
};
return (
);
};
export default CustomValidatorExample;
在上面的代码中,我们定义了一个自定义验证器函数 validateUsername
,它接收两个参数 _
和 value
。其中 _
是用于兼容 Ant Design 表单验证器的规范,我们可以忽略它。value
是当前表单字段的值。
在 validateUsername
中,我们可以编写自己的验证逻辑。如果验证不通过,我们可以返回一个拒绝的 Promise,并提供一个错误提示信息。如果验证通过,我们可以返回一个解决的 Promise。
然后,在表单项的 rules
属性中,我们可以将这个自定义验证器函数传递给验证规则对象的 validator
属性。这样,当用户提交表单时,Ant Design 会自动调用这个验证器函数来验证表单字段的值。
这是一个简单的示例,你可以根据自己的需求来编写更复杂的自定义验证器函数。