策略模式 -- 表單驗證 · 前端知識 -- 學習整理

>[success] # 正常思維的表單驗證 ~~~ 1.通過if else來進行判斷驗證，后期會維護大量的if - else的邏輯驗證 ~~~ ~~~ <body> <form id='login-form' action="" method="post"> <label for="userName">用戶名</label> <input type="text" id="userName" name="userName"> <label for="phoneNumber">手機號</label> <input type="number" id="phoneNumber" name="phoneNumber"> <label for="password">密碼</label> <input type="password" id="password" name="password"> <button id='login'>登錄</button> </form> </body> <script> var loginForm = document.getElementById('login-form'); loginForm.onsubmit = function () { if(loginForm.userName.value ===''){ alert('用戶名不能為空') return false } if(loginForm.password.value.length<6){ alert('密碼長度不能小于六位') return false; } if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(loginForm.phoneNumber.value)) { alert('手機號格式錯誤') return false; } } </script> ~~~ >[success] # 利用策略模式 ~~~ 1.策略模式需要將代碼拆成兩個兩部分，第一個部分'封裝不同策略的策略組'，也就是要將這些驗證對象封裝成策略對象，第二部分需要'Context'執行這些策略的調用，調用策略對象 2.分析第一部分要封裝的策略組代碼，也就是上面的if else，都需要被判斷參數，報錯信息。其中判斷長度比較特別需要，一個額外的長度來控制各種長度出現的情況 3.分析第二部分也就是一個'執行這些策略的調用'，構想就是分成兩部分，第一部分就是添加你想要的策略，第二部分就是統一執行你添加的策略 ~~~ >[danger] ##### 封裝一個策略對象 ~~~ 1.根據上面分析，整個負責驗證的策略對象中的每個策略，最少需要兩個參數，第一個參數就是要驗證的值，第二個參數就是驗證后的報錯提示信息。除了特殊策略，例如長度驗證需要一個關于長度的判斷值 2.這里的策略模式使用了js的特性，直接將這些策略方式封裝到一個對象即可，如果是后臺例如java這種靜態語言，可能需要一個'接口' 一些策略要繼承這個接口的策略類 ~~~ * es5 版本 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="registerForm" method="post"> <label for="userName">用戶名</label> <input type="text" id="userName" name="userName"> <label for="phoneNumber">手機號</label> <input type="number" id="phoneNumber" name="phoneNumber"> <label for="password">密碼</label> <input type="password" id="password" name="password"> <button id='login'>登錄</button> </form> </body> <script> /** * 策略模式的兩個點 * 1.存所有的驗證（策略） * 2.有一個可以調用所有驗證（執行策略） * 策略模式執行的類： * 3.有一個方法這個方法是專門又來存這些驗證的，存這些驗證需要什么 * 3.1 需要一個能存的變量因為要存多個這個變量選數組 * 3.2 要存的是什么，這里要存的是錯誤提示 * 3.2.1 要存錯誤提示怎么存是進來一個就調用把錯誤提示存進這個變量？ * 還是說存這些方法，在最后執行的時候調用這些方法比較好 * 這里選用后者存這些驗證方法 * 3.3 能存了核心在哪，在策略模式最后需要有個執行者，執行這些策略，也就是 * 這個類需要一個執行方法start * 4.要細分存儲策略的add方法的具體參數，需要有一個要驗證的對象，需要有驗證的規則，需要有驗證的提示 * **/ // 策略對象 const strategies = { isNonEmpty: function (value, errorMsg) { // 不能為空，第一個參數要驗證的值，第二個是提示 if(value === ''){ return errorMsg } }, minLength:function (value, length,errorMsg) { // 最小長度 if(value.length < length){ return errorMsg } }, isMobile:function (value,errorMsg) { if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(value)) { // 驗證電話號碼 return errorMsg } } } // 委托來讓 Context 擁有執行策略的能力Validator function Validator() { // 對應第三條的分析 this.cache = [] } // 關于參數對照第四條 Validator.prototype.add = function (dom,rule,errorMsg) { // 規則針對要傳入自己額外規則參數的驗證我們規定用':' 分開 // 因此需要對規則在進行拆分 var ary = rule.split(':') // 對規則進一步的驗證發方法存放在this.cache中 this.cache.push(function () { // 驗證規則 var strategy = ary.shift() // 分析我么的策略中最特殊需要參數的方法function (value, length,errorMsg) // 經過上一步的操作 ary 中只能有兩種情況，一種是空數組，一種是有一個自己定義的驗證判斷規則參數 ary.unshift(dom.value) ary.push(errorMsg) console.log(strategy) return strategies[strategy].apply(dom,ary) }) } // 最后調用策略的方法 Validator.prototype.start = function () { for (var i=0,validatorFunc;validatorFunc = this.cache[i++];){ var msg = validatorFunc() if(msg){ return msg } } } var registerForm = document.getElementById('registerForm') var validataFun = function () { var validator = new Validator() validator.add(registerForm.userName,'isNonEmpty','用戶名不能為空') validator.add(registerForm.password,'minLength:6','密碼長度不能少于六位') validator.add(registerForm.phoneNumber,'isMobile','手機格式不正確') var errorMsg = validator.start() return errorMsg } registerForm.onsubmit = function (e) { e.preventDefault() var errorMsg = validataFun() if(errorMsg){ alert(errorMsg) return false // 組織表單提交 } } </script> </html> ~~~ * es6 版本 ~~~ 1.下面代碼最有意思的核心點是在add方法，打破思維定式數組還可以存取一些方法需要的時候在調用這些方法得到我們想要的 2.當這些數組方法被執行后，這些數組存的就不是這些方法了，而是這些方法的返回值 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <label for="userName">用戶名</label> <input type="text" id="userName" name="userName"> <label for="phoneNumber">手機號</label> <input type="number" id="phoneNumber" name="phoneNumber"> <label for="password">密碼</label> <input type="password" id="password" name="password"> <button id='login'>登錄</button> </body> <script> // 策略對象 const strategies = { isNonEmpty: function (value, errorMsg) { // 不能為空，第一個參數要驗證的值，第二個是提示 if(value === ''){ return errorMsg } }, minLength:function (value, length,errorMsg) { // 最小長度 if(value.length < length){ return errorMsg } }, isMobile:function (value,errorMsg) { if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(value)) { // 驗證電話號碼 return errorMsg } } } // 執行這些策略的調用的類Validator -- 這里直接es6 寫法 class Validator{ constructor(strategies){ this.cache = [] this.strategies = strategies // 策略對象 } // 保存所有驗證方法 add(value, rule, errorMsg){ let ary = rule.split(':') this.cache.push(()=>{ let strategy = ary.shift() ary.unshift(value) ary.push(errorMsg) // 當想給函數傳多個參數利用數組的形式的話es5 首先考慮利用apply // es6 理解結構賦值的方法this.strategies[strategy](...ary) return this.strategies[strategy].apply(this,ary) }) } // 統一執行調用 start(){ let msg = '' for(let item of this.cache){ msg = item() if(msg){ return msg } } } } let userName = document.getElementById('userName'); let password = document.getElementById('password'); let phoneNumber = document.getElementById('phoneNumber'); // 每次執行調用為了獲取最新的輸入value值 let validataFun = function () { // 創建一個'執行這些策略的調用' 的Validator實例 let validator = new Validator(strategies) validator.add(userName.value,'isNonEmpty','用戶名不能為空') validator.add(password.value,'minLength:6','密碼長度不能少于六位') validator.add(phoneNumber.value,'isMobile','手機格式不正確') var errorMsg = validator.start() return errorMsg } document.getElementById('login').onclick = ()=>{ let errorMsg = validataFun() if(errorMsg){ alert(errorMsg) } } </script> </html> ~~~ * 書中的es5 寫法