js 策略模式 實現表單驗證

簡單點說就是:實現目標的方式有很多種

,你可以根據自己身情況選乙個方法來實現目標

.所以至少有2個物件

.  乙個是策略類

,乙個是環境類

(上下文

). 然後自己就可以根據上下文選擇不同的策略來執行方案

.策略模式的優點:

1. 策略模式利用組合、委託和多型等技術和思想，可以有效地避免多重條件選擇語句

2. 策略模式提供了對開放-封閉原則的完美支援，將演算法封裝在獨立的 策略類

中，使得它們易於切換，易於理解，易於擴充套件.

// html

// css

#form

input 
.field
label 
.submit

// 策略類

/**

* 必填
*/class requiredrule  value 值
* @param  errormsg 錯誤資訊
* @param  attach 附加引數
* @returns  
*/test(value, errormsg, attach) 
}/**
* 範圍
*/class rangerule  range 
*/constructor(range) 
/*** 驗證
* @param  value 值
* @param  errormsg 錯誤資訊
* @returns  
*/test(value, errormsg) 
return errormsg;
}}/**
* 有效數值驗證
*/class numberrule  value 值
* @param  errormsg 錯誤資訊
* @returns  
*/test(value, errormsg) 
}/**
* 郵箱驗證
* 格式:登入名@主機名.網域名稱
*/class emailrule 
/*** 驗證
* @param  value 值
* @param  errormsg 錯誤資訊
* @returns  
*/test(value, errormsg) 
}/**
* 手機號驗證
*/class mobilerule $/);
}/**
* 驗證
* @param  value 值
* @param  errormsg 錯誤資訊
* @returns  
*/test(value, errormsg) 
}class lengthrule 
/*** 驗證
* @param  value 值
* @param  errormsg 錯誤資訊
* @returns  
*/test(value, errormsg) 
}

// 環境類

class formvalid  form 元素節點

*/constructor(form) 
/*** 新增驗證規則
* @param  option
* @param  option.field  欄位名
* @param  option.rule  規則
* @param  option.errormsg  錯誤資訊
*/add() );}}
isvalid() 
return result.length > 0 ? result : true;
}}

原始碼：樣本：

表單 驗證 如何利用策略模式優化表單驗證

在做移動端專案開發的時候，經常會遇到各種表單驗證，有時候不同的頁面，驗證規則是一樣的 如圖 之前專案裡的驗證 寫的很凌亂，最近剛好遇到這個模組的功能需要重構，於是對 做了大量的優化，記錄一下如何利用策略模式優化表單驗證的 之前我們的驗證 是這樣寫的，把驗證func寫到乙個公共模組裡面，然後每個方法返...

JavaScript 策略模式封裝表單驗證庫

直接上 html htmllang en head metacharset utf 8 title titletitle head body formid form p 使用者名稱 inputtype text name username p p 密碼 inputtype password name...

策略模式之封裝表單驗證

有關策略模式的簡單介紹可以檢視這篇文章 介紹 校驗策略 const validatestrategies test value isnonempty value,errmsg minlength value,length,errmsg 校驗類 function validator validator...