表单项绑定 @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 clearablev-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-optionv-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()// 今天日期，数组，同 birthdaylet 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，月数加上 12if (age[1] < 0) {age[0]--age[1] += 12}return {age:age[0],month:age[1],day:age[2]}
}
)
