在Vue中因为新增属性所以表单校验不用像以往需要在各种 if 或 swith 判断,在form标签中通过 :rules 属性绑定 data 中定义的表单校验规则来进行加载,然后给各个 input 标签添加 prop 属性来绑定不同的表单校验规则名称来进行不同的规则校验
表单校验规则,以登陆举例:
1. 在 form 表单中绑定一个校验规则,并且在data中声明
2. data 中定义所需的校验规则,此处表单规则的名称需要与form标签上绑定的和属性名要一致
注:此处校验规则为对象,利用对象的属性名绑定在prop上才能使不同输入框收到不同规则约束
代码解释:
// 手机号的具体校验规则
mobile: [
{
//required 是否必传,属性值为布尔值 即true/false
required: true,
//触发校验规则的提示信息
message: '请输入手机号,此信息必须填写',
//校验触发的类型,blur为输入完成后,输入框失焦时(推荐使用)
trigger: 'blur'
},
{
//正则校验属性
pattern: /^1[3-9]\d{9}$/,
message: '手机号格式错误',
trigger: 'blur'
}
],
3. 在input 或 饿了么UI中的 el-form-item上绑定prop属性,并且属性值为字符串,与表单校验规则中的属性名一致(各个规则数组 / 对象名)
自定义表单校验:
自定义表单校验就是在data中声明一个函数,并将这个函数的校验规则添加到上述的校验规则中
注: 自定义校验规则时需要写在data中,但是需要写在 return 之前
代码注释:
//身份证校验
person: [
{ required: true, message: '必填', trigger: 'blur' },
{
//validator 自定义表单属性
//validateIdNo 自定义校验规则名称,名称可以自定义但是一定要与data中命名的函数同名
validator: validateIdNo,
//trigger 建议每次验证对象中都添加一次,保证代码的健壮性
trigger: 'blur'
}
]
自定义校验模板:
const validateIdNo = (rule, value, callback) => {
if (value) {
callback()
} else {
callback(new Error('警示信息'))
}
}
当自定义属性需求过多且需要复用时,建议分拆自定义校验模块,即新建一个文件夹,文件夹内部建立 j s 文件,内部填充所需要的自定义校验规则,然后按需导出,在需要的模块中按需导入即可