JS表單驗(yàn)證插件之?dāng)?shù)據(jù)與邏輯分離操作實(shí)例分析【策略模式】
本文實(shí)例講述了JS表單驗(yàn)證插件之?dāng)?shù)據(jù)與邏輯分離操作。分享給大家供大家參考,具體如下:
之前已經(jīng)寫過(guò)一個(gè)表單驗(yàn)證插件了,為什么還會(huì)重復(fù)造輪子呢?第一個(gè)問(wèn)題是代碼結(jié)構(gòu)比較亂,雖然通過(guò)原型繼承的寫法將處理分層,但業(yè)務(wù)邏輯和數(shù)據(jù)結(jié)構(gòu)混雜在一起,導(dǎo)致第二個(gè)問(wèn)題——可擴(kuò)展性和靈活性差。
認(rèn)真分析表單驗(yàn)證的過(guò)程,可以分為兩步:怎么驗(yàn)證和如何驗(yàn)證。怎么驗(yàn)證是數(shù)據(jù)層面的問(wèn)題,如何驗(yàn)證是業(yè)務(wù)邏輯層面的問(wèn)題。
點(diǎn)擊:這里 查看源碼
策略模式將對(duì)象和規(guī)則區(qū)分
如何讓算法(數(shù)據(jù)層)和對(duì)象(邏輯層)分開來(lái),使得算法可以獨(dú)立于使用它的客戶而變化?這里引入策略模式。
什么是策略模式
定義一系列的算法,把每一個(gè)算法封裝起來(lái), 并且使它們可相互替換。本模式使得算法可獨(dú)立于使用它的客戶而變化。
即:策略模式把對(duì)象本身和運(yùn)算規(guī)則區(qū)分開來(lái),其功能非常強(qiáng)大,因?yàn)檫@個(gè)設(shè)計(jì)模式本身的核心思想就是面向?qū)ο缶幊痰亩嘈涡缘乃枷搿?/p>
關(guān)于策略模式的更多定義,參見
下面我們就開始運(yùn)用策略模式來(lái)解決代碼分層問(wèn)題。
理想中的插件調(diào)用
在開始代碼之前,我們希望用更簡(jiǎn)單的方式調(diào)用插件。
// 獲取表單form元素 var form = document.getElementById('myForm'); // 創(chuàng)建表單校驗(yàn)實(shí)例 var validation = new FormValidator(); // 編寫校驗(yàn)配置 validation.add(form.username, 'isEmpty', '用戶名不能為空s'); validation.add(form.password, 'minLength: 6', '密碼長(zhǎng)度不能小于6個(gè)字符'); validation.add(form.password2, 'isEqualTo: password', '密碼不一致'); validation.add(form.mobile, 'isMobile', '請(qǐng)?zhí)顚懻_的手機(jī)號(hào)'); // 開始校驗(yàn),并接收錯(cuò)誤信息 $('#submit-btn').click(function() { var errorMsg = validation.start(); // 如果有錯(cuò)誤信息輸出,說(shuō)明校驗(yàn)未通過(guò) if(errorMsg){ console.log(errorMsg); return false; } })
add()方法參數(shù)說(shuō)明
1、 參數(shù)1:需要驗(yàn)證的表單項(xiàng)DOM元素,form[name屬性]
2、 參數(shù)2:驗(yàn)證方法,用冒號(hào)分割,冒號(hào)后的值為方法的參數(shù)(可選)
3、 參數(shù)3:錯(cuò)誤提示信息
編寫驗(yàn)證函數(shù)
我們開始運(yùn)用策略模式編寫代碼。第一步,只編寫無(wú)關(guān)業(yè)務(wù)邏輯的驗(yàn)證函數(shù)算法,即數(shù)據(jù)層
var VerifyPolicies = { isEmpty: function(value, errMsg) { if(value == '') return errMsg; }, // 最小長(zhǎng)度 minLength: function(value, length, errMsg) { if (value.length < length) return errMsg; }, // 手機(jī)號(hào)碼 isMobile: function(value, errMsg) { if(!/^1[34578]\d{9}$/.test(value)) return errMsg; }, // 是否相等 isEqualTo: function (value, toDom, errMsg) { var toValue = document.getElementById(toDom).value; if(value !== toValue) return errMsg; } };
編寫驗(yàn)證邏輯
function FormValidator(VerifyPolicy) { this.verifyPolicies = VerifyPolicy ? VerifyPolicy : VerifyPolicies; // 待執(zhí)行的驗(yàn)證函數(shù)數(shù)組 this.validateFn = []; } FormValidator.prototype.add = function(dom, rules, errMsg) { var _this = this; this.validateFn.push(function() { var args = []; var rule = rules.split(':'); var ruleName = rule[0]; var ruleParam = rule[1]; var value = dom.value; args.push(value); if(ruleParam) args.push(ruleParam.trim()); args.push(errMsg); // 這里調(diào)用apply只是為了傳參,如果支持ES6,也可以這樣做: // return _this.verifyPolicies[ruleName](...args) return _this.verifyPolicies[ruleName].apply(null, args); }) }; FormValidator.prototype.start = function() { var fn = this.validateFn; for(var i =0, len = fn.length; ; i++) { var msg = fn[i](); if(msg) return msg; } };
至此,整個(gè)表單驗(yàn)證已經(jīng)初步完成,在此方法之上,可以隨意添加方法了。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
Ajax高級(jí)筆記 JavaScript高級(jí)程序設(shè)計(jì)筆記
這篇文章主要介紹了Ajax高級(jí)筆記 JavaScript高級(jí)程序設(shè)計(jì)筆記,需要的朋友可以參考下2017-06-06javascript正則表達(dá)式中的replace方法詳解
replace方法的語(yǔ)法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string),reExp可以是正則表達(dá)式對(duì)象(RegExp)也可以是字符串(string),replaceText是替代查找到的字符串。。2015-04-04JS實(shí)現(xiàn)響應(yīng)鼠標(biāo)點(diǎn)擊動(dòng)畫漸變彈出層效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)響應(yīng)鼠標(biāo)點(diǎn)擊動(dòng)畫漸變彈出層效果代碼,具有非常自然流暢的動(dòng)畫過(guò)度效果,涉及JavaScript針對(duì)鼠標(biāo)事件的響應(yīng)及頁(yè)面元素樣式的動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-03-03JavaScript實(shí)現(xiàn)表格點(diǎn)擊排序的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)表格點(diǎn)擊排序的方法,可實(shí)現(xiàn)點(diǎn)擊頂部數(shù)據(jù)項(xiàng)標(biāo)題實(shí)現(xiàn)對(duì)應(yīng)數(shù)據(jù)列的排序效果,涉及javascript鼠標(biāo)事件及數(shù)據(jù)排序的技巧,需要的朋友可以參考下2015-05-05js實(shí)現(xiàn)類選擇器和name屬性選擇器的示例步驟
這篇文章主要介紹了js實(shí)現(xiàn)類選擇器和name屬性選擇器的示例步驟,幫助大家更好的理解和使用js,感興趣的朋友可以了解下2021-02-02