SoFunction
Updated on 2025-04-10

vue3 Operation code for ID card verification and gender/birthday/age identification

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!