Antd的validator自定义校验导致其它校验规则失效

本文介绍了在使用Ant Design(Antd)时遇到的一个问题,即自定义的validator校验函数导致其他预设的校验规则失效。作者通过查证和实践,发现解决方案在于在validator的所有逻辑中都包含回调(callback)或使用Promise,以确保不影响其他验证规则的执行。针对Antd V4,需使用Promise进行改造。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<FormItem
  label="新账号"
  name="phone"
  rules={[
    { required: true, message: "不能为空" },
    { max: 20, message: "最长20个字符" },
    {
      whitespace: true,
      message: "不能输入空格",
    },
    {
      type: "number",
      transform: (val) => Number(val),
      message: "只能输入数字",
    },
    {
      validator: this.onCheckPhone,
    },
  ]}
>
  <Input placeholder="请输入手机号" />
</FormItem>

我这个自定义检验主要功能是发到后端去查重,同时还需要保留手机号的格式校验,代码如下:

onCheckPhone = (rule, value) => {
  return new Promise(async (resolve, reject) => {
    const { dispatch } = this.props;
    const { currAreaCode } = this.state;
    if (currAreaCode && value) {
      const res = await dispatch({
        type: "userManagement/checkPhone",
        payload: { phone: `${currAreaCode}-${value}` },
      });
      if (typeof res !== "number") {
        resolve();
      } else {
        reject(new Error("该账号已存在!"));
      }
    }
  });
};

代码结构就酱婶,我预想的是,validator 还会和其它校验规则同时校验,但是发现并不能。然后查了查 issue,无果… 果断问了一下度娘,OK,解决。

原来,这个 validator 的规则需要在所有的判断逻辑里面都要加入 callback,保证要覆盖到所有情况,不然就会阻塞其它的校验规则。so…简单改造了一下

onCheckPhone = (rule, value) => {
  return new Promise(async (resolve, reject) => {
    const { dispatch } = this.props;
    const { currAreaCode } = this.state;
    if (currAreaCode && value) {
      const res = await dispatch({
        type: "userManagement/checkPhone",
        payload: { phone: `${currAreaCode}-${value}` },
      });
      if (typeof res !== "number") {
        resolve();
      } else {
        reject(new Error("该账号已存在!"));
      }
    } else {
      // 这里加了一个 resolve
      resolve();
    }
  });
};

由于我用的是 Antd V4,validator 的 API 进行了修改,改用 Promise。所以如果你是老版本用户,直接调用原来的 callback 回调即可。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值