【21】vuex 与element iu表单校验

转：http://www.cnblogs.com/gsgs/p/6753682.html

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

})

巴特西

【21】vuex 与element iu表单校验

最新文章

热门文章