徐向博 / Imin.

vue 中的通用表单验证
作者:Imin 时间:2023-05-15 分类: 前端

方法:

/**
 * 表单验证
 * - 如果是字符串,字段为空时不通过验证,弹窗提示字符串
 * - 如果是对象,对象的 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;



本文标签: vue 表单验证