第如何使用JavaScript策略模式校驗(yàn)表單目錄概述未使用策略模式的表單校驗(yàn)使用策略模式優(yōu)化策略模式的優(yōu)點(diǎn)總結(jié)

概述

Web項(xiàng)目中，登錄，注冊等等功能都需要表單提交，當(dāng)把用戶的數(shù)據(jù)提交給后臺之前，前端一般要做一些力所能及的校驗(yàn)，比如是否填寫，填寫的長度，密碼是否符合規(guī)范等等，前端校驗(yàn)可以避免提交不合規(guī)范的表單。

假如我們有一個(gè)表單，校驗(yàn)邏輯如下：

用戶名不為空

密碼長度不低于6位

手機(jī)號符合格式

未使用策略模式的表單校驗(yàn)

當(dāng)沒有使用策略模式時(shí)，即我們首先會想到的校驗(yàn)?zāi)Ｊ酵ǔＪ沁@樣的：

body

formid="registerForm"

labelfor="username"輸入用戶名：inputtype="text"name="username"/label

labelfor="password"輸入密碼：inputtype="password"name="password"/label

labelfor="phone"輸入密碼：inputtype="text"name="phone"/label

/form

script

constform=document.querySelector('.registerForm');

form.onsubmit=function(){

if(form.username.value===''){

alert('用戶名不能為空')

return;

if(form.password.value.length6){

alert('密碼長度不能小于6位')

return;

if(!/(^1[3|5|8][0-9]{9}$)/.test(form.phone.value)){

alert('手機(jī)號格式不正確')

return;

/script

/body

這種代碼編寫方式十分常見，但它的缺點(diǎn)同樣很明顯：

onsubmit函數(shù)過于龐大，包含很多if-else，要覆蓋所有規(guī)則

onsubmit函數(shù)缺乏彈性，如果要進(jìn)入一種新的校驗(yàn)規(guī)則，就要改函數(shù)的內(nèi)容實(shí)現(xiàn)，違反開放-閉合原則

代碼復(fù)用性較差，如果再寫一個(gè)表單，就要復(fù)制很多重復(fù)的代碼

使用策略模式優(yōu)化

首先封裝校驗(yàn)函數(shù)為一個(gè)對象：

conststrategies={

empty(value,errMsg){

if(value.length===0){

returnerrMsg;

minLength(value,len,errMsg){

if(value.lengthlen){

returnerrMsg;

isMobile(value,errMsg){

if(!/(^1[3|5|8][0-9]{9}$)/.test(value)){

returnerrMsg;

}

我們還要一個(gè)Validator類,這個(gè)類用于向目標(biāo)表單添加驗(yàn)證規(guī)則，它的用法如下:

constvalidate=function(){

constvalidator=newValidator();

validator.add(Form.userName,'empty','用戶名不能為空');

validator.add(Form.password,'minLength:6','密碼長度不能少于6位');

validator.add(Form.phone,'isMobile','手機(jī)號碼格式不正確');

consterrMsg=validator.start();

returnerrMsg;

}

如代碼所示，validator實(shí)例有add方法，接收3個(gè)參數(shù)，第一個(gè)為需要驗(yàn)證的表單實(shí)例，第二個(gè)為驗(yàn)證方法，冒號后面為傳入的參數(shù)。第三個(gè)為驗(yàn)證未通過的錯(cuò)誤提示信息。

start方法，用于啟動校驗(yàn)，如果沒通過會返回未通過的提示信息，可在之后的邏輯中進(jìn)行處理

Validator類的編寫:

classValidator{

constructor(){

this.rules=[];

add(elem,rule,err){

constargs_arr=rule.split(":");

this.rules.push(()={

consthandler=args_arr.shift();

args_arr.unshift(elem.value);

args_arr.push(err);

returnstrategies[handler].apply(elem,args_arr)

start(){

leterrmsg=[]

for(leti=0;ithis.rules.length;i++){

consterr=this.rules[i]();

if(err){

errmsg.push(err)

returnerrmsg.join(",");

}

使用策略模式，我們使用配置的方式完成了表單的校驗(yàn)，這些規(guī)則可以用在以后任何校驗(yàn)表單的地方，更方便修改與復(fù)用

為單一表單項(xiàng)增加多個(gè)驗(yàn)證規(guī)則

我們的代碼現(xiàn)在有一個(gè)缺點(diǎn)，就是只能為某一個(gè)表單項(xiàng)賦單一驗(yàn)證規(guī)則，無法實(shí)現(xiàn)一個(gè)表單多個(gè)驗(yàn)證規(guī)則，所以代碼還有優(yōu)化的空間

classValidator{

//···

add(elem,rules){

rules.forEach(rule={

constargs_arr=rule.strategy.split(":");

this.rules.push(()={

consthandler=args_arr.shift();

args_arr.unshift(elem.value);

args_arr.push(rule.errMsg);

returnstrategies[handler].apply(elem,args_arr)

//···

constvalidate=function(){

constvalidator=newValidator();

validator.add(Form.username,[{

strategy:'empty',

errMsg:'用戶名不能為空'

}]);

validator.add(Form.password,[{

strategy:'minLength:6',

errMsg:'密碼長度不能少于6位'

}]);

validator.add(Form.phone,[{

strategy:'isMobile',

errMsg:'手機(jī)號碼格式不正確'

},{

strategy:'empty',

errMsg:'手機(jī)號不能為空'

}]);

consterrMsg=validator.start();

returnerrMsg;

}

只需要傳參時(shí)傳入一個(gè)對象數(shù)組，并在add函數(shù)里面添加相應(yīng)的數(shù)組處理邏輯即可

策略模式的優(yōu)點(diǎn)

優(yōu)點(diǎn)：

避免多重條件選擇語句

實(shí)現(xiàn)開閉原則，使得函數(shù)的使用更加易于切換，易于理解，易于擴(kuò)展。

提高代碼復(fù)用程度

總結(jié)

PeterNorvig說過，在函數(shù)作為一等對象的