利用策略模式與裝飾模式擴展JavaScript表單驗證功能

2019-11-19 17:35:16

字體：大中小

來源：轉載

供稿：網友

簡單的表單驗證

html結構

<!-- validata.html --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Validata</title></head><body> <form id="form"> <label for="username">賬號：</label><input id="username" type="text"><br> <label for="password">密碼：</label><input id="password" type="password"><br> <label for="phonenum">手機：</label><input id="phonenum" type="text"><br> <input id="submit" type="button" value="提交"> </form> <p id="warn"></p> <script src="validata.js"></script></body></html>

首先先簡單地實現以下這個功能

之后再用設計模式豐滿

// validata.jsvar form = document.getElementById('form'), warn = document.getElementById('warn');var validata = function(){ if(form.username.value === ''){ return warn.textContent = '賬號不能為空'; } if(form.password.value === ''){ return warn.textContent = '密碼不能為空'; } if(form.phonenum.value === ''){ return warn.textContent = '手機號不能為空'; } var msg = { username: form.username.value, password: form.password.value, phonenum: form.phonenum.value } //ajax('...', msg); ajax提交數據略 return warn.textContent = '用戶信息已成功提交至服務器';}form.submit.onclick = function(){ validata();}

然后分析以下代碼

validata這個函數毫無復用性可言，除此之外存在兩個問題

函數同時承擔了驗證和提交兩個職責，違背單一職責原則
驗證功能擴展性差，要想添加驗證規則就必須深入函數內部，違反開放-封閉原則

所以我們需要對此進行改進

裝飾模式重構

先來用裝飾模式解決一下函數多職責問題

方法也很簡單

改進一下AOP前置裝飾函數（Function.prototype.before）

當擴展函數（beforeFn）返回false則不執行當前函數

然后令表單驗證函數成為表單提交函數的前置裝飾

這樣提交前就會進行驗證，若驗證失敗，就不會提交數據

var form = document.getElementById('form'), warn = document.getElementById('warn');Function.prototype.before = function(beforeFn){ var self = this; return function(){ if(beforeFn.apply(this, arguments) === false)  return; return self.apply(this, arguments); }}//改進的AOP前置裝飾函數var validata = function(){ if(form.username.value === ''){ warn.textContent = '賬號不能為空'; return false; } if(form.password.value === ''){ warn.textContent = '密碼不能為空'; return false; } if(form.phonenum.value === ''){ warn.textContent = '手機號不能為空'; return false; }}var submitMsg = function(){ //將提交的功能從validata函數中提取出來 var msg = { username: form.username.value, password: form.password.value, phonenum: form.phonenum.value } //ajax('...', msg); return warn.textContent = '用戶信息已成功提交至服務器';}submitMsg = submitMsg.before(validata);//讓表單驗證函數成為表單提交函數的裝飾者form.submit.onclick = function(){ submitMsg();};

策略模式重構

下面就該解決函數缺乏彈性的問題

使用策略模式就需要有策略對象/類和環境對象/類

毫無疑問策略對象中就應該裝著校驗規則

又考慮到頁面可能不止有一個驗證表單

最好寫成工廠-類的形式

完整代碼如下

var form = document.getElementById('form'), warn = document.getElementById('warn');Function.prototype.before = function(beforeFn){ var self = this; return function(){ if(beforeFn.apply(this, arguments) === false)  return; return self.apply(this, arguments); }}var vldStrategy = { //策略對象-驗證規則 isNonEmpty: function(value, warnMsg){ //輸入不為空 if(value === '')  return warnMsg; }, isLongEnough: function(value, length, warnMsg){ //輸入足夠長 if(value.length < length)  return warnMsg; }, isShortEnough: function(value, length, warnMsg){ //輸入足夠短 if(value.length > length)  return warnMsg; }, isMobile: function(value, warnMsg){ //手機號驗證 var reg = /^1[3|5|8][0-9]{9}$/; if(!reg.test(value))  return warnMsg; }}var Validator = function(){ //環境類 this.rules = []; //數組用于存放負責驗證的函數};Validator.prototype.add = function(domNode, ruleArr){ //添加驗證規則 var self = this; for(var i = 0, rule; rule = ruleArr[i++];){ (function(rule){  var strategyArr = rule.strategy.split(':'),   warnMsg = rule.warnMsg;  self.rules.push(function(){  var tempArr = strategyArr.concat();  var ruleName = tempArr.shift();  tempArr.unshift(domNode.value);  tempArr.push(warnMsg);  return vldStrategy[ruleName].apply(domNode, tempArr);  }); })(rule); } return this;};Validator.prototype.start = function(){ //開始驗證表單 for(var i = 0, vldFn; vldFn = this.rules[i++];){ var warnMsg = vldFn(); if(warnMsg){  warn.textContent = warnMsg;  return false; } }}var vld = new Validator();vld.add(form.username, [ { strategy: 'isNonEmpty', warnMsg: '賬號不能為空' }, { strategy: 'isLongEnough:4', warnMsg: '賬號不能小于4位' }, { strategy: 'isShortEnough:20', warnMsg: '賬號不能大于20位' }]).add(form.password, [ { strategy: 'isNonEmpty', warnMsg: '密碼不能為空' }]).add(form.phonenum, [ { strategy: 'isNonEmpty', warnMsg: '手機號不能為空' }, { strategy: 'isMobile', warnMsg: '手機號格式不正確' }]);var submitMsg = function(){ var msg = { username: form.username.value, password: form.password.value, phonenum: form.phonenum.value } //ajax('...', msg); return warn.textContent = '用戶信息已成功提交至服務器';}submitMsg = submitMsg.before(vld.start.bind(vld));form.submit.onclick = function(){ submitMsg();};//這里只是模擬提交，實際應該用form.onsubmit

問題分析

總結一下易錯的地方還有我敲得時候遇到的問題

Validator.prototype.add = function(domNode, ruleArr){ var self = this; for(var i = 0, rule; rule = ruleArr[i++];){ (function(rule){  var strategyArr = rule.strategy.split(':'),   warnMsg = rule.warnMsg;  self.rules.push(function(){  var tempArr = strategyArr.concat();  var ruleName = tempArr.shift();  tempArr.unshift(domNode.value);  tempArr.push(warnMsg);  return vldStrategy[ruleName].apply(domNode, tempArr);  }); })(rule); } return this;};

在Validator原型鏈上的add函數需要注意幾個問題

首先添加IIFE立即執行函數解決閉包問題就不用多說了

函數內又嵌套了函數，導致了this被劫持，所以必須緩存this

var self = this;

最開始我沒有拷貝這個數組而是直接使用的strategyArr

Validator.prototype.add = function(domNode, ruleArr){ //添加驗證規則 var self = this; for(var i = 0, rule; rule = ruleArr[i++];){ (function(rule){  var strategyArr = rule.strategy.split(':'),   warnMsg = rule.warnMsg;  self.rules.push(function(){  // var tempArr = strategyArr.concat();  var ruleName = strategyArr.shift();  strategyArr.unshift(domNode.value);  strategyArr.push(warnMsg);  return vldStrategy[ruleName].apply(domNode, strategyArr);  }); })(rule); } return this;};

第一次提交沒有問題，但再次提交就會報錯

這是因為第一次提交后，閉包中的strategyArr已經改變

之后的提交，對這個數組進行操作就不是預期的結果了

在這個地方我犯了一個小錯誤，導致我斷點調試了好長時間 __亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb