背景
在做移動端項目開發(fā)的時候帽撑，經(jīng)常會遇到各種表單驗證欲鹏，有時候不同的頁面肠槽，驗證規(guī)則是一樣的 ,如圖
image
之前項目里的驗證代碼寫的很凌亂邢羔，最近剛好遇到這個模塊的功能需要重構芳肌，于是對代碼做了大量的優(yōu)化朱监，記錄一下如何利用策略模式優(yōu)化表單驗證的
優(yōu)化前
之前我們的驗證代碼是這樣寫的庵楷，把驗證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 = '') {}
}
然后在業(yè)務代碼里面引用百姓，這種不僅代碼量比較大渊额，而且這種基礎驗證模塊和業(yè)務模塊耦合嚴重，我們應該盡量做到將不同模塊和功能代碼分離垒拢，提高代碼的可擴展性
優(yōu)化后
如果驗證不通過旬迹，在基礎驗證代碼里立即彈出msg，業(yè)務代碼只需要判斷返回的是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 = '') {}
}
這樣業(yè)務代碼看上去很簡潔
//index.js
import validate from './common.js'
const keys = Object.keys(validate)
//通過some方法求类，有1個驗證不通過奔垦，就跳出驗證，然后主業(yè)務代碼里通過判斷validateResult的值仑嗅，驗證是否完全通過宴倍。
//還有dataKey需要和validateKey有一定的映射規(guī)則
const validateResult = keys.some(key => {
return !validate[key](this.data[dataKey])
})
如果你的驗證方法包含了很多本頁面用不到的其他驗證規(guī)則张症，你只需在業(yè)務代碼添加一個白名單字段
const whiteList = ['validatePhone','validateName','validateAddress']
如果你的驗證有先后順序，添加一個優(yōu)先級字段
const whiteList = [{
name:'validatePhone',
level:1,
},{
name:'validateName',
level:2,
}]
以上就是我對表單驗證規(guī)則的優(yōu)化心得鸵贬，有哪里需要改進的希望大家可以指點出來俗他，相互交流
