1.定义一个input输入框

 <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 进行身份证号验证

<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中是验证的逻辑

// 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;