基於ElementUI+vuex實現表單驗證共享(5.6儘快補充說明)

時間 2020-01-04

標籤基於 elementui+vuex elementui vuex 實現表單驗證共享 5.6 儘快補充說明欄目 HTML 简体版

原文原文鏈接

項目背景介紹

項目基於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是一個更好的選擇。

解決方案步驟（附解釋）

前面提到，咱們但願能有一個倉庫，能夠存放驗證的方法，能讓其餘組件按需提取。Vuex就是在一個項目中，提供惟一的管理數據源的倉庫。我把它理解爲在data中的屬性須要共享給其餘vue組件使用的部分，就叫作狀態。簡單的說就是data中須要共用的屬性。

一、第一步

利用npm包管理工具，進行安裝 vuex。在控制命令行中輸入命令:cnpm install vuex --S

二、第二步

在項目的src文件夾下，新建一個vuex文件夾，並在文件夾下新建store.js文件，文件中

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

三、第三步

使用咱們vuex，引入以後用Vue.use進行引用：Vue.use(Vuex);

四、第四步

在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 }
    });

五、第五步

這一步就是關鍵，如何在咱們的倉庫中放入共享的驗證的方法。在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{
            ...
        }
    }