input 输入框 校验 身份证号 并提醒 可以给出示范代码吗

当用户在 input 输入框中输入身份证号时，我们可以通过正则表达式进行校验。以下是一个示例代码，可以用于校验身份证号并提醒用户：

<input type="text" id="id-card-input" onblur="validateIdCard()" />

<script>
function validateIdCard() {
  const idCardInput = document.getElementById('id-card-input');
  const idCardPattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

  if (!idCardPattern.test(idCardInput.value)) {
    alert('请输入正确的身份证号');
    idCardInput.value = '';
    idCardInput.focus();
  }
}
</script>

在上述代码中，我们使用了 onblur 事件来触发身份证号的校验。当用户离开输入框时，validateIdCard() 函数会被触发。该函数使用正则表达式 idCardPattern 来校验身份证号是否合法。如果身份证号不合法，我们会弹出一个提示框提醒用户，并清空输入框的内容，并将焦点重新聚焦在输入框上。

相关问题

input 输入框 验证身份证号码

好的，您可以使用正则表达式来验证身份证号码。以下是一个JavaScript代码示例：

//验证身份证号码的函数
function isValidIdCard(idCard) {
  // 18位身份证号码的正则表达式
  var reg = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  // 判断是否符合正则表达式
  if (!reg.test(idCard)) {
    return false;
  }
  // 获取身份证号码中的年月日等信息
  var year = idCard.substring(6, 10);
  var month = idCard.substring(10, 12);
  var day = idCard.substring(12, 14);
  // 判断年份是否合法
  var currentYear = new Date().getFullYear();
  var startYear = currentYear - 150;
  if (year < startYear || year > currentYear) {
    return false;
  }
  // 判断月份是否合法
  if (month < 1 || month > 12) {
    return false;
  }
  // 判断日期是否合法
  var d = new Date(year, month - 1, day);
  if (d.getFullYear() != year || d.getMonth() != month - 1 || d.getDate() != day) {
    return false;
  }
  // 校验码验证
  var idCardWi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1];
  var idCardY = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
  var idCardWiSum = 0;
  for (var i = 0; i < 17; i++) {
    idCardWiSum += parseInt(idCard.substring(i, i + 1)) * idCardWi[i];
  }
  var idCardMod = idCardWiSum % 11;
  var idCardLast = idCard.substring(17);
  if (idCardY[idCardMod] != idCardLast.toUpperCase()) {
    return false;
  }
  // 所有验证通过，返回true
  return true;
}

您可以将验证函数调用添加到input输入框的onblur事件中，如下所示：

<input type="text" placeholder="请输入身份证号" onblur="validateIdCard(this.value)">
<script>
   // 验证身份证号码的函数调用
   function validateIdCard(idCard) {
       if (isValidIdCard(idCard)) {
           alert('身份证号码验证通过');
       } else {
           alert('身份证号码格式不正确');
           // 清空输入框
           document.getElementById('idcard').value = '';
       }
   }
</script>

el-input校验身份证号码

可以通过正则表达式进行校验，以下是一个示例代码：

<template>
  <el-input v-model="idNumber" placeholder="请输入身份证号码" :class="{ 'is-invalid': isInvalid }"></el-input>
</template>

<script>
export default {
  data() {
    return {
      idNumber: '',
      isInvalid: false
    }
  },
  watch: {
    idNumber() {
      const reg = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;
      if (!reg.test(this.idNumber)) {
        this.isInvalid = true;
      } else {
        this.isInvalid = false;
      }
    }
  }
}
</script>

<style scoped>
.is-invalid {
  border-color: red;
}
</style>

这段代码中，我们使用了 `watch` 监听 `idNumber` 的变化，并通过正则表达式进行校验。如果不符合身份证号码格式，则给 input 添加一个红色边框。