1. 程式人生 > 實用技巧 >vue 身份證18位驗證

vue 身份證18位驗證

<el-row>
  <el-col :span="24">
     <el-form-item label="投訴人身份證號" prop="idCard">
        <el-input v-model="complaintForm.idCard" onkeyup="this.value=this.value.replace(/[^\X0-9]/g, '')" placeholder="請輸入身份證號(數字0-9 X為大寫)" style="width: 300px;" :disabled="isDetails"></el-input>
     </el-form-item>
  </el-col>
</el-row>

onkeyup="this.value=this.value.replace(/[^\X0-9]/g, '')"  這句話就是說只能輸入漢字 輸入別的會直接刪除掉

封裝一個js 在每個頁面都可以呼叫; 引用部分就不介紹了 直接上js程式碼

   export function isIdentityId(identityId) {
  var patrn = /(^\d{15}$)|(^\d{17}(\d|X|x)$)/;//長度或格式校驗
  //地區校驗
  var aCity = {
    11: "北京",
    12: "天津",
    13: "河北",
    14: "山西",
    15: "內蒙古",
    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 = (
    identityId.substr(6, 4) +
    "-" +
    Number(identityId.substr(10, 2)) +
    "-" +
    Number(identityId.substr(12, 2))
  ).replace(/-/g, "/"),
    d = new Date(sBirthday)
  // 身份證號碼校驗 最後4位  包括最後一位的數字/字母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 < identityId.length - 1; i++) {
    sum += identityId[i] * weights[i];
  }
  var last = codes[sum % 11]; //計算出來的最後一位身份證號碼

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

在data裡面引入

data() {
    var icdId  = (rule, value, callback) => {
      var errorMsg = isIdentityId(value);
      if (errorMsg != "") {
        callback(new Error(errorMsg));
      }     
    };
}

phoneNum: [
          { required: true, message: "請填寫投訴人手機號", trigger: "blur" },
          { validator: isPhone, trigger: "blur" },

        ], 

希望對大家有所幫助 校驗真實性最好的方法是接入公安系統