vue中校验身份证号码

在Vue中校验身份证号码可以使用正则表达式进行匹配验证。可以使用如下代码:

// 身份证号码校验
const validateIdCard = (rule, value, callback) => {
  const idReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
  if (!value) {
    callback(new Error('请输入身份证号码'))
  } else if (!idReg.test(value)) {
    callback(new Error('请输入正确的身份证号码'))
  } else {
    callback()
  }
}

// 使用示例
<el-form-item label="身份证号码" prop="idCard">
  <el-input v-model="form.idCard" placeholder="请输入身份证号码" clearable />
  <span slot="append">
    <el-button @click="validateIdCard" type="primary">校验</el-button>
  </span>
  <span slot="error" class="error">{{ rules.idCard[0].message }}</span>
</el-form-item>

其中，`validateIdCard` 函数是对身份证号码输入框的校验函数，当输入框值为空或者不符合身份证号码格式时会返回错误信息，否则返回空。在组件中，通过 `rules` 对象进行配置，其中 `rules.idCard` 属性指定了校验规则，可以为一个数组，数组中的元素包含 `validator` 和 `message` 属性，分别表示校验函数和错误信息。在输入框后面可以添加一个按钮，通过点击按钮触发 `validateIdCard` 函数进行校验，校验结果会通过 `el-form-item` 组件的 `prop` 属性进行绑定。