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

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

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

之前我們的驗證**是這樣寫的，把驗證func寫到乙個公共模組裡面，然後每個方法返回乙個包含是否通過和message欄位的物件

export default  else 

return 
},validatephone: function (data, message = '') {},
validateaddress: function (data, message = '') {}
}

如果驗證不通過，在基礎驗證**裡立即彈出msg，業務**只需要判斷返回的是true或者false就行了

export default 

msg && alert(msg)
return !!msg
},validatephone: function (data, msg = '') {},
validateaddress: function (data, msg = '') {}
}

這樣業務**看上去很簡潔

import validate from './common.js'

const keys = object.keys(validate)
//通過some方法，有1個驗證不通過，就跳出驗證，然後主業務**裡通過判斷validateresult的值，驗證是否完全通過。
//還有datakey需要和validatekey有一定的對映規則
const validateresult = keys.some(key => )

如果你的驗證方法包含了很多本頁面用不到的其他驗證規則，你只需在業務**新增乙個白名單字段

const whitelist = ['validatephone','validatename','validateaddress']

如果你的驗證有先後順序，新增乙個優先順序字段

const whitelist = [,]

JavaScript 策略模式封裝表單驗證庫

直接上 html htmllang en head metacharset utf 8 title titletitle head body formid form p 使用者名稱 inputtype text name username p p 密碼 inputtype password name...

策略模式之封裝表單驗證

有關策略模式的簡單介紹可以檢視這篇文章 介紹 校驗策略 const validatestrategies test value isnonempty value,errmsg minlength value,length,errmsg 校驗類 function validator validator...

js 策略模式 實現表單驗證

簡單點說就是 實現目標的方式有很多種 你可以根據自己身情況選乙個方法來實現目標 所以至少有2個物件 乙個是策略類 乙個是環境類 上下文 然後自己就可以根據上下文選擇不同的策略來執行方案 策略模式的優點 1.策略模式利用組合 委託和多型等技術和思想，可以有效地避免多重條件選擇語句 2.策略模式提供了對...