如何使用JavaScript策略模式校驗(yàn)表單
Web項(xiàng)目中，登錄，注冊(cè)等等功能都需要表單提交，當(dāng)把用戶的數(shù)據(jù)提交給后臺(tái)之前，前端一般要做一些力所能及的校驗(yàn)，比如是否填寫，填寫的長(zhǎng)度，密碼是否符合規(guī)范等等，前端校驗(yàn)可以避免提交不合規(guī)范的表單。
假如我們有一個(gè)表單，校驗(yàn)邏輯如下：
用戶名不為空 密碼長(zhǎng)度不低于6位 手機(jī)號(hào)符合格式未使用策略模式的表單校驗(yàn)當(dāng)沒(méi)有使用策略模式時(shí)，即我們首先會(huì)想到的校驗(yàn)?zāi)Ｊ酵ǔＪ沁@樣的：
<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(’密碼長(zhǎng)度不能小于6位’)return; } if(!/(^1[3|5|8][0-9]{9}$)/.test(form.phone.value)){alert(’手機(jī)號(hào)格式不正確’)return; }} </script></body>
這種代碼編寫方式十分常見(jiàn)，但它的缺點(diǎn)同樣很明顯：
onsubmit函數(shù)過(guò)于龐大，包含很多if-else，要覆蓋所有規(guī)則 onsubmit函數(shù)缺乏彈性，如果要進(jìn)入一種新的校驗(yàn)規(guī)則，就要改函數(shù)的內(nèi)容實(shí)現(xiàn)，違反開(kāi)放-閉合原則 代碼復(fù)用性較差，如果再寫一個(gè)表單，就要復(fù)制很多重復(fù)的代碼使用策略模式優(yōu)化首先封裝校驗(yàn)函數(shù)為一個(gè)對(duì)象：
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;} }}
我們還要一個(gè)Validator類, 這個(gè)類用于向目標(biāo)表單添加驗(yàn)證規(guī)則，它的用法如下:
const validate = function(){ const validator = new Validator(); validator.add(Form.userName, ’empty’, ’用戶名不能為空’); validator.add(Form.password, ’minLength:6’, ’密碼長(zhǎng)度不能少于6位’); validator.add(Form.phone, ’isMobile’, ’手機(jī)號(hào)碼格式不正確’); const errMsg = validator.start(); return errMsg;}
如代碼所示，validator實(shí)例有add方法，接收3個(gè)參數(shù)，第一個(gè)為需要驗(yàn)證的表單實(shí)例，第二個(gè)為驗(yàn)證方法，冒號(hào)后面為傳入的參數(shù)。第三個(gè)為驗(yàn)證未通過(guò)的錯(cuò)誤提示信息。
start方法，用于啟動(dòng)校驗(yàn)，如果沒(méi)通過(guò)會(huì)返回未通過(guò)的提示信息，可在之后的邏輯中進(jìn)行處理
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(','); }}
使用策略模式，我們使用配置的方式完成了表單的校驗(yàn)，這些規(guī)則可以用在以后任何校驗(yàn)表單的地方，更方便修改與復(fù)用
為單一表單項(xiàng)增加多個(gè)驗(yàn)證規(guī)則
我們的代碼現(xiàn)在有一個(gè)缺點(diǎn)，就是只能為某一個(gè)表單項(xiàng)賦單一驗(yàn)證規(guī)則，無(wú)法實(shí)現(xiàn)一個(gè)表單多個(gè)驗(yàn)證規(guī)則，所以代碼還有優(yōu)化的空間
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: ’密碼長(zhǎng)度不能少于6位’ }]); validator.add(Form.phone, [{strategy: ’isMobile’,errMsg: ’手機(jī)號(hào)碼格式不正確’ }, {strategy: ’empty’,errMsg: ’手機(jī)號(hào)不能為空’ }]); const errMsg = validator.start(); return errMsg;}
只需要傳參時(shí)傳入一個(gè)對(duì)象數(shù)組，并在add函數(shù)里面添加相應(yīng)的數(shù)組處理邏輯即可
策略模式的優(yōu)點(diǎn)優(yōu)點(diǎn)：
避免多重條件選擇語(yǔ)句 實(shí)現(xiàn)開(kāi)閉原則，使得函數(shù)的使用更加易于切換，易于理解，易于擴(kuò)展。 提高代碼復(fù)用程度總結(jié)Peter Norvig說(shuō)過(guò)，在函數(shù)作為一等對(duì)象的語(yǔ)言中，策略模式是隱形，strategy就是值為函數(shù)的變量。其實(shí)就是將封裝好的策略函數(shù)當(dāng)成參數(shù)傳給使用它的target，被target調(diào)用的過(guò)程，用好策略模式，不僅讓我們對(duì)該模式有更加深刻的理解，也使我們明白使用函數(shù)的好處。
以上就是如何使用JavaScript策略模式校驗(yàn)表單的詳細(xì)內(nèi)容，更多關(guān)于JavaScript資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. asp在iis7報(bào)錯(cuò)行號(hào)不準(zhǔn)問(wèn)題的解決方法2. 三個(gè)不常見(jiàn)的 HTML5 實(shí)用新特性簡(jiǎn)介3. ASP中解決“對(duì)象關(guān)閉時(shí),不允許操作。”的詭異問(wèn)題……4. 原生js XMLhttprequest請(qǐng)求onreadystatechange執(zhí)行兩次的解決5. 刪除docker里建立容器的操作方法6. CSS代碼檢查工具stylelint的使用方法詳解7. msxml3.dll 錯(cuò)誤 800c0019 系統(tǒng)錯(cuò)誤:-2146697191解決方法8. jsp實(shí)現(xiàn)簡(jiǎn)單用戶7天內(nèi)免登錄9. CSS3實(shí)現(xiàn)動(dòng)態(tài)翻牌效果 仿百度貼吧3D翻牌一次動(dòng)畫特效10. 匹配模式 - XSL教程 - 4
網(wǎng)公網(wǎng)安備