elementUI validator

以前一大坨寫在data(){} 裏 ，感受不美觀。

修正後。

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 共享校驗方法。

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
    }
}