Vue自定义表单验证(rule，value，callback)使用详解

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

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",
          },
        ],

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",
          },
        ],