element ui +vue 输入 身份证号获取 性别 年龄 籍贯

<template>

<div>

<el-form :model="baseInfo" ref="baseForm" :rules="baseFormRules" label-width="110px" class="departmentDetail-ruleForm">

<el-form-item label="身份证号:" prop="idCardNo">

<el-input v-model="baseInfo.idCardNo" />

</el-form-item>

</el-form>

</div>

</template>

<script>

export default {

data(){

return {

baseFormRules: {

idCardNo: [

{ required: true, message: '身份证号不能为空', trigger: 'blur' },

{ validator: this.validID, trigger: 'blur' }

],

},

baseInfo: {},

area: {11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",

31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",

43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",

61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"

},

}

},

methods: {

// 身份证验证

async validID(rule,value,callback){

// 身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X

let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

if (reg.test(value)) {

await this.go(value.length);

callback()

} else {

callback(new Error('身份证号码不正确'))

}

},

// 实现自动生成生日,性别,年龄

go(val) {

let iden = this.baseInfo.idCardNo;

let sex = null;

let birth = null;

let myDate = new Date();

let month = myDate.getMonth() + 1;

let day = myDate.getDate();

let age = 0;

if(val===18){

age = myDate.getFullYear() - iden.substring(6, 10) - 1;

sex = iden.substring(16,17);

birth = iden.substring(6,10)+"-"+iden.substring(10,12)+"-"+iden.substring(12,14);

if (iden.substring(10, 12) < month || iden.substring(10, 12) == month && iden.substring(12, 14) <= day) age++;

}

if(val===15){

age = myDate.getFullYear() - iden.substring(6, 8) - 1901;

sex = iden.substring(13,14);

birth = "19"+iden.substring(6,8)+"-"+iden.substring(8,10)+"-"+iden.substring(10,12);

if (iden.substring(8, 10) < month || iden.substring(8, 10) == month && iden.substring(10, 12) <= day) age++;

}

if(sex%2 === 0)

sex = '0';

else

sex = '1';

this.baseInfo.sex = sex;

this.baseInfo.age = age;

this.baseInfo.birthday = birth;

this.baseInfo.birthplace = this.area[iden.substring(0,2)];

},

},

watch:{

baseInfo(val){

console.log(val)

}

}

// methods: {

// // 检测身份证

// checkCard() {

// if(!this.baseInfo.idCardNo) return;

// let CardId = this.baseInfo.idCardNo;

// if(CardId.length == 15) {

// if(this.is15Card(CardId)) {

// this.go(CardId.length);

// }

// else {

// return this.$message({type: 'error', message: '您的身份证号有误!请输入你真实的身份证号,确保你的利益得到保障!'});

// }

// } else if (CardId.length == 18) {

// let a_iden = CardId.split("");

// if (this.is18Card(CardId) && this.is18CardEnd(a_iden)) {

// this.go(CardId.length);

// return this.is18Card(CardId);

// }

// else {

// return this.$message({type: 'error', message: '您的身份证号有误!请输入你真实的身份证号,确保你的利益得到保障!'});

// }

// } else {

// return this.$message({type: 'error', message: '您的身份证号有误!请输入你真实的身份证号,确保你的利益得到保障!'});

// }

// },

// // 检测18位身份证号最后一位是否符合要求

// is18CardEnd(a_idCard) {

// let sum = 0;

// if (a_idCard[17].toLowerCase() == 'x') {

// a_idCard[17] = 10;

// }

// for ( var i = 0; i < 17; i++) {

// sum += this.Wi[i] * a_idCard[i];

// }

// let valCodePosition = sum % 11;

// if (a_idCard[17] == this.ValideCode[valCodePosition]) {

// return true;

// } else {

// return false;

// }

// },

// // 验证最后一位校正码

// is18Card(idCard18){

// let year = idCard18.substring(6,10);

// let month = idCard18.substring(10,12);

// let day = idCard18.substring(12,14);

// let temp_date = new Date(year,parseFloat(month)-1,parseFloat(day));

// if(temp_date.getFullYear()!=parseFloat(year)

// ||temp_date.getMonth()!=parseFloat(month)-1

// ||temp_date.getDate()!=parseFloat(day)){

// return false;

// }else{

// return true;

// }

// },

// is15Card(idCard15){

// let year = idCard15.substring(6,8);

// let month = idCard15.substring(8,10);

// let day = idCard15.substring(10,12);

// let temp_date = new Date(year,parseFloat(month)-1,parseFloat(day));

// if(temp_date.getYear()!=parseFloat(year)||temp_date.getMonth()!=parseFloat(month)-1 ||temp_date.getDate()!=parseFloat(day)) {

// return false;

// }else{

// return true;

// }

// },

// // 实现自动生成生日,性别,年龄

// go(val) {

// let iden = this.baseInfo.idCardNo;

// let sex = null;

// let birth = null;

// let myDate = new Date();

// let month = myDate.getMonth() + 1;

// let day = myDate.getDate();

// let age = 0;

// if(val===18){

// age = myDate.getFullYear() - iden.substring(6, 10) - 1;

// sex = iden.substring(16,17);

// birth = iden.substring(6,10)+"-"+iden.substring(10,12)+"-"+iden.substring(12,14);

// if (iden.substring(10, 12) < month || iden.substring(10, 12) == month && iden.substring(12, 14) <= day) age++;

// }

// if(val===15){

// age = myDate.getFullYear() - iden.substring(6, 8) - 1901;

// sex = iden.substring(13,14);

// birth = "19"+iden.substring(6,8)+"-"+iden.substring(8,10)+"-"+iden.substring(10,12);

// if (iden.substring(8, 10) < month || iden.substring(8, 10) == month && iden.substring(10, 12) <= day) age++;

// }

// if(sex%2 === 0)

// sex = '0';

// else

// sex = '1';

// this.baseInfo.sex = sex;

// this.baseInfo.age = age;

// this.baseInfo.birthday = birth;

// this.baseInfo.birthplace = this.area[iden.substring(0,2)];

// }

// }

}

</script>