Bind the @INPUT event to the ID card input box (triggered when the input value changes) with the following code:

<el-form-item label=" identityCardNo" prop="identityCardNo"> <el-input V-model. trim="dataList. IdentityCardNo "autocomplete="off" Placeholder ="input id number "maxLength ="18" @input="inputChange"></el-input> </el-form-item>Copy the code

The js code is as follows:

InputChange () {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 (this. The dataList. IdentityCardNo)) {/ / id number whether legitimate var org_birthday = this. DataList. IdentityCardNo. Substring (6, 14); var org_gender = this.dataList.identityCardNo.substring(16, 17); var sex = org_gender % 2 == 1 ? "Male" : "female "; var birthday = org_birthday.substring(0, 4) + "-" + org_birthday.substring(4, 6) + "-" + org_birthday.substring(6, 8); var birthdays = new Date(birthday.replace(/-/g, "/")); let d = new Date(); let age = d.getFullYear() - birthdays.getFullYear() - (d.getMonth() < birthdays.getMonth() || (d.getMonth() == birthdays.getMonth() && d.getDate() < birthdays.getDate()) ? 1:0); // console.log(' Birthdays Convert time ', Birthdays) // console.log(' age ', Sex = sex this.datalist. Birthday = birthday this.datalist. Age = age} else {this.datalist. This.datalist. Sex = "unfilled" return false}},Copy the code

The renderings are as follows: