溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下怎么使用JavaScript策略模式校驗表單，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
javascript是一種動態類型、弱類型的語言，基于對象和事件驅動并具有相對安全性并廣泛用于客戶端網頁開發的腳本語言，同時也是一種廣泛用于客戶端Web開發的腳本語言。它主要用來給HTML網頁添加動態功能，現在JavaScript也可被用于網絡服務器，如Node.js。
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函數里面添加相應的數組處理邏輯即可
優點：
避免多重條件選擇語句
實現開閉原則，使得函數的使用更加易于切換，易于理解，易于擴展。
提高代碼復用程度
以上是“怎么使用JavaScript策略模式校驗表單”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
