element-ui+vuex共享自定義方法進行表單驗證 validator

element-ui的官網上寫的自定義表單驗證，方法都是寫在單vue文件中的，不容易共享。怎么使用vuex將方法共享出來，各個組件都能用呢？

如下是一個驗證age的數據，

rules:{

　　age:[{required:true,trigger:'blur',validator:checkAge}]

}

required：true  指提示必須要填，也就是input那個紅色星星，必填的標志，對數據是不影響的。

trigger：‘blur’，當失去焦點就進行一次驗證。

validator：checkAge  我這兒我定義了一個checkAge函數，寫在data中return的前面。這個其實只是個傳參函數

 

思路：當失去焦點，會使validator驗證會調用一次checkAge函數。並且會給checkAge默認傳參數，checkAge(rules,value,callback){}，value是input框中的內容，callback是回調函數。這3個參數是關鍵，必須要傳給vuex store中的驗證函數。

這兒要提醒一點：store中傳過來的共享方法，並不是實實在在的方法，不管是map或者dispatck出來的，都不是原始方法，也就是說，不能如下這么干：

methods:map['checkAge'],
mounted(){
　　this.rules.age[0].validator=this.checkAge //這樣出錯，這個checkAge不是正常的方法，被包裝過。如果是state數據是可以直接這樣干的。
}

因此，寫一個轉換函數：

data(){
　　let checkAge=(rules,value,callback)=>{　//轉換函數，主要目的是傳給store內方法的參數。
　　　　this.$store.dispatch('checkAge',{rules,value,callback})//這兒的checkAge是寫在store中的，vuex規定參數必須傳對象。
　　}
　　return {
　　　　rules:{
　　　　　　age:[{required:true,trigger:'blur',validator:checkAge}]//主要格式是標准json。
　　　　}，
　　　　msg：{
　　　　　　age:''
　　　　}
　　}
}

剩下的只需要在store中的actions內寫上驗證方法就行了。

//store中寫：
let actions = {
    checkAge({ commit }, obj) {//這個obj就是需要的參數，這個blur事件經過validator包裝后的參數。隨后的就跟官網上的一樣了，隨意寫。
        if (!obj.value) {
            obj.cb(new Error('年齡不能為空'))
        } else if (typeof obj.value != 'number') {
            obj.cb(new Error('年齡必須為數字'))
        } else {
            if (obj.value > 100) {
                obj.cb(new Error("年齡要打破記錄了"))
            } else if (obj.value < 0) {
                obj.cb(new Error('年齡小了點，無法接受'))
            } else {
                obj.cb()
            }
        }
        commit('dd')
    }
}
let mutations={
　　dd(){}
}

export default new Vuex.Store({

　　actions,

　　mutations

})