js 身份证动态验证相关 Vue

移动端
iOS 可监听keydown事件

idNoReg (event) {
  if (!this.isIOS) {
    return
  }
  // console.log('keyCode === ' + event.keyCode)
  // console.log('this.kidsInfo.id_no.length === ', this.kidsInfo.id_no.length)
  if (this.kidsInfo.id_no.length === 0 && event.keyCode > 48 && event.keyCode <= 57) {
    // console.log('第1位ok')
  } else if (this.kidsInfo.id_no.length >= 1 && this.kidsInfo.id_no.length <= 17 && event.keyCode >= 48 &&           event.keyCode <= 57) {
    // console.log('第2位到第17位ok')
  } else if ((this.kidsInfo.id_no.length === 17 && event.keyCode >= 48 && event.keyCode <= 57) || (this.kidsInfo.id_no.length === 17 && event.keyCode === 88) || (this.kidsInfo.id_no.length === 17 && event.keyCode === 120)) {
    // console.log('第18位ok')
  } else {
    // 非法
    // console.log('非法')
    event.preventDefault()
  }
}

安卓监听会有坑
通过监听具体变量

'kidsInfo.id_no' (newVal, oldVal) {
  // 安卓监听身份证  newSingleIdNo为判断新增字符方法
  if (newVal.length === 1 && (isNaN(this.newSingleIdNo(newVal, newVal.length)) || newVal === '0')) {
    this.kidsInfo.id_no = ''
  } else if ((newVal.length > 1 && newVal.length < 18) && isNaN(this.newSingleIdNo(newVal, newVal.length))) {
    this.kidsInfo.id_no = this.kidsInfo.id_no.substr(0, this.kidsInfo.id_no.length - 1)
  } else if (newVal.length === 18 && isNaN(this.newSingleIdNo(newVal, newVal.length)) && this.newSingleIdNo(newVal, newVal.length) !== 'x' && this.newSingleIdNo(newVal, newVal.length) !== 'X') {
    this.kidsInfo.id_no = this.kidsInfo.id_no.substr(0, this.kidsInfo.id_no.length - 1)
  } else if (this.newSingleIdNo(newVal, newVal.length) === ' ') {
    this.kidsInfo.id_no = this.kidsInfo.id_no.substr(0, this.kidsInfo.id_no.length - 1)
  }
}
......
newSingleIdNo (id, length) {
  let singleNum
  singleNum = id.substr(length - 1, 1)
  return singleNum
}