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 身份证校验、识别性别/生日/年龄内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
使用webpack-obfuscator进行代码混淆及报错解决过程
随着前端应用的复杂度增加,保护客户端的JavaScript代码变得更为重要,webpack-obfuscator插件通过对代码进行混淆,如变量重命名、字符串加密等,提高代码的保密性,防止源码被轻易查看或修改2024-10-10使用elementuiadmin去掉默认mock权限控制的设置
这篇文章主要介绍了使用elementuiadmin去掉默认mock权限控制的设置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-04-04vue中的attribute和property的具体使用及区别
本文主要介绍了vue中的attribute和property的具体使用及区别,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2021-09-09vue的ElementUI form表单如何给label属性字符串中添加空白占位符
这篇文章主要介绍了vue的ElementUI form表单如何给label属性字符串中添加空白占位符问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论