前端表单身份证验证

前端会经常遇到表单身份证验证问题，在此我记录一下我自己用的验证方式

一、创建文件idCard.js

文件下载在头部

二、main.js引入

// 引入身份证号
import IdCard from "./utils/idCard.js";
Vue.prototype.IdCardRole = IdCard;

三、页面使用验证

 <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入手机号码" />
              </el-form-item>
            
              <el-form-item label="身份证号" prop="idCard">
                <el-input v-model="form.idCard" placeholder="请输入身份证号" />
              </el-form-item>
            

        </el-form>

  export default {
   
    data() {
      let IdCard = (rule, value, callback) => {
        if (!this.IdCardRole.cnid(value)) 
          return callback(new Error("请输入正确的身份证号"));
        return callback();
      };
      return {
       
        // 表单参数
        form: {
       		 phone:null,
       		 idCard:null,
        },
        // 表单校验
        rules: {
        //之前手机号第二位不含2，后来发现已经存在了
          phone: [
            { required: true, message: "手机号码不能为空", trigger: "blur" },
            {
              pattern: /^1[2|3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: "请输入正确的手机号码",
              trigger: "blur",
            },
          ], idCard: [
            { required: true, message: "身份证号不能为空", trigger: "blur" },
            { validator: IdCard, trigger: "blur" },
          ],
        }
      };
    },
   
  
      
  };

四、效果

文件有需要的可私信，可能回复慢，勿怪