JS表單驗證插件之數據與邏輯分離操作實例分析【策略模式】

本文實例講述了JS表單驗證插件之數據與邏輯分離操作。分享給大家供大家參考，具體如下：
之前已經寫過一個表單驗證插件了，為什麼還會重複造輪子呢？第一個問題是代碼結構比較亂，雖然通過原型繼承的寫法將處理分層，但業務邏輯和數據結構混雜在一起，導致第二個問題――可擴展性和靈活性差。
認真分析表單驗證的過程，可以分為兩步：怎麼驗證和如何驗證。怎麼驗證是數據層面的問題，如何驗證是業務邏輯層面的問題。
點擊：這裡 查看源碼
策略模式將對象和規則區分
如何讓算法（數據層）和對象（邏輯層）分開來，使得算法可以獨立於使用它的客戶而變化？這裡引入策略模式。
什麼是策略模式
定義一系列的算法,把每一個算法封裝起來, 並且使它們可相互替換。本模式使得算法可獨立於使用它的客戶而變化。
即：策略模式把對象本身和運算規則區分開來，其功能非常強大，因為這個設計模式本身的核心思想就是面向對象編程的多形性的思想。
關於策略模式的更多定義，參見
下面我們就開始運用策略模式來解決代碼分層問題。
理想中的插件調用
在開始代碼之前，我們希望用更簡單的方式調用插件。
// 獲取表單form元素 var form = document.getElementById('myForm'); // 創建表單校驗實例 var validation = new FormValidator(); // 編寫校驗配置 validation.add(form.username, 'isEmpty', '用戶名不能為空s'); validation.add(form.password, 'minLength: 6', '密碼長度不能小於6個字符'); validation.add(form.password2, 'isEqualTo: password', '密碼不一致'); validation.add(form.mobile, 'isMobile', '請填寫正確的手機號'); // 開始校驗，並接收錯誤信息 $('#submit-btn').click(function() { var errorMsg = validation.start(); // 如果有錯誤信息輸出，說明校驗未通過 if(errorMsg){ console.log(errorMsg); return false; } })
add()方法參數說明
1、 參數1：需要驗證的表單項DOM元素，form[name屬性]
2、 參數2：驗證方法，用冒號分割，冒號後的值為方法的參數（可選）
3、 參數3：錯誤提示信息
編寫驗證函數
我們開始運用策略模式編寫代碼。第一步，只編寫無關業務邏輯的驗證函數算法，即數據層
var VerifyPolicies = { isEmpty: function(value, errMsg) { if(value == '') return errMsg; }, // 最小長度 minLength: function(value, length, errMsg) { if (value.length < length) return errMsg; }, // 手機號碼 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; } };
編寫驗證邏輯
function FormValidator(VerifyPolicy) { this.verifyPolicies = VerifyPolicy ? VerifyPolicy : VerifyPolicies; // 待執行的驗證函數數組 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); // 這裡調用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; } };
至此，整個表單驗證已經初步完成，在此方法之上，可以隨意添加方法了。