vue3?身份證校驗(yàn)、識(shí)別性別/生日/年齡的操作代碼
表單項(xiàng)綁定 @change 事件
<template>
<el-form ref="employeeFormRef" :model="form" :rules="rules" label-width="120px">
<el-form-item label="身份證號(hào)" prop="idCardNo">
<el-input v-model="form.idCardNo" placeholder="請(qǐng)輸入身份證號(hào)" @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="請(qǐng)選擇出生日期">
</el-date-picker>
</el-form-item>
<el-form-item label="年齡" prop="age">
<el-input v-model="form.age" placeholder="請(qǐng)輸入年齡" />
</el-form-item>
<el-form-item label="性別" prop="sex">
<el-select v-model="form.sex" placeholder="請(qǐng)選擇性別">
<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++) {
// 對(duì)前17位數(shù)字與權(quán)值乘積求和
sum += parseInt(value.substr(i, 1), 10) * arrExp[i];
}
// 計(jì)算模(固定算法)
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: "身份證號(hào)不能為空", trigger: "blur" },
{ //調(diào)用定義的方法校驗(yàn)格式是否正確
validator: isIdCardNo, trigger: "blur"
}
],
}
});識(shí)別性別、出生日期
// 身份證識(shí)別性別出生日期
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;
}
};出生日期計(jì)算年齡
/**
* 獲取年齡
* @param val
* @returns {{month: unknown, day: unknown, age: unknown}}
*/
const ageValue= (val?: String) => {
// 新建日期對(duì)象
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()]
// 分別計(jì)算年月日差值
let age = today.map((value, index) => {
return value - birthday[index]
})
// 當(dāng)天數(shù)為負(fù)數(shù)時(shí),月減 1,天數(shù)加上月總天數(shù)
if (age[2] < 0) {
// 簡(jiǎn)單獲取上個(gè)月總天數(shù)的方法,不會(huì)錯(cuò)
let lastMonth = new Date(today[0], today[1], 0)
age[1]--
age[2] += lastMonth.getDate()
}
// 當(dāng)月數(shù)為負(fù)數(shù)時(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)、識(shí)別性別/生日/年齡的文章就介紹到這了,更多相關(guān)vue3 身份證校驗(yàn)、識(shí)別性別/生日/年齡內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
淺談Vue2.4.0 $attrs與inheritAttrs的具體使用
這篇文章主要介紹了淺談Vue2.4.0 $attrs與inheritAttrs的具體使用,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue靜態(tài)界面之左二級(jí)菜單右表單表格的實(shí)例代碼
這篇文章主要介紹了vue靜態(tài)界面之左二級(jí)菜單右表單表格,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
vue項(xiàng)目中實(shí)現(xiàn)el-dialog組件可拖拽效果
本文主要介紹了vue項(xiàng)目中實(shí)現(xiàn)el-dialog組件可拖拽效果,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01
el-table?動(dòng)態(tài)合并不定項(xiàng)多級(jí)表頭的方法
本文主要介紹了el-table?動(dòng)態(tài)合并不定項(xiàng)多級(jí)表頭的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vuex中Store的簡(jiǎn)單實(shí)現(xiàn)
這篇文章主要介紹了Vuex中Store的簡(jiǎn)單實(shí)現(xiàn),為了在 Vue 組件中訪問 this.$store property,你需要為 Vue 實(shí)例提供創(chuàng)建好的 store,Vuex 提供了一個(gè)從根組件向所有子組件,以 store 選項(xiàng)的方式 注入 該 store 的機(jī)制,需要的朋友可以參考下2023-11-11
Vue3使用Element?Plus實(shí)現(xiàn)列表界面的方法步驟
寫后臺(tái)管理的時(shí)候會(huì)有很多列表以及相應(yīng)的條件查詢,下面這篇文章主要給大家介紹了關(guān)于Vue3使用Element?Plus實(shí)現(xiàn)列表界面的方法步驟,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue自定義樹狀結(jié)構(gòu)圖的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue自定義樹狀結(jié)構(gòu)圖的實(shí)現(xiàn)方法,文中通過圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10

