vue 身份证格式校验

1、在vue中，经常会在表单中遇到身份证格式校验，首先想到使用表单校验的方式来处理，首先创建身份证输入框

<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="身份证号" prop="idCardNumber">
            <el-input v-model="form.idCardNumber" placeholder="请输入身份证号码" />
        </el-form-item>
	</el-form>
</el-dialog>

2、定义身份证校验方法,在rules中调用。

export default {
	name:'',
	components: {
	},
	data() {
	//身份证校验
	const isCnNewID = (rule, value, callback) => {
           var arrExp = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];//加权因子
           var arrValid = [1, 0, "X", 9, 8, 7, 6, 5, 4, 3, 2];//校验码
           if (/^\d{17}\d|x$/i.test(value)) {
               var sum = 0, idx;
               for (var i = 0; i < value.length - 1; i++) {
                   // 对前17位数字与权值乘积求和
                   sum += parseInt(value.substr(i, 1), 10) * arrExp[i];
               }
               // 计算模（固定算法）
               idx = sum % 11;
               // 检验第18为是否与校验码相等
               if (arrValid[idx] == value.substr(17, 1).toUpperCase()) {
                   callback()
               } else {
                   callback("身份证格式有误")
               }
           } else {
               callback("身份证格式有误")
           }
    }
	return {
		title:'',
		open:false,
		form:{},
		//表单校验
		rules: {
			idCardNumber: [
				{ required: true, message: "身份证不能为空", trigger: "blur" },
				{	//调用上面定义的方法校验格式是否正确
                   validator: isCnNewID,trigger: "blur"
                }
			]
		}
	}
}