antd表单验证自定义检验方式（validator）

最新推荐文章于 2025-01-20 16:32:46 发布

原创最新推荐文章于 2025-01-20 16:32:46 发布 · 4.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #ts

本文探讨了Ant Design Form组件的验证机制，展示了如何使用rules属性定义必填项及自定义验证规则。通过示例代码解释了如何返回Promise进行异步验证，并给出了一个关于条件校验的例子，强调了错误提示的设置。

 <Form.Item
        rules={[
          {
            required: true,
            message: 'Please confirm your password!',
          },
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (!value || getFieldValue('password') === value) {
                return Promise.resolve();
              }
              return Promise.reject(new Error('错误提示!'));
            },
          }),
        ]}
      >

接收 Promise 作为返回值
参考链接：https://ant.design/components/form-cn/#components-form-demo-register

也可以直接传入校验结果：
举个栗子：

const [deptRe, setDeptRe] = useState(true); // 定义初始化校验结果

// 定义执行方法
  const = () => {
  let a = 3;
  let b = 1;
     if(a > b)｛
     setDeptRe(false);
     ｝else{
     setDeptRe(true);
     }
  };
// 表单
<Form.Item
        rules={[
         () => ({
         validator() {
          if (deptRe) {
          return Promise.resolve(); // 执行校验通过的结果
           }
           return Promise.reject(new Error('a大于b'),// 执行校验不通过的结果
            );
                },
              }),
            ]}
      >