vue身份证检验方法

1.定义一个input输入框

html 复制代码
 <input
	type="text"
	v-model="personnelInformationForm.idNo"
	class="qrcode-main-form-li-input"
	maxlength="18"	
/>
 <button class="qrcode-form-submit" @click="submitForm">提 交</button>

2.引入numberUtils 进行身份证号验证

javascript 复制代码
<script>
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
import numberUtils from "../utils/idNoRules.js";
export default {
  name: "informationEntry",
  data() {
    return {
      personnelInformationForm: {
        idNo: "",
      }
    };
  },
  methods: {
    submitForm() {
      //验证身份证号是否正确
      if (this.personnelInformationForm.idNo) {
        const result = numberUtils.checkIdCardNumber(
          this.personnelInformationForm.idNo
        );

        if (result.status == 0) {
        } else {
          // 验证失败,根据错误码显示对应的错误信息
          switch (result.status) {
            case 1:
              Toast("身份证号码位数不对!");
              break;
            case 2:
              Toast("身份证号码出生日期超出范围或含有非法字符!");
              break;
            case 3:
              Toast("身份证号码校验错误!");
              break;
            case 4:
              Toast("身份证地区非法!");
              break;
            default:
              Toast("未知错误!");
              break;
          }
          return;
        }
      }

     
};
</script>

3.idNoRules.js中是验证的逻辑

javascript 复制代码
// vue身份证检验方法
const numberUtils = {
    checkIdCardNumber: (idcard) => {
        var Errors = [
            {
                status: 0,
                msg: '验证通过!'
            },
            {
                status: 1,
                msg: '身份证号码位数不对!'
            },
            {
                status: 2,
                msg: '身份证号码出生日期超出范围或含有非法字符!'
            },
            {
                status: 3,
                msg: '身份证号码校验错误!'
            },
            {
                status: 4,
                msg: '身份证地区非法!'
            },
        ];
        var area = {
            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 ereg;
        var idcard_array = idcard.split('');
        // @ts-ignore
        if (area[parseInt(idcard.substr(0, 2))] === null)
            return Errors[4];
        switch (idcard.length) {
            case 18:
                if (parseInt(idcard.substr(6, 4)) % 4 == 0 || (parseInt(idcard.substr(6, 4)) % 100 == 0 && parseInt(idcard.substr(6, 4)) % 4 == 0)) {
                    ereg = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/;
                    //闰年出生日期的合法性正则表达式
                } else {
                    ereg = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/;
                    //平年出生日期的合法性正则表达式
                }
                if (ereg.test(idcard)) {
                    var S = (parseInt(idcard_array[0]) + parseInt(idcard_array[10])) * 7 +
                        (parseInt(idcard_array[1]) + parseInt(idcard_array[11])) * 9 +
                        (parseInt(idcard_array[2]) + parseInt(idcard_array[12])) * 10 +
                        (parseInt(idcard_array[3]) + parseInt(idcard_array[13])) * 5 +
                        (parseInt(idcard_array[4]) + parseInt(idcard_array[14])) * 8 +
                        (parseInt(idcard_array[5]) + parseInt(idcard_array[15])) * 4 +
                        (parseInt(idcard_array[6]) + parseInt(idcard_array[16])) * 2 +
                        parseInt(idcard_array[7]) * 1 +
                        parseInt(idcard_array[8]) * 6 +
                        parseInt(idcard_array[9]) * 3;
                    var Y = S % 11;
                    var M = 'F';
                    var JYM = '10X98765432';
                    M = JYM.substr(Y, 1);
                    if (M == idcard_array[17])
                        return Errors[0];
                    else
                        return Errors[3];
                } else
                    return Errors[2];
            default:
                return Errors[1];
        }
    }
}
export default numberUtils;
相关推荐
程序员大金2 分钟前
基于SpringBoot+Vue+MySQL的在线学习交流平台
java·vue.js·spring boot·后端·学习·mysql·intellij-idea
Easonmax5 分钟前
【CSS3】css开篇基础(1)
前端·css
qq_25183645710 分钟前
基于SpringBoot vue 医院病房信息管理系统设计与实现
vue.js·spring boot·后端
大鱼前端24 分钟前
未来前端发展方向:深度探索与技术前瞻
前端
昨天;明天。今天。29 分钟前
案例-博客页面简单实现
前端·javascript·css
天上掉下来个程小白30 分钟前
请求响应-08.响应-案例
java·服务器·前端·springboot
萧鼎34 分钟前
JavaScript可视化
javascript
周太密1 小时前
使用 Vue 3 和 Element Plus 构建动态酒店日历组件
前端
安冬的码畜日常1 小时前
【玩转 JS 函数式编程_008】3.1.2 JavaScript 函数式编程筑基之:箭头函数——一种更流行的写法
开发语言·javascript·ecmascript·es6·this·箭头函数
时清云1 小时前
【算法】合并两个有序链表
前端·算法·面试