vue中如何进行身份证合法性校验（身份证18位，包含最后一位数字/字母）

前言

最近在做项目过程中，测试组人员对添加表单中的身份信息提出了需求，在填写身份证信息时，希望能对所填信息进行合法性校验。比如身份证的位数（目前二代身份证都是18位）、地区编号（所在省（市，旗，区）的行政区代码）、出生年月日（月份所对应的28天/29天/30天/31天）、顺序码（第十五到十七位，第十七位奇数是男性，偶数是女性），校验码（第十八位，如果尾号是10就用X代替了）。

正文

有了新需求，就要满足用户的要求。接下来将介绍我是如何实现身份校验的。项目中使用的前端框架位vue，组件库为Element ui。

1、 首先，根据实际情况，目前我们使用的身份证由18位构成，包括数字和字母X。那么，在input输入框中就需要限制用户输入的数据类型。

        <el-input
              v-model="addStudentList.identitytionId"
              // 使用正则表达式，只能输入阿拉伯数字0-9，和字母X（大写）
             onkeyup="this.value=this.value.replace(/[^\X0-9]/g, '')">
            
         </el-input>
            

2、其次，查看Element ui 组件库官网可知，我们可以自定义表单的校验规则。官网中给出的实例为：

  export default {
   
    data() {
   
      var checkAge = (rule, value, callback) => {
   
        if (!value) {
   
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
   
          if (!Number.isInteger(value)) {
   
            callback(new Error('请输入数字值'));
          } else {
   
            if (value < 18) {
   
              callback(new Error('必须年满18岁'));
            } else {
   
              callback();
            }
          }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
   
        if (value === '') {
   
          callback(new Error('请输入密码'));
        } else {
   
          if (this.ruleForm.checkPass !== '') {
   
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
   
        if (value === '') {
   
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
   
          callback(new Error('两次输入密码不一致!'));
        } else {
   
          callback();
        }
      };
      return {
   
        ruleForm: {
   
          pass: '',
          checkPass: ''