任务：编程编程语言VUE功能验证身份证号码是否合规。如果合规则输出：验证通过如果不合规则输出：请再次输入若连续三次输入错误则不能再次尝试

<template>
  <div>
    <input type="text" v-model="idNumber" v-on:input="checkIdNumber"/>
    <p v-if="isValid">验证通过</p>
    <p v-if="!isValid">{{errorMessage}}</p>
    <p v-if="attemptsRemaining === 0">您已连续三次输入错误，请稍后再试。</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      idNumber: '',
      isValid: false,
      errorMessage: '',
      attemptsRemaining: 3
    }
  },
  methods: {
    checkIdNumber() {
      // 判断身份证号码是否合规
      const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (!reg.test(this.idNumber)) {
        this.isValid = false
        this.errorMessage = '请再次输入'
        this.attemptsRemaining--
        if (this.attemptsRemaining === 0) {
          this.idNumber = ''
        }
      } else {
        this.isValid = true
        this.errorMessage = ''
        this.attemptsRemaining = 3
      }
    }
  }
}
</script>