vue中使用elementUI自定義校驗及點擊提交不生效問題解決辦法

更新時間：2023年12月23日 11:09:48 作者：明思齊

我們在項目中經(jīng)常會用到ElementUI的表單驗證,下面這篇文章主要給大家介紹了關(guān)于vue中使用elementUI自定義校驗及點擊提交不生效問題解決的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言：

本章講述的主要是對身份證號碼的校驗及為何校驗了但提交不生效問題。

拓展小知識：

?? 1、身份證號碼（二代18位身份證）的含義：

1?? 1-2位：代表所屬省級政府的代碼；
2?? 3-4位：代表所在的地、市級政府代碼；
3?? 5-6位：代表所在區(qū)、縣級政府代碼；
4?? 7-10位：代表身份證持有人的出生年份；
5?? 11-12位：代表身份證持有人的出生月份；
6?? 13-14位：代表身份證持有人的出生當月日期；
7?? 15-16位：代表身份證持有人在當?shù)氐捻樞虼a（所在地的派出所的代碼）；
8?? 17位：代表性別，奇數(shù)表示男性，偶數(shù)表示女性；

9?? 18位：代表校驗碼（校檢碼可以是0～9的數(shù)字，有時也用X表示）。

?? X是羅馬數(shù)字的10，用X來代替10，可以保證公民身份證符合國家標準。

?? 2、一代身份證和二代身份證的區(qū)別：1?? 編號位數(shù)不同，第一代身份證為15位號碼，而第二代證是18位號碼。
2?? 編碼規(guī)則不同，第一代身份證在前6位號碼后沒有完整出生年份，而二代的有完整的出生年份。
3?? 芯片存儲量不同，二代身份證采用非接觸式芯片，寫入的信息可劃分安全等級，分區(qū)存儲，容量更大。
4?? 二代增加了有效的防偽標識，將持證人的照片圖像和身份項目內(nèi)容等數(shù)字化后采用密碼技術(shù)加密，存入芯片，可以有效起到證件防偽的作用。

一、身份證號碼的校驗

?? 1、在vue文件中，寫好關(guān)于身份證的input輸入框（且要設定輸入長度限制）

注意：開啟屬性show-word-limit可以顯示字數(shù)統(tǒng)計,配合 maxlength 屬性來限制輸入長度

<el-dialog title="業(yè)主變更" :visible.sync="inLeaseVisible">
  <el-form :rules="rulesY" ref="rulesTower" :model="inLeaseForm" label-width="120px" size="small">
    <el-row>
      <el-col :span="12">
         <el-form-item label="業(yè)主姓名" prop='name'>
           <el-input v-model="inLeaseForm.name"/>
         </el-form-item>
      </el-col>
      <el-col :span="12">
         <el-form-item label="聯(lián)系電話" prop='phone'>
           <el-input v-model="inLeaseForm.phone" maxlength="11" show-word-limit clearable/>
         </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="身份證" prop='idCard'>
          <el-input v-model="inLeaseForm.idCard" maxlength="18" show-word-limit/>
        </el-form-item>
      </el-col>
      <el-col :span="24" style="text-align: right;">
         <el-button type="primary" size="small" @click="inLeaseSubmit">確認變更</el-button>
      </el-col>
    </el-row>
  </el-form>
</el-dialog>

??   :visible.sync="inLeaseVisible" —— visible代表可見的,當vue中inLeaseVisible變量的值為true時，el-dialog修飾的內(nèi)容(會話窗口或者文本信息)就會在頁面中展示出來,反之是false時就會隱藏；sync 指的是同步動態(tài)雙向來表示visible的值，當我關(guān)閉窗口時，彈框就隱藏了；

?? :rules = "rulesY" ——  動態(tài)綁定校驗規(guī)則屬性

?? ref = "rulesTower" —— ref 是一個全局屬性，可用來引用(標記) 指定元素或者組件，它是唯一的，可在當前組件內(nèi)部通過 this.$refs 來訪問，也可在當前組件外部通過 vm.$refs 來訪問; ( 在Vue中，ref是一個用于訪問組件或DOM元素的屬性)

??  :model = "inLeaseForm" —— :model是v-bind:model的縮寫，主要是用于數(shù)據(jù)雙向綁定

??  prop='name' —— prop是父組件向子組件單向傳遞數(shù)據(jù)，該過程是單向的(單向數(shù)據(jù)流)

傳遞的屬性可以是靜態(tài)的/動態(tài)的/數(shù)字/字符串/數(shù)組/對象。

在element官網(wǎng)中可以看到input輸入框中的輸入長度限制

?? 2、新建一個自定義身份證驗證的js文件，在js文件中寫一個身份校驗的方法，在需要身份校驗的vue組件中引入這個js文件。

/* 身份證校驗規(guī)則 lxy */
//校驗身份證號
export function idCard(idCard) {  //傳入的 idCard 參數(shù)為用戶輸入的身份證號
  //長度或格式校驗
  var patrn = /(^\d{15}$)|(^\d{17}(\d|X|x)$)/;
  //地區(qū)校驗
  var aCity = {
    11: "北京",
    12: "天津",
    13: "河北",
    14: "山西",
    15: "內(nèi)蒙古",
    21: "遼寧",
    22: "吉林",
    23: "黑龍江",
    31: "上海",
    32: "江蘇",
    33: "浙江",
    34: "安徽",
    35: "福建",
    36: "江西",
    37: "山東",
    41: "河南",
    42: "湖北",
    43: "湖南",
    44: "廣東",
    45: "廣西",
    46: "海南",
    50: "重慶",
    51: "四川",
    52: "貴州",
    53: "云南",
    54: "西藏",
    61: "陜西",
    62: "甘肅",
    63: "青海",
    64: "寧夏",
    65: "新疆",
    71: "臺灣",
    81: "香港",
    82: "澳門",
    91: "國外"
  };
  // 出生日期驗證
  var sBirthday = (
    idCard.substr(6, 4) +
    "-" +
    Number(idCard.substr(10, 2)) +
    "-" +
    Number(idCard.substr(12, 2))
  ).replace(/-/g, "/"),
    d = new Date(sBirthday)
  // 身份證號碼校驗 最后4位  包括最后一位的數(shù)字/字母X
  var sum = 0,
    weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
    codes = "10X98765432";
  for (var i = 0; i < idCard.length - 1; i++) {
    sum += idCard[i] * weights[i];
  }
  //計算出來的最后一位身份證號碼
  var last = codes[sum % 11]; 

  //錯誤信息校驗
  var errorMsg = '';
  if (idCard === '') {
    errorMsg = "身份證號不能為空"
  } else if (!patrn.exec(idCard)) {
    errorMsg = "你輸入的身份證長度或格式錯誤"
  } else if (!aCity[parseInt(idCard.substr(0, 2))]) {
    errorMsg = "你的身份證地區(qū)非法"
  } else if (sBirthday != d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate()) { errorMsg = "身份證上的出生日期非法" } else if (idCard[idCard.length - 1] != last) {
    errorMsg = "你輸入的身份證號非法"
  }
  return errorMsg;
}

?? 3、在你需要驗證身份證的文件中引入身份證驗證的js文件

//引入身份證驗證的js文件
import {idCard} from "@/pages/room/validate.js";

?? 4、在data中定義變量，接收校驗結(jié)果

data() {
      //定義變量接收校驗結(jié)果
      //自定義驗證表單時，切記不管什么情況都要執(zhí)行callback函數(shù)?。?！
      var checkIdCard  = (rule, value, callback) => {
        var errorMsg = idCard(value);
        if (errorMsg != "") {
          callback(new Error(errorMsg));
        } else {
          callback();// 一定要每種情況都執(zhí)行回調(diào)
        }
      }
};

??  劃重點：

? 重要的事情說三遍：切記一定要每一種情況都要執(zhí)行回調(diào) 【即 callback()】！??！

                                切記一定要每一種情況都要執(zhí)行回調(diào) 【即 callback()】?。。?/p>
                                切記一定要每一種情況都要執(zhí)行回調(diào) 【即 callback()】?。?！

??  我自己是直接 if 判斷是否為空之后就沒有 else { callback(); } 判斷另一種情況，所以當我校驗提交按鈕時一直觸發(fā)不了，一直無效，后來才發(fā)現(xiàn)是這個問題。

?? 5、在rulesY中設置驗證規(guī)則，綁定需要校驗的屬性； checkIdCard 調(diào)用校驗返回的結(jié)果

rulesY: {
   phone:[
      {
        required: true,
        message: '請輸入手機號',
        trigger: 'blur'
      },{
         required: true,
         pattern: /^1[3456789]\d{9}$/,
         message: '手機號格式不正確',
         trigger: 'blur'
      }],
    //綁定需要校驗的屬性
    idCard:[
      //checkIdCard： 調(diào)用校驗返回結(jié)果 //定義身份證校驗規(guī)則變量
      { required: true, validator: checkIdCard, trigger: 'blur' }
    ]
},

?? 6、將校驗規(guī)則封裝后，再調(diào)用方法進行校驗

      // 業(yè)主確認變更
      inLeaseSubmit() {
        this.$refs.rulesTower.validate((valid)=>{
          if(valid){
            //alert("success!");
            API.getRoomData('post', '/api/ctyLodgerInfo/hendersonGroup/adminIn', this.inLeaseForm).then(res => {
              if (res.data.code == 0) {
                this.inLeaseForm = {}
                this.inLeaseVisible = false
                this.$message.success(res.data.msg)
              } else {
                this.$message.warning(res.data.msg)
              }
            });
          } else {
            console.log("error?。?！");
            return false;
          }
        });
     },

效果展示：

二、為何校驗了但提交不生效問題

??  劃重點：

??  總結(jié)以下幾個問題：

?? 1、在data中定義變量接收校驗結(jié)果時，未執(zhí)行回調(diào)；

     切記一定要每一種情況都要執(zhí)行回調(diào) 【即 callback()】！??！

?? 2、表單引用名稱不正確。在表單上添加 ref 屬性時，需確保名稱和使用 this.$refs時的名稱一致，不然無法獲取到表單引用對象；

?? 3、表單對象不存在 validate 方法；

?? 4、綁定事件不正確。在表單組件上綁定提交事件時，需確保@click='xxx'事件已正確綁定到表單組件上，并使用了正確的方法名；

?? 5、表單驗證規(guī)則未設置。若沒有為表單設置驗證規(guī)則，則無法進行驗證，而此時調(diào)用 validate 方法也會失效。需為表單設置 rules 屬性，并設置相應的驗證規(guī)則。