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;
相关推荐
一水鉴天30 分钟前
统一对象拓扑(UOT)设计全链定稿:从三件事分离到三继承 之1 20261010(豆包“查看聊天内容”继续)
前端·css
杨杰39833 分钟前
我给嵌入式设备写了个 6MB 的 JavaScript 运行时(xuan)
javascript
栖凤41 分钟前
Java 的 try-catch 在 Agent 里失效了,我用了 5 个模式才兜住
java·前端·python
粥里有勺糖42 分钟前
视野修炼第136期 | 前端小恐龙"Deno"被收购
前端·github·ai编程
修炼的dance1 小时前
页面塞了13.88 MB字体,导出的PDF只有71 KB
前端
qq_369173631 小时前
如何将 AI 生成的 HTML 网页发布成在线链接?不用自己搭建服务器
前端·人工智能·html·效率工具·html 发布
风花一世月1 小时前
⚡ 我把一座含氢能源园区搬进了浏览器(五类能流实时算守恒,在线直接玩)
前端·人工智能
羲云1 小时前
Claude 越界事件之后:Agent 权限设计为什么不能只靠提示词
前端
行者全栈架构师1 小时前
【鸿蒙心迹】鸿蒙网络请求架构实战——@ohos.net.http 到 Axios 封装、拦截器与统一错误处理(HarmonyOS 7.x)
前端·算法·架构
全栈Agent 小李2 小时前
【无标题】
前端·后端·agent·ai编程·全栈·cursor·mcp