快捷導(dǎo)航

vue3?身份證校驗(yàn)、識別性別/生日/年齡的操作代碼

更新時間：2024年07月09日 14:25:47 作者：SummerGao.

這篇文章主要介紹了vue3?身份證校驗(yàn)、識別性別/生日/年齡的操作代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),表單項綁定 @change 事件,?定義身份驗(yàn)證規(guī)則規(guī)則,感興趣的朋友跟隨小編一起看看吧

表單項綁定 @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>

定義身份驗(yàn)證規(guī)則規(guī)則

const isIdCardNo = (rule, value, callback) => {
  var arrExp = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];//加權(quán)因子
  var arrValid = [1, 0, "X", 9, 8, 7, 6, 5, 4, 3, 2];//校驗(yàn)碼
  if (/^\d{17}\d|x$/i.test(value)) {
    var sum = 0, idx;
    for (var i = 0; i < value.length - 1; i++) {
      // 對前17位數(shù)字與權(quán)值乘積求和
      sum += parseInt(value.substr(i, 1), 10) * arrExp[i];
    }
    // 計算模（固定算法）
    idx = sum % 11;
    // 檢驗(yàn)第18為是否與校驗(yàn)碼相等
    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" },
      {	//調(diào)用定義的方法校驗(yàn)格式是否正確
        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()
  // 今天日期，數(shù)組，同 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]
  })
  // 當(dāng)天數(shù)為負(fù)數(shù)時，月減 1，天數(shù)加上月總天數(shù)
  if (age[2] < 0) {
    // 簡單獲取上個月總天數(shù)的方法，不會錯
    let lastMonth = new Date(today[0], today[1], 0)
    age[1]--
    age[2] += lastMonth.getDate()
  }
  // 當(dāng)月數(shù)為負(fù)數(shù)時，年減 1，月數(shù)加上 12
  if (age[1] < 0) {
    age[0]--
    age[1] += 12
  }
  return {age:age[0],month:age[1],day:age[2]}
}

到此這篇關(guān)于vue3 身份證校驗(yàn)、識別性別/生日/年齡的文章就介紹到這了,更多相關(guān)vue3 身份證校驗(yàn)、識別性別/生日/年齡內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: