快捷導航

Vue自定義表單驗證(rule，value，callback)使用詳解

更新時間：2023年07月20日 16:05:15 作者：-風過無痕

這篇文章主要介紹了Vue自定義表單驗證(rule，value，callback)使用詳解,今天我們講一講自定義驗證規(guī)則具體使用場景和它的三個參數(shù)意思和使用，需要的朋友可以參考下

前言

最近在實際開發(fā)中遇到需要驗證合同編號是否在數(shù)據(jù)庫已經(jīng)存在，自定義表單驗證。
的表單驗證大家都知道form綁定rules，prop綁定值與form.值一樣，必填，失去焦點觸發(fā) 提示信息。
今天我們講一講自定義驗證規(guī)則具體使用場景和它的三個參數(shù)意思和使用
當我們明白了 validator3個參數(shù)意思，我們就可以隨機組合我們自己的驗證規(guī)則了

自定義驗證規(guī)則

prop綁定值: [
          {
            validator: (rule, value, callback) => {
              console.log('驗證規(guī)則信息',rule);
              console.log('輸入框的值',rule);
              // callback()為空通過驗證
              // callback(new Error('未通過驗證，拋出異常'))
              console.log('是否通過驗證規(guī)則',callback);
            },
            // 失去焦點觸發(fā)
            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 != '') {
             // 拋出異常，驗證規(guī)則有錯
              callback(new Error('請輸入正確的電話號碼'))
              } else {
              callback()
          }
        }
        // 輸入框值變化一次執(zhí)行一次
       }, trigger: "change" },
        ],

使用場景-判斷合同編號是否重復

prop綁定值: [
          { required: true, message: "請輸入合同編號", trigger: "blur" },
          {
            validator: async (rule, value, callback) => {
            // 發(fā)請求
              const res = await adrepetition(value);
              console.log("合同編號", res
              // 判斷狀態(tài)碼
              if (res.code == 200) {
                callback();
              } else {
                 callback(new Error("合同編號重復，請重新輸入"));
              }
            },
            trigger: "blur",
          },
        ],

使用場景-多選判斷是否選中

checkListmain是data里面數(shù)據(jù)，是多選v-model綁定的值，是一個數(shù)組

prop綁定值: [
          { required: true, message: "請輸入合同編號", trigger: "blur" },
          {
            validator: async (rule, value, callback) => {
            // 發(fā)請求
              const res = await adrepetition(value);
              console.log("合同編號", res
              // 判斷狀態(tài)碼
              if (res.code == 200) {
                callback();
              } else {
                 callback(new Error("合同編號重復，請重新輸入"));
              }
            },
            trigger: "blur",
          },
        ],