vue身份证检验方法

本文介绍了在Vue应用中如何使用input元素获取用户输入的身份证号,并通过`numberUtils`模块进行验证,包括位数、出生日期范围、校验码等,验证失败时会显示相应的错误信息。
摘要由CSDN通过智能技术生成

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;
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
对于Vue身份证图片识别,可以使用以下方法实现: 1. 首先,将用户上传的身份证图片转换成base64格式,并将其作为请求参数发送给后端接口。可以使用前端的FileReader对象读取图片文件,并使用canvas将其转换成base64格式。 引用 2. 后端需要提供相应的接口,接收前端传递的base64数据,并进行身份证正面和反面的识别。可以使用第三方的身份证识别接口,如百度的身份证识别API。在后端的接口中,可以调用相应的身份证识别接口,并返回识别结果给前端。 引用 3. 在前端,接收后端返回的识别结果,并将其渲染到页面上。根据需求,可以将识别出的身份证信息显示在相应的输入框或其他位置上。 引用 总结来说,Vue身份证图片识别的步骤包括将图片转换成base64格式、调用后端接口进行识别、接收并渲染识别结果。这样就可以实现Vue身份证图片识别的功能了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue-Uni-App小程序实现身份证识别](https://blog.csdn.net/qq_43485097/article/details/122127236)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue 百度ocr识别身份证(银行卡、火车票、名片、发票等同理)信息](https://blog.csdn.net/wxyf2018/article/details/89680042)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值