elementUI validator

以前一大坨写在data(){} 里 ,感受不美观。javascript

修正后。html

dataRules:{
   minInsureAmount: [{validator: this.validtor, trigger: "blur"}],
   graceDay: [{validator: this.validtor, trigger: "blur"}],
   insureAgeStart: [{validator: this.validtor, trigger: "blur"}],
   insureAgeEnd: [{validator: this.validtor, trigger: "blur"}],
}

methods:{
  validtor(rule,value,callback){
    let sign=rule.field;  //经过这个来判断当前是哪一个field在校验

    switch(sign){
     case 'minInsureAmount':
      //就同样写法了
     break;
     case 'xxx':
     //code
     break;
   }
  },
}

既然能移到methods里 ,一样的应该就能弄成全局vuex 共享校验方法。vue

methods:{
  validtor(rule,value,callback){
    this.$store.dispatch('validator',{rules,value,callback}); //把校验参数传进去
  },
}



//在store中的actions内写验证方法
let actions = {
    validator({ commit }, obj) {//这个obj就是须要的参数
        if (!obj.value) {
            obj.callback(new Error('不能为空'))
        } else if (typeof obj.value != 'number') {
            obj.callback(new Error('必须为数字'))
        } else {
            if (obj.value > 10) {
                obj.callback(new Error("不能超过10"))
            } else if (obj.value < 0) {
                obj.callback(new Error('不能为负'))
            } else {
                obj.callback()
            }
        }

       // code
    }
}
相关文章
相关标签/搜索