快捷導(dǎo)航

vue中使用elementUI自定義校驗(yàn)及點(diǎn)擊提交不生效問(wèn)題解決辦法

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

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

前言：

本章講述的主要是對(duì)身份證號(hào)碼的校驗(yàn) 及為何校驗(yàn)了但提交不生效問(wèn)題。

拓展小知識(shí)：

?? 1、身份證號(hào)碼（二代18位身份證）的含義：

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

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

?? X是羅馬數(shù)字的10，用X來(lái)代替10，可以保證公民身份證符合國(guó)家標(biāo)準(zhǔn)。

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

一、身份證號(hào)碼的校驗(yàn)

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

注意：開(kāi)啟屬性show-word-limit可以顯示字?jǐn)?shù)統(tǒng)計(jì),配合 maxlength 屬性來(lái)限制輸入長(zhǎng)度

<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">確認(rèn)變更</el-button>
      </el-col>
    </el-row>
  </el-form>
</el-dialog>

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

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

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

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

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

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

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

?? 2、新建一個(gè)自定義身份證驗(yàn)證的js文件，在js文件中寫(xiě)一個(gè)身份校驗(yàn)的方法，在需要身份校驗(yàn)的vue組件中引入這個(gè)js文件。

/* 身份證校驗(yàn)規(guī)則 lxy */
//校驗(yàn)身份證號(hào)
export function idCard(idCard) {  //傳入的 idCard 參數(shù)為用戶輸入的身份證號(hào)
  //長(zhǎng)度或格式校驗(yàn)
  var patrn = /(^\d{15}$)|(^\d{17}(\d|X|x)$)/;
  //地區(qū)校驗(yàn)
  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: "臺(tái)灣",
    81: "香港",
    82: "澳門(mén)",
    91: "國(guó)外"
  };
  // 出生日期驗(yàn)證
  var sBirthday = (
    idCard.substr(6, 4) +
    "-" +
    Number(idCard.substr(10, 2)) +
    "-" +
    Number(idCard.substr(12, 2))
  ).replace(/-/g, "/"),
    d = new Date(sBirthday)
  // 身份證號(hào)碼校驗(yàn) 最后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];
  }
  //計(jì)算出來(lái)的最后一位身份證號(hào)碼
  var last = codes[sum % 11]; 

  //錯(cuò)誤信息校驗(yàn)
  var errorMsg = '';
  if (idCard === '') {
    errorMsg = "身份證號(hào)不能為空"
  } else if (!patrn.exec(idCard)) {
    errorMsg = "你輸入的身份證長(zhǎng)度或格式錯(cuò)誤"
  } 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 = "你輸入的身份證號(hào)非法"
  }
  return errorMsg;
}

?? 3、在你需要驗(yàn)證身份證的文件中引入身份證驗(yàn)證的js文件

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

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

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

??  劃重點(diǎn)：

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

                                切記一定要每一種情況都要執(zhí)行回調(diào) 【即 callback()】?。。?/p>
??  我自己是直接 if 判斷是否為空之后就沒(méi)有 else { callback(); } 判斷另一種情況，所以當(dāng)我校驗(yàn)提交按鈕時(shí)一直觸發(fā)不了，一直無(wú)效，后來(lái)才發(fā)現(xiàn)是這個(gè)問(wèn)題。

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

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

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

      // 業(yè)主確認(rèn)變更
      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;
          }
        });
     },

效果展示：

二、為何校驗(yàn)了但提交不生效問(wèn)題

??  劃重點(diǎn)：

??  總結(jié)以下幾個(gè)問(wèn)題：

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

     切記一定要每一種情況都要執(zhí)行回調(diào) 【即 callback()】！?。?/p>
?? 2、表單引用名稱(chēng)不正確。在表單上添加 ref 屬性時(shí)，需確保名稱(chēng)和使用 this.$refs時(shí)的名稱(chēng)一致，不然無(wú)法獲取到表單引用對(duì)象；

?? 3、表單對(duì)象不存在 validate 方法；

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

?? 5、表單驗(yàn)證規(guī)則未設(shè)置。若沒(méi)有為表單設(shè)置驗(yàn)證規(guī)則，則無(wú)法進(jìn)行驗(yàn)證，而此時(shí)調(diào)用 validate 方法也會(huì)失效。需為表單設(shè)置 rules 屬性，并設(shè)置相應(yīng)的驗(yàn)證規(guī)則。

總結(jié)

到此這篇關(guān)于vue中使用elementUI自定義校驗(yàn)及點(diǎn)擊提交不生效問(wèn)題解決辦法的文章就介紹到這了,更多相關(guān)elementUI自定義校驗(yàn)及點(diǎn)擊提交不生效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: