如何使用JavaScript策略模式校驗表單
Web項目中，登錄，注冊等等功能都需要表單提交，當把用戶的數據提交給后臺之前，前端一般要做一些力所能及的校驗，比如是否填寫，填寫的長度，密碼是否符合規范等等，前端校驗可以避免提交不合規范的表單。
假如我們有一個表單，校驗邏輯如下：
用戶名不為空 密碼長度不低于6位 手機號符合格式未使用策略模式的表單校驗當沒有使用策略模式時，即我們首先會想到的校驗模式通常是這樣的：
<body> <form id='registerForm'><label for='username'>輸入用戶名：<input type='text' name='username'></label><label for='password'>輸入密碼：<input type='password' name='password'></label><label for='phone'>輸入密碼：<input type='text' name='phone'></label> </form> <script>const form = document.querySelector(’.registerForm’);form.onsubmit = function(){ if(form.username.value === ’’){alert(’用戶名不能為空’)return; } if(form.password.value.length < 6){alert(’密碼長度不能小于6位’)return; } if(!/(^1[3|5|8][0-9]{9}$)/.test(form.phone.value)){alert(’手機號格式不正確’)return; }} </script></body>
這種代碼編寫方式十分常見，但它的缺點同樣很明顯：
onsubmit函數過于龐大，包含很多if-else，要覆蓋所有規則 onsubmit函數缺乏彈性，如果要進入一種新的校驗規則，就要改函數的內容實現，違反開放-閉合原則 代碼復用性較差，如果再寫一個表單，就要復制很多重復的代碼使用策略模式優化首先封裝校驗函數為一個對象：
const strategies = { empty(value, errMsg){if(value.length === 0){ return errMsg;} }, minLength(value, len, errMsg){if(value.length < len){ return errMsg;} }, isMobile(value, errMsg){if(!/(^1[3|5|8][0-9]{9}$)/.test(value)){ return errMsg;} }}
我們還要一個Validator類, 這個類用于向目標表單添加驗證規則，它的用法如下:
const validate = function(){ const validator = new Validator(); validator.add(Form.userName, ’empty’, ’用戶名不能為空’); validator.add(Form.password, ’minLength:6’, ’密碼長度不能少于6位’); validator.add(Form.phone, ’isMobile’, ’手機號碼格式不正確’); const errMsg = validator.start(); return errMsg;}
如代碼所示，validator實例有add方法，接收3個參數，第一個為需要驗證的表單實例，第二個為驗證方法，冒號后面為傳入的參數。第三個為驗證未通過的錯誤提示信息。
start方法，用于啟動校驗，如果沒通過會返回未通過的提示信息，可在之后的邏輯中進行處理
Validator類的編寫:
class Validator { constructor(){this.rules = []; } add(elem, rule, err){const args_arr = rule.split(':');this.rules.push(()=>{ const handler = args_arr.shift(); args_arr.unshift(elem.value); args_arr.push(err); return strategies[handler].apply(elem, args_arr)}) } start(){let errmsg = []for(let i = 0; i < this.rules.length; i++ ){ const err = this.rules[i](); if(err){errmsg.push(err) }}return errmsg.join(','); }}
使用策略模式，我們使用配置的方式完成了表單的校驗，這些規則可以用在以后任何校驗表單的地方，更方便修改與復用
為單一表單項增加多個驗證規則
我們的代碼現在有一個缺點，就是只能為某一個表單項賦單一驗證規則，無法實現一個表單多個驗證規則，所以代碼還有優化的空間
class Validator{ // ··· add(elem, rules){rules.forEach(rule => { const args_arr = rule.strategy.split(':'); this.rules.push(()=>{const handler = args_arr.shift();args_arr.unshift(elem.value);args_arr.push(rule.errMsg);return strategies[handler].apply(elem, args_arr) })}); } // ···}const validate = function(){ const validator = new Validator(); validator.add(Form.username,[{strategy: ’empty’,errMsg: ’用戶名不能為空’ }]); validator.add(Form.password, [{strategy: ’minLength:6’,errMsg: ’密碼長度不能少于6位’ }]); validator.add(Form.phone, [{strategy: ’isMobile’,errMsg: ’手機號碼格式不正確’ }, {strategy: ’empty’,errMsg: ’手機號不能為空’ }]); const errMsg = validator.start(); return errMsg;}
只需要傳參時傳入一個對象數組，并在add函數里面添加相應的數組處理邏輯即可
策略模式的優點優點：
避免多重條件選擇語句 實現開閉原則，使得函數的使用更加易于切換，易于理解，易于擴展。 提高代碼復用程度總結Peter Norvig說過，在函數作為一等對象的語言中，策略模式是隱形，strategy就是值為函數的變量。其實就是將封裝好的策略函數當成參數傳給使用它的target，被target調用的過程，用好策略模式，不僅讓我們對該模式有更加深刻的理解，也使我們明白使用函數的好處。
以上就是如何使用JavaScript策略模式校驗表單的詳細內容，更多關于JavaScript資料請關注好吧啦網其它相關文章！
相關文章：
網公網安備