如何利用 策略模式 優化表單驗證

背景

在作移動端項目開發的時候，常常會遇到各類表單驗證，有時候不一樣的頁面，驗證規則是同樣的 ,如圖

以前項目裏的驗證代碼寫的很凌亂，最近恰好遇到這個模塊的功能須要重構，因而對代碼作了大量的優化，記錄一下如何利用策略模式優化表單驗證的

優化前

以前咱們的驗證代碼是這樣寫的，把驗證func寫到一個公共模塊裏面，而後每一個方法返回一個包含是否經過和message字段的對象

//common.js
export default {
  validateName: function (data, message = '', flag = false) {
    if (!/xxx/.test(data)) {
      message = '驗證不經過提示語'
    } else {
      flag = true
    }
    return {
      message,
      flag
    }
  },
  validatePhone: function (data, message = '') {},
  validateAddress: function (data, message = '') {}
}

而後在業務代碼裏面引用，這種不只代碼量比較大，並且這種基礎驗證模塊和業務模塊耦合嚴重，咱們應該儘可能作到將不一樣模塊和功能代碼分離，提升代碼的可擴展性

優化後

若是驗證不經過，在基礎驗證代碼裏當即彈出msg，業務代碼只須要判斷返回的是true或者false就好了

//common.js
export default {
  validateName: function (data, msg = '') {
    if (!/xxx/.test(data)) {
      msg = '驗證不經過提示語'
    }
    msg && alert(msg)
    return !!msg
  },
  validatePhone: function (data, msg = '') {},
  validateAddress: function (data, msg = '') {}
}

這樣業務代碼看上去很簡潔

//index.js
import validate from './common.js'
const keys = Object.keys(validate)
//經過some方法，有1個驗證不經過，就跳出驗證，而後主業務代碼裏經過判斷validateResult的值，驗證是否徹底經過。
//還有dataKey須要和validateKey有必定的映射規則
const validateResult = keys.some(key => {
  return !validate[key](this.data[dataKey])
})

若是你的驗證方法包含了不少本頁面用不到的其餘驗證規則，你只需在業務代碼添加一個白名單字段

const whiteList = ['validatePhone','validateName','validateAddress']

若是你的驗證有前後順序，添加一個優先級字段

const whiteList = [{
    name:'validatePhone',
    level:1,
},{
    name:'validateName',
    level:2,
}]

以上就是我對錶單驗證規則的優化心得，有哪裏須要改進的但願你們能夠指點出來，相互交流