vue 中的通用表单验证
方法:
/**
* 表单验证
* - 如果是字符串,字段为空时不通过验证,弹窗提示字符串
* - 如果是对象,对象的 method 方法中的条件成立,即返回 true 时不通过验证,弹窗提示 对象.message
* - 注意:method 返回 true 时弹窗,而不是返回 true 时通过验证
*/
const formCheck = (form, rule) => {
for(let k in form){
if(!form[k] && rule[k]){
if(typeof rule[k] == 'string'){
ElMessage.warning(rule[k]);
return false;
}
if(typeof rule[k] == 'object'){
if(rule[k].method()){
ElMessage.warning(rule[k].message);
return false;
}
}
}
}
return true;
}
调用:
// 表单验证
const formCheckResult = formCheck(form, {
title: '请输入名称',
jobId: '请选择职位',
cover: '请上传封面',
jobLevelId: {
message: '请选择职级',
method: () => !form.jobLevelId && form.jobLevelId != '0'
}
})
if( !formCheckResult ) return;