vue ElementUI表单使用rules校验中的validate

最新推荐文章于 2024-04-18 18:29:58 发布

原创最新推荐文章于 2024-04-18 18:29:58 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍两种Vue表单验证方法：一种是在Vue实例内部定义验证逻辑，可以访问组件内的所有属性，适用于复杂验证场景；另一种是将验证逻辑独立到外部JS文件，使代码结构更清晰，但只能获取待验证的值。

data(){
//方法1：value - 是要验证的值，这种方法的好处是不仅可以获取到value，还可以获取到该vue页面中的其
//他变量，如果验证需要结合其他变量，比如id。
let isUniqueName = (rule, value, callback) =>{
    getUniqueNameMethod(value).then(reponse => {//后台验证方法，根据返回的值进行判断
        let isError = true;
        if(isError ){
         callback(new Error("要显示的提示信息"));
        }else {
           callback();     
        }
    })
}
    return {
        rules:{
            name:[
                {required:true, message:"名称不可为空",trigger:"blur"},
                {validator: isUniqueName, trigger:'blur'}
            ]   
        }
    }
}

方法二：添加一个validate.js（名字随意）

//这种将方法单独放到一个js中，结构比较清楚，但是这种方式仅能获取到value，其他参数获取不到。如果需
//要结合其他参数进行验证的，推荐使用第一种
export function isUniqueName(rule, value,callback){
  getUniqueNameMethod(value).then(response =>{
    let isError = true;
    if(isError){
      callback(new Error("需要显示的信息"));
    }else {
      callback();
    }
  });

}