VUE_表单验证

话不多说，先上代码

<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
    <el-form-item label="身份证号" prop="iDCard" :rules="[{ required: true, validator: idCardValidator, trigger: 'blur' }]">
        <el-input v-model="ruleForm.iDCard" placeholder="请输入身份证号" maxlength="32" show-word-limit clearable />
    </el-form-item>
</el-col>

// 身份证号校验
const idCardValidator = (_rule: any, value: any, callback: any) => {
	// 身份证号格式
	let idCardFormat = verifyIdCard(ruleForm.value.idCard);
	let today = new Date();
	if (idCardFormat) {
		// 根据身份证号得到生日（索引从0开始）
		let birthdayStr = ruleForm.value.idCard.substring(6, 14);
		// 转为Date类型
		let birthdayDate = new Date(
			birthdayStr.substring(0, 4), // 年
			birthdayStr.substring(4, 6) - 1, // 月（vue的月份是从0开始，代表1月份）
			birthdayStr.substring(6, 8) // 日
		);
		// 赋值给表单，Date有时差，需要转换下
		ruleForm.value.birthday = formatDate(birthdayDate, 'YYYY-mm-dd');
		// 虚岁
		var age = today.getFullYear() - birthdayDate.getFullYear();
		// 今年他应该什么时候生日
		let thisYearBirthday = new Date(today.getFullYear(), parseInt(birthdayStr.substring(4, 6)) - 1, birthdayStr.substring(6, 8));
		// 如果现在还没到他生日，那么将 虚岁-1 得到真实年纪
		let isBirthday = today > thisYearBirthday;
		if (isBirthday) {
			age--;
		}
		// 赋值
		ruleForm.value.age = age;
		// 身份证最后一位可以被2整除，则为女性，不能整除为男性。X为10
		let sexStr = ruleForm.value.idCard.substring(17);
		if (sexStr == 'X') {
			ruleForm.value.sex = '101'; // 女
		} else if (parseInt(sexStr) % 2 == 0) {
			ruleForm.value.sex = '101'; // 女
		} else if (parseInt(sexStr) % 2 == 1) {
			ruleForm.value.sex = '100'; // 男
		} else {
			callback(new Error('身份证格式有误，请重新输入！'));
		}
		callback();
	} else {
		callback(new Error('身份证格式有误，请重新输入！'));
	}
};

大家可以不用管里面的逻辑是什么。我是想谈谈 idCardValidator 函数中那三个参数

_rule：这个主要是包含一些验证规则。比如是否启用验证required，验证内容的数据类型type。验证的字段field等。

value：这个是当前的输入值。需要注意的是，这个值是初始值，而不是当前用户输入的值。主要是为了避免用户修改字段就触发验证。所以当你新增一条数据又要修改时可能会出现undefined的情况。

callback：这是个回调函数，主要将验证的结果返回过去。

主要是想让大家注意一下 value 这个参数。因为由于它存储初始值的特性把我坑了一把。

谢谢大家。