vue3 身份证校验、识别性别/生日/年龄的操作代码

 更新时间:2024年07月09日 14:25:47   作者:SummerGao.  
这篇文章主要介绍了vue3 身份证校验、识别性别/生日/年龄的操作代码,本文通过实例代码给大家介绍的非常详细,表单项绑定 @change 事件, 定义身份验证规则规则,感兴趣的朋友跟随小编一起看看吧

表单项绑定 @change 事件

<template>
  <el-form ref="employeeFormRef" :model="form" :rules="rules" label-width="120px">
    <el-form-item label="身份证号" prop="idCardNo">
      <el-input v-model="form.idCardNo" placeholder="请输入身份证号" @change="idCardNoChange" />
    </el-form-item>
    <el-form-item label="出生日期" prop="dateOfBirth">
      <el-date-picker clearable
                      v-model="form.dateOfBirth"
                      type="date"
                      value-format="YYYY-MM-DD"
                      placeholder="请选择出生日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model="form.age" placeholder="请输入年龄" />
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-select v-model="form.sex" placeholder="请选择性别">
        <el-option
          v-for="dict in sys_user_sex"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value"
        ></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

 定义身份验证规则规则

const isIdCardNo = (rule, value, callback) => {
  var arrExp = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];//加权因子
  var arrValid = [1, 0, "X", 9, 8, 7, 6, 5, 4, 3, 2];//校验码
  if (/^\d{17}\d|x$/i.test(value)) {
    var sum = 0, idx;
    for (var i = 0; i < value.length - 1; i++) {
      // 对前17位数字与权值乘积求和
      sum += parseInt(value.substr(i, 1), 10) * arrExp[i];
    }
    // 计算模(固定算法)
    idx = sum % 11;
    // 检验第18为是否与校验码相等
    if (arrValid[idx] == value.substr(17, 1).toUpperCase()) {
      callback()
    } else {
      form.value.sex = '';
      form.value.dateOfBirth = '';
      form.value.age = '';
      callback("身份证格式有误");
    }
  } else {
    form.sex = '';
    form.dateOfBirth = '';
    form.value.age = '';
    callback("身份证格式有误");
  }
};
const data = reactive<PageData<EmployeeForm, EmployeeQuery>>({
  rules: {
    idCardNo: [
      { required: true, message: "身份证号不能为空", trigger: "blur" },
      {	//调用定义的方法校验格式是否正确
        validator: isIdCardNo, trigger: "blur"
      }
    ],
  }
});

 识别性别、出生日期

// 身份证识别性别出生日期
const idCardNoChange = () => {
  const reg =
    /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
  if (reg.test(form.value.idCardNo)) {
    let org_birthday = form.value.idCardNo.substring(6, 14);
    let org_gender = form.value.idCardNo.substring(16, 17);
    let sex = org_gender % 2 == 1 ? "0" : "1";
    let birthday =
      org_birthday.substring(0, 4) +
      "-" +
      org_birthday.substring(4, 6) +
      "-" +
      org_birthday.substring(6, 8);
    form.value.sex = sex;
    form.value.dateOfBirth = birthday;
    form.value.age = ageValue(birthday).age;
  } else {
    return false;
  }
};

出生日期计算年龄

/**
 * 获取年龄
 * @param val
 * @returns {{month: unknown, day: unknown, age: unknown}}
 */
const ageValue= (val?: String) => {
  // 新建日期对象
  let date = new Date()
  // 今天日期,数组,同 birthday
  let birthdayDate = new Date(val)
  let birthday = [birthdayDate.getFullYear(), birthdayDate.getMonth(), birthdayDate.getDate()]
  let today = [date.getFullYear(), date.getMonth() + 1, date.getDate()]
  // 分别计算年月日差值
  let age = today.map((value, index) => {
    return value - birthday[index]
  })
  // 当天数为负数时,月减 1,天数加上月总天数
  if (age[2] < 0) {
    // 简单获取上个月总天数的方法,不会错
    let lastMonth = new Date(today[0], today[1], 0)
    age[1]--
    age[2] += lastMonth.getDate()
  }
  // 当月数为负数时,年减 1,月数加上 12
  if (age[1] < 0) {
    age[0]--
    age[1] += 12
  }
  return {age:age[0],month:age[1],day:age[2]}
}

到此这篇关于vue3 身份证校验、识别性别/生日/年龄的文章就介绍到这了,更多相关vue3 身份证校验、识别性别/生日/年龄内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 解决vue动态为数据添加新属性遇到的问题

    解决vue动态为数据添加新属性遇到的问题

    今天小编就为大家分享一篇解决vue动态为数据添加新属性遇到的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue实例配置对象中el、template、render的用法

    vue实例配置对象中el、template、render的用法

    这篇文章主要介绍了vue实例配置对象中el、template、render的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • Vue CLI项目迁移eslint报错解决办法及最佳实践

    Vue CLI项目迁移eslint报错解决办法及最佳实践

    ESLint是一个ECMAScript/JavaScript语法规则和代码风格的检查工具,它的目标是保证代码的一致性和避免错误,这篇文章主要介绍了Vue CLI项目迁移eslint报错解决办法及最佳实践的相关资料,需要的朋友可以参考下
    2025-09-09
  • 前端使用print.js实现打印功能(基于vue)

    前端使用print.js实现打印功能(基于vue)

    最近新接了一个需求,想要在前端实现打印功能,下面这篇文章主要给大家介绍了关于前端使用print.js实现打印功能(基于vue)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • Vue如何实现el-table多选样式变为单选效果

    Vue如何实现el-table多选样式变为单选效果

    这篇文章主要介绍了Vue如何实现el-table多选样式变为单选效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05
  • vue实现el-select 触底分页+远程搜索的示例

    vue实现el-select 触底分页+远程搜索的示例

    有的时候数据量比较大,比如几千甚至上万条的时候,如果直接赋值,整个页面的 dom 会被撑爆,本文主要介绍了vue实现el-select 触底分页+远程搜索的示例,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • 在Vue3中创建和使用全局组件的实现方式

    在Vue3中创建和使用全局组件的实现方式

    在前端开发中,Vue.js 是一个广泛使用的框架,因其灵活性和强大的功能,得到许多开发者的喜爱,Vue 3 的发布为这一框架带来了很多新的特性和改进,在本文中,我们将详细讨论如何在 Vue 3 中创建和使用全局组件,并通过示例代码展示具体实现方式,需要的朋友可以参考下
    2024-07-07
  • 详解关于Vue单元测试的几个坑

    详解关于Vue单元测试的几个坑

    这篇文章主要介绍了关于Vue单元测试的几个坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • Vue中ref、computed与reactive使用频率现象分析(示例详解)

    Vue中ref、computed与reactive使用频率现象分析(示例详解)

    这篇文章主要分析了Vue中的ref、computed和reactive三个响应式API的使用频率和优势,ref适合处理简单数据类型的响应式需求,感兴趣的朋友跟随小编一起看看吧
    2024-11-11
  • Vue父组件向子组件传值以及data和props的区别详解

    Vue父组件向子组件传值以及data和props的区别详解

    这篇文章主要介绍了Vue父组件向子组件传值以及data和props的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03

最新评论