以前一大坨写在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 } }