vue3 身份证校验、识别性别/生日/年龄

表单项绑定 @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]} }