基于ElementUI+vuex实现表单验证共享(5.6尽快补充说明)

项目背景介绍

项目基于vue+elementUI，为一个后台管理系统。项目中涉及到很多关于表单的验证，前期为了敢项目进度，没有对该后台系统的表单验证做一个统一。所以前期的解决方案：

• elementUI中 form组件自带的验证方法

    把验证方法添加到每个需要的组件的data属性，
    根据elementUI，form验证的说明，方法不写在data的return语句中。
    export default {
        data() {
             // checkName 是其中的一个验证方法
            let checkName = (rule, value, callback ) => {
                if( !value ) {
                    callback( new Error('套餐名称不能为空'))
                }   
                let reg = /^[^]{1,20}$/;
                if( !reg.test( value ) ){
                    callback(new Error('名称长度为1~20'));
                }else{
                     callback()
                }
            };
             ...
            return{
                ....
                ruleForm: {
                    name: '',
                       ...
                },
                // 把需要验证的字段发在rule中，这里看参考elementUI的官方文档
                rules: {
                    name: [
                        { validator: checkName, trigger: 'blur' }，
                        ...
                    ],
                    ...
            }
          
          这里贴上静态部分代码
          :model ref :rules这里绑定的变量需要注意
          <el-form :model="ruleForm" ref="ruleForm" label-width="145px" :rules="rules" status-icon>
                <el-form-item label="套餐名称(必填)" prop="name" >
                    <el-input  v-model="ruleForm.name"></el-input>
                </el-form-item>
           </el-form>

项目到后期时，你会发现，许多需要验证的字段都是相同的。在每个组件中，都需要写上这些，自然而然会觉得有更好的想法。比如是否可以把这些验证的方法都拿出来，放在一个单独的仓库里，可供其他组件按需提取。刚开始想到的是采用封装，但是看了一篇文章后，发现vuex是一个更好的选择。

相关依赖介绍

1、elementUI组件

• 一个基于vue开发的UI组件，起封装的组件带有需要便捷的功能

2、vuex

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

以下的解决方案的步骤中会谈到相关的原理，因为对vuex也是刚了解接触，后期项目中涉及到时再写其他文章进行对于点的总结。

解决方案步骤（附解释）

前面提到，我们希望能有一个仓库，可以存放验证的方法，能让其他组件按需提取。Vuex就是在一个项目中，提供唯一的管理数据源的仓库。我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。

1、第一步

• 利用npm包管理工具，进行安装 vuex。在控制命令行中输入命令:cnpm install vuex --S

2、第二步

• 在项目的src文件夹下，新建一个vuex文件夹，并在文件夹下新建store.js文件，文件中

    import Vue from 'vue';
    import Vuex from 'vuex';

3、第三步

• 使用我们vuex，引入之后用Vue.use进行引用：Vue.use(Vuex);

4、第四步

• 在mian.js中还还需要引入vuex和文件store。同时。需要在全局组件中添加store选项，这样，通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。

    import Vuex from 'vuex'
    import store from './vuex/store'
    
    Vue.use(Vuex);
    new Vue({
      el: '#app',
      router,
      store,
      template: '<App/>',
      components: { App }
    });

5、第五步

• 这一步就是关键，如何在我们的仓库中放入共享的验证的方法。在src/vuex/store.js文件中

    let actions = {
        checkPrice({ commit }, obj ){
            if( !obj.value ){
                obj.callback(new Error('金额不能为空'));
            }
            setTimeout(() => {
                if ( !Number(obj.value) ) {
                    obj.callback(new Error('请输入数字值'));
                    let reg  = /^\d+(?:\.\d{2})?$/;
                } else {
                    let reg  = /^\d+(?:\.\d{2})?$/;
                    if (obj.value < 0) {
                        obj.callback(new Error('价格必须大于0'));
                    }else if( obj.value > 99999999 ) {
                        obj.callback(new Error('价格必须小于99999999'));
                    }else if( !reg.test( obj.value ) ) {
                        obj.callback(new Error('仅保留2位小数点'));
                    }
                    else {
                        obj.callback();
                    }
                }
            }, 1000);

            commit('dd')
        }

        // commit('dd')
    };
    let mutations = {
        dd(){}
    }
    
    export default new Vuex.Store({
    　　actions,
    　　mutations
    })

第六步

• 共享的方法完成后，接下来就是在组件中如何引用

    export default {
        data() {
            let checkPrice = (rules,value,callback )=>{　
        　　　　this.$store.dispatch('checkPrice',{rules,value,callback})
        　　};
        ...
        return{
            ...
        }
    }