表單校驗 Web項目中，登錄，註冊等等功能都需要表單提交，當把用戶的數據提交給後臺之前，前端一般要做一些力所能及的校驗，比如是否填寫，填寫的長度，密碼是否符合規範等等，前端校驗可以避免提交不合規範的表單。 假如我們有一個表單，校驗邏輯如下： 用戶名不為空 密碼長度不低於6位 手機號符合格式 未使用策 ...
表單校驗
Web項目中，登錄，註冊等等功能都需要表單提交，當把用戶的數據提交給後臺之前，前端一般要做一些力所能及的校驗，比如是否填寫，填寫的長度，密碼是否符合規範等等，前端校驗可以避免提交不合規範的表單。
假如我們有一個表單，校驗邏輯如下：
- 用戶名不為空
- 密碼長度不低於6位
- 手機號符合格式
未使用策略模式的表單校驗
當沒有使用策略模式時，即我們首先會想到的校驗模式通常是這樣的：
<body>
<form id="registerForm">
<label for="username">輸入用戶名：<input type="text" name="username"></label>
<label for="password">輸入密碼：<input type="password" name="password"></label>
<label for="phone">輸入密碼：<input type="text" name="phone"></label>
</form>
<script>
const form = document.querySelector('.registerForm');
form.onsubmit = function(){
if(form.username.value === ''){
alert('用戶名不能為空')
return;
}
if(form.password.value.length < 6){
alert('密碼長度不能小於6位')
return;
}
if(!/(^1[3|5|8][0-9]{9}$)/.test(form.phone.value)){
alert('手機號格式不正確')
return;
}
}
</script>
</body>這種代碼編寫方式十分常見，但它的缺點同樣很明顯：
onsubmit函數過於龐大，包含很多if-else，要覆蓋所有規則onsubmit函數缺乏彈性，如果要進入一種新的校驗規則，就要改函數的內容實現，違反開放-閉合原則- 代碼復用性較差，如果再寫一個表單，就要複製很多重覆的代碼
使用策略模式優化
首先封裝校驗函數為一個對象：
const strategies = {
empty(value, errMsg){
if(value.length === 0){
return errMsg;
}
},
minLength(value, len, errMsg){
if(value.length < len){
return errMsg;
}
},
isMobile(value, errMsg){
if(!/(^1[3|5|8][0-9]{9}$)/.test(value)){
return errMsg;
}
}
}我們還要一個Validator類, 這個類用於向目標表單添加驗證規則，它的用法如下:
const validate = function(){
const validator = new Validator();
validator.add(Form.userName, 'empty', '用戶名不能為空');
validator.add(Form.password, 'minLength:6', '密碼長度不能少於6位');
validator.add(Form.phone, 'isMobile', '手機號碼格式不正確');
const errMsg = validator.start();
return errMsg;
}如代碼所示，
validator實例有add方法，接收3個參數，第一個為需要驗證的表單實例，第二個為驗證方法，冒號後面為傳入的參數。第三個為驗證未通過的錯誤提示信息。
start方法，用於啟動校驗，如果沒通過會返回未通過的提示信息，可在之後的邏輯中進行處理
Validator類的編寫:
class Validator {
constructor(){
this.rules = [];
}
add(elem, rule, err){
const args_arr = rule.split(":");
this.rules.push(()=>{
const handler = args_arr.shift();
args_arr.unshift(elem.value);
args_arr.push(err);
return strategies[handler].apply(elem, args_arr)
})
}
start(){
let errmsg = []
for(let i = 0; i < this.rules.length; i++ ){
const err = this.rules[i]();
if(err){
errmsg.push(err)
}
}
return errmsg.join(",");
}
}使用策略模式，我們使用配置的方式完成了表單的校驗，這些規則可以用在以後任何校驗表單的地方，更方便修改與復用
為單一表單項增加多個驗證規則
我們的代碼現在有一個缺點，就是只能為某一個表單項賦單一驗證規則，無法實現一個表單多個驗證規則，所以代碼還有優化的空間
class Validator{
// ···
add(elem, rules){
rules.forEach(rule => {
const args_arr = rule.strategy.split(":");
this.rules.push(()=>{
const handler = args_arr.shift();
args_arr.unshift(elem.value);
args_arr.push(rule.errMsg);
return strategies[handler].apply(elem, args_arr)
})
});
}
// ···
}
const validate = function(){
const validator = new Validator();
validator.add(Form.username,[{
strategy: 'empty',
errMsg: '用戶名不能為空'
}]);
validator.add(Form.password, [{
strategy: 'minLength:6',
errMsg: '密碼長度不能少於6位'
}]);
validator.add(Form.phone, [{
strategy: 'isMobile',
errMsg: '手機號碼格式不正確'
}, {
strategy: 'empty',
errMsg: '手機號不能為空'
}]);
const errMsg = validator.start();
return errMsg;
}只需要傳參時傳入一個對象數組，併在add函數裡面添加相應的數組處理邏輯即可
策略模式的優點
優點：
- 避免多重條件選擇語句
- 實現開閉原則，使得函數的使用更加易於切換，易於理解，易於擴展。
- 提高代碼復用程度
總結：
Peter Norvig說過，在函數作為一等對象的語言中，策略模式是隱形，strategy就是值為函數的變數。其實就是將封裝好的策略函數當成參數傳給使用它的target，被target調用的過程，用好策略模式，不僅讓我們對該模式有更加深刻的理解，也使我們明白使用函數的好處。
本文引用自《Javascript設計模式與開發實踐》
