表單校驗
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 =https://www.cnblogs.com/hansonfang/p/==''){
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設計模式與開發實踐》
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/141451.html
標籤：JavaScript