Vue中根据输入的身份证号识别年龄、性别

需求： 根据用户输入的身份证号识别出年龄和性别，回显到相应的输入框中

分析：定义身份证号的正则表达式，利用字符串的方法截取出相关字符进行判断

示例：

<template>
<div class="box">
<!-- 根据身份证号生成性别，年龄 -->
    <div class="form_txt">根据身份证号生成性别、年龄</div>
    <el-form :model="form" label-width="80px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="身份证号">
            <el-input
              v-model="form.identityCardNo"
              autocomplete="off"
              placeholder="请输入身份证号"
              maxlength="18"
              @input="inputChange"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别">
            <el-input v-model="form.sex"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="年龄">
            <el-input v-model="form.age"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</div>
</template>
<script>
export default {
    data() {
    return {
      form: {
        identityCardNo: "",
        sex: "",
        age: "",
      },
    };
  },
methods: {

    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.form.identityCardNo)) {
        var org_birthday = this.form.identityCardNo.substring(6, 14);
        var org_gender = this.form.identityCardNo.substring(16, 17);
        var sex = org_gender % 2 == 1 ? "男" : "女";
        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);
        this.form.sex = sex;
        this.form.birthday = birthdays;
        this.form.age = age;
      } else {
        this.form.sex = "未填写";
        return false;
      }
    },
  },
}
</script>