【Ant.design pro】rules方法校验

原创已于 2024-11-16 10:06:26 修改 · 186 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2024-11-08 20:59:59 首次发布

ant design Pro 专栏收录该内容

10 篇文章

订阅专栏

文章目录

必填项:
银行卡号:
数字框：
手机号:

必填项:

const RuleNull = [{ required: true, message: "不可以为空" }]

银行卡号:

  const RuleBankCard = [{ required: true, message: "不可以为空" },{
    validator: (_, value) => {
      if(value.length<16 || value.length > 19){
        return Promise.reject(new Error("银行卡号位数请在16~19位之间"));
      }
      return Promise.resolve();
    },
  }]

数字框：

const RuleNum = [
    { required: true, message: "不可以为空" },
    {validator: (_, value) => {
        const isNumber = /^-?\d+(\.\d+)?$/.test(value);
        if (!isNumber) {
          return Promise.reject(new Error("请输入有效的数字"));
        }
        // 将字符串转换为数字进行进一步校验（如非负数）
        const numValue = parseFloat(value);
        if (isNaN(numValue)) {
          return Promise.reject(new Error("请输入有效的数字"));
        }
        if(value < 0){
          return Promise.reject(new Error("请输入非负数"));
        }
        return Promise.resolve();
      }},
  ]

手机号:

  const RulePhone = [{ required: true, message: "不可以为空" },
    {
      validator: (_, value) => {
        const phoneRegex = /^1[3-9]\d{9}$/;
        if (!phoneRegex.test(value)) {
          return Promise.reject(new Error("手机号码格式不正确"));
        }
        return Promise.resolve();
      },
    }]