vue身份证检验方法

小周同学:

已于 2024-04-26 10:29:25 修改

阅读量1.7k

点赞数 3

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2024-04-26 10:29:00 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_58495461/article/details/138211215

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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