vue表单：输入身份证号码则自动获取对应的年龄和性别，，若不输入身份证号则自己填写年龄和性别

Posted 2021-03-15 lindablog

<el-input
  :ref="item.meta.system_id"
  v-model="temp[item.meta.valueKey]"
  clearable
  oninput="if(value.length>18)value=value.slice(0,18)"
  :disabled="item.meta.disabled"
  :placeholder="item.meta.placeholder ? item.meta.placeholder : ‘请输入‘"
  @blur="onBlurCard"
/>

// 电话输入框失去焦点即表示该输入框输入了值且通过正则表达式是个合法是身份证号码
onBlurCard() {
  const val = this.temp[‘idCardNo‘].length // 获取电话号码长度
  const iden = this.temp[‘idCardNo‘] // 获取电话号码输入框的值
  let sex = null
  const myDate = new Date()
  const month = myDate.getMonth() + 1
  const day = myDate.getDate()
  let age = 0

  if (val === 18) {
    age = myDate.getFullYear() - iden.substring(6, 10) - 1
    sex = iden.substring(16, 17)
    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)
    if (iden.substring(8, 10) < month || iden.substring(8, 10) === month && iden.substring(10, 12) <= day) age++
  }

  if (sex % 2 === 0) { sex = 2 } else { sex = 1 } // sex的值需要根据情况而定，，这里协议的值为：

studentSex: new Map([ // 学生性别
  [2, ‘女‘],
  [1, ‘男‘],
  [3, ‘未知‘]
]),

  this.temp[‘studentSex‘] = sex  // 设置表单中性别的值
  this.temp[‘studentAge‘] = age // 设置表单中年龄字段的值
}