快捷導(dǎo)航

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

更新時(shí)間：2023年07月20日 16:05:15 作者：-風(fēng)過無痕

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

前言

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

自定義驗(yàn)證規(guī)則

prop綁定值: [
          {
            validator: (rule, value, callback) => {
              console.log('驗(yàn)證規(guī)則信息',rule);
              console.log('輸入框的值',rule);
              // callback()為空通過驗(yàn)證
              // callback(new Error('未通過驗(yàn)證，拋出異常'))
              console.log('是否通過驗(yàn)證規(guī)則',callback);
            },
            // 失去焦點(diǎn)觸發(fā)
            trigger: "blur",
          },
        ],

使用場(chǎng)景-正則驗(yàn)證是否是手機(jī)號(hào)

test()方法：用于檢測(cè)字符串中指定的值，匹配成功返回true，匹配失敗返回false

prop綁定值: [
          { validator:  (rule, value, callback) {
          // 手機(jī)號(hào)正則表達(dá)式
            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 != '') {
             // 拋出異常，驗(yàn)證規(guī)則有錯(cuò)
              callback(new Error('請(qǐng)輸入正確的電話號(hào)碼'))
              } else {
              callback()
          }
        }
        // 輸入框值變化一次執(zhí)行一次
       }, trigger: "change" },
        ],

使用場(chǎng)景-判斷合同編號(hào)是否重復(fù)

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

使用場(chǎng)景-多選判斷是否選中

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

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