<el-form ref="formRef" label-width="150px" :model="model" :rules="rules">
<el-form-item
v-for="(field, index) in formFields"
:key="index"
:label="field.subjectName"
:prop="field.name"
>
<el-input v-model="model[field.name]" />
</el-form-item>
</el-form>
data种rules
的值
model: {
name: '',
},
rules:{
name:[
{
required: true,
message: '请输入姓名',
trigger: 'blur',
},
{
validator: (rule, value, callback) => {
//在此处获取到输入值做处理
if (!/^[0-9]\d*$/.test(value)) {
callback(new Error('请输入正整数'))
} else {
callback()
}
},
trigger: 'blur',
}
]
}
这样就完成了自定义校验规则,先会校验是否空值,再校验此处的自定义规则。
当表单校验规则中都存在相同的自定义规则时,可以在mounted
生命周期中做处理为rules
批量添加规则。
const createValidator = (regex, errorMessage) => ({
validator: (rule, value, callback) => {
if (!regex.test(value)) {
callback(new Error(errorMessage));
} else {
callback();
}
},
trigger: 'blur',
});
const commonValidator = createValidator(/^\d+(\.\d+)?$/, '请输入数字');
const positiveValidator = createValidator(/^[1-9]\d*$/, '请输入正整数');
for (let key in this.rules) {
if (Array.isArray(this.rules[key])) {
this.rules[key].push(commonValidator, positiveValidator);
}
}
这样就为rules
中所有的校验规则有添加了positiveValidator
和commonValidator
两个规则。
最后触发表单校验:
btnClick(){
this.$refs['formRef'].validate(async (valid) => {
if(valid){
//这里些校验通过后的业务操作
}
})
},