Form item binding @change event
<template> <el-form ref="employeeFormRef" :model="form" :rules="rules" label-width="120px"> <el-form-item label="Identity card number" prop="idCardNo"> <el-input v-model="" placeholder="Please enter your ID number" @change="idCardNoChange" /> </el-form-item> <el-form-item label="Date of Birth" prop="dateOfBirth"> <el-date-picker clearable v-model="" type="date" value-format="YYYY-MM-DD" placeholder="Please select a date of birth"> </el-date-picker> </el-form-item> <el-form-item label="age" prop="age"> <el-input v-model="" placeholder="Please enter age" /> </el-form-item> <el-form-item label="gender" prop="sex"> <el-select v-model="" placeholder="Please choose gender"> <el-option v-for="dict in sys_user_sex" :key="" :label="" :value="" ></el-option> </el-select> </el-form-item> </el-form> </template>
Define authentication rules
const isIdCardNo = (rule, value, callback) => { var arrExp = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];//Weighting factor var arrValid = [1, 0, "X", 9, 8, 7, 6, 5, 4, 3, 2];//Check code if (/^\d{17}\d|x$/(value)) { var sum = 0, idx; for (var i = 0; i < - 1; i++) { // Sum the product of the first 17 digits and the weights sum += parseInt((i, 1), 10) * arrExp[i]; } // Computational modulus (fixed algorithm) idx = sum % 11; // Check whether the 18th is equal to the verification code if (arrValid[idx] == (17, 1).toUpperCase()) { callback() } else { = ''; = ''; = ''; callback("The ID card format is incorrect"); } } else { = ''; = ''; = ''; callback("The ID card format is incorrect"); } }; const data = reactive<PageData<EmployeeForm, EmployeeQuery>>({ rules: { idCardNo: [ { required: true, message: "Identity card number cannot be empty", trigger: "blur" }, { //Calling the defined method to verify whether the format is correct validator: isIdCardNo, trigger: "blur" } ], } });
Identify gender, date of birth
// Identity card identification gender date of birthconst 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 (()) { let org_birthday = (6, 14); let org_gender = (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); = sex; = birthday; = ageValue(birthday).age; } else { return false; } };
Date of birth calculate age
/** * Get age * @param val * @returns {{month: unknown, day: unknown, age: unknown}} */ const ageValue= (val?: String) => { // Create a new date object let date = new Date() // Today's date, array, same as birthday let birthdayDate = new Date(val) let birthday = [(), (), ()] let today = [(), () + 1, ()] // Calculate the difference between year, month and day respectively let age = ((value, index) => { return value - birthday[index] }) // When the number of days is negative, the month is reduced by 1, the number of days plus the total number of days in the month if (age[2] < 0) { // A simple method to get the total number of days last month will not be wrong let lastMonth = new Date(today[0], today[1], 0) age[1]-- age[2] += () } // When the number of months is negative, the year is reduced by 1, and the number of months is added by 12 if (age[1] < 0) { age[0]-- age[1] += 12 } return {age:age[0],month:age[1],day:age[2]} }
This is the article about vue3 ID card verification, gender identification/birthday/age. For more related vue3 ID card verification, gender identification/birthday/age, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!