【vue外掛篇】vue-form-check 表單驗證

##vue-form-check （基於vue的表單驗證）

安裝

// 安裝
npm i vue-form-check -S

複製程式碼

引用

// 引用(eg. 在工程的main.js下)
import vueFormCheck from 'vue-form-check'
Vue.use(vueFormCheck)
複製程式碼

呼叫

this.$checkForm(current, config)
@params
current 是當前校驗物件
config  是校驗規則物件

config.alias     別名
config.type      配置項資料型別
config.required  是否必填、非空驗證
    常用不同型別初始化為空條件
    1、number 型別: Infinity, -Infinity
    2、array 型別: []
    3、string 型別: ''
    4、object 型別: {}
    5、function 型別: new Function()

    // null 和 undefined 賦值之後就不是相應的型別，會不通過，不可用
    6、undefined 型別: undefined
    7、null 型別: null
    // 特殊情況，可通過將 boolean, regexp 轉換為 string 型別進行驗證
    8、boolean 型別: 初始化預設為false，無法觸發非空檢驗
    9、regexp 型別: 初始化預設為/(?:)/，無法觸發非空檢驗

config.rule      正則校驗
config.depend    先決條件（省事可以在callback裡直接判斷，推薦寫，true校驗本項；false不校驗本項）
config.callback  靈活校驗（rule同時出現，只處理callback，引數是當前值，true校驗通過；false校驗不通過）

@return object 物件
不通過的話    {alias: '電話', type: 'rule'}   alias是配置的別名，type可以是['type'|'required'|'rule']
校驗通過的話  {} 空物件

ps. 驗證表單可以寫在mixin裡，這裡簡單處理直接寫在元件裡了
複製程式碼

Component

// 使用例子
new Vue({
  data() {
    return {
      params: {
        id: '1234',
        person: {
            name: 'jackie',
            age: '27',
            phone: '18266666666',
            home: ['羅湖區田心村']
        }
      }
    }
  },
  methods: {
    submit() {
      //...
      console.log('submit success');
    },
    check() {
      let obj = this.$checkForm(this.params, {
            id: {
              alias: 'id',
              type: 'string'
            },
            // 必填校驗
            'person.name': {
                alias: '學校',
                type: 'string',
                required: true
            },
            // 正則校驗
            'person.phone': {
                alias: '電話',
                type: 'string',
                rule: /^1[345678][0-9]{9}$/
            },
            // 靈活校驗，如數值、日期區間驗證
            'person.age': {
                alias: '年齡',
                callback(value) {
                    if (value < 30 && value > 18) {
                        return true;
                    }
                    return false;
                }
            },
            // 先決校驗，如果電話等於以下，校驗地址資訊
            'person.home': {
                alias: '方向',
                type: 'array',
                required: true,
                depend() {
                    if (this.params.person.phone === '18210517463') {
                      return true;
                    }
                    return false;
                }
          }
        });
        const length = Object.keys(obj).length;
        if (length === 0) {
            return this.submit();
        }
        switch (obj.type) {
            case 'type':
                this.$alert(`${obj.alias}的型別定義錯誤`, '提示');
                break;
            case 'required':
                this.$alert(`${obj.alias}是必填項`, '提示');
                break;
            case 'rule':
                this.$alert(`${obj.alias}的輸入不符合規範`, '提示');
                break;
            default:
                break;
        }
    }
  }
});
複製程式碼