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

zhouchao102發表於2020-02-27
模式優化

背景

在做移動端專案開發的時候，經常會遇到各種表單驗證，有時候不同的頁面，驗證規則是一樣的 ,如圖

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

之前專案裡的驗證程式碼寫的很凌亂，最近剛好遇到這個模組的功能需要重構，於是對程式碼做了大量的優化，記錄一下如何利用策略模式優化表單驗證的

優化前

之前我們的驗證程式碼是這樣寫的，把驗證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,
}]
複製程式碼

以上就是我對錶單驗證規則的優化心得，有哪裡需要改進的希望大家可以指點出來，相互交流

相關文章