Vue-自定义表单验证(rule,value,callback)详细使用

文章介绍了Vue中自定义表单验证的使用,包括prop绑定、validator函数的rule、value和callback参数的含义,以及正则验证手机号、检查合同编号重复和多选判断等具体场景。理解这三个参数有助于创建复杂的验证规则。

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

前言

  • 最近在实际开发中遇到需要验证合同编号是否在数据库已经存在,自定义表单验证。

  • 的表单验证大家都知道form绑定rules,prop绑定值与form.值一样,必填,失去焦点触发 提示信息。

  • 今天我们讲一讲自定义验证规则具体使用场景和它的三个参数意思和使用

  • 当我们明白了 validator3个参数意思,我们就可以随机组合我们自己的验证规则了

自定义验证规则

prop绑定值: [
          {
            validator: (rule, value, callback) => {
              console.log('验证规则信息',rule);
              console.log('输入框的值',rule);
              // callback()为空通过验证
              // callback(new Error('未通过验证,抛出异常'))
              console.log('是否通过验证规则',callback);
            },
            // 失去焦点触发
            trigger: "blur",
          },
        ],

使用场景-正则验证是否是手机号

test()方法:用于检测字符串中指定的值,匹配成功返回true,匹配失败返回false

prop绑定值: [
          { validator:  (rule, value, callback) {
          // 手机号正则表达式
            const reg = /^[1][3,4,5,7,8][0-9]{9}$/
             if (value == '' || value == undefined || value == null) {
             callback()
             } else {
             // 正则失败false,取反true抛出异常
             if (!reg.test(value) && value != '') {
             // 抛出异常,验证规则有错
              callback(new Error('请输入正确的电话号码'))
              } else {
              callback()
          }
        }
        // 输入框值变化一次执行一次
       }, trigger: "change" },
        ],

使用场景-判断合同编号是否重复

prop绑定值: [
          { required: true, message: "请输入合同编号", trigger: "blur" },
          {
            validator: async (rule, value, callback) => {
            // 发请求
              const res = await adrepetition(value);
              console.log("合同编号", res
              // 判断状态码
              if (res.code == 200) {
                callback();
              } else {
                 callback(new Error("合同编号重复,请重新输入"));
              }
            },
            trigger: "blur",
          },
        ],

使用场景-多选判断是否选中

checkListmain是data里面数据,是多选v-model绑定的值,是一个数组

prop绑定值: [
          { required: true, message: "请输入合同编号", trigger: "blur" },
          {
            validator: async (rule, value, callback) => {
            // 发请求
              const res = await adrepetition(value);
              console.log("合同编号", res
              // 判断状态码
              if (res.code == 200) {
                callback();
              } else {
                 callback(new Error("合同编号重复,请重新输入"));
              }
            },
            trigger: "blur",
          },
        ],

总结:

经过这一趟流程下来相信你也对 Vue-自定义表单验证(rule,value,callback)详细使用 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

什么不足的地方请大家指出谢谢 -- 風过无痕

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

-風过无痕

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值