应用策略模式实现表单验证
1.什么是策略模式
策略模式说起来很高大上，其实现实生活中很常见。比方，你要从老家去北京故宫玩耍，可选的出行形式有坐火车、开车自驾、坐飞机等几种形式，
至于抉择哪种呈现形式要看本人的经济能力和集体需要，而抉择的过程就是一种策略模式。
2.利用例子-表单验证
在js代码中如何实现策略模式？
- 1.你得有一堆可供选择的策略
strategies = [one, two, three,...] - 2.依据不同的场景
Context应用不同策略。
上面我应用策略模式实现登录界面的表单验证,如果不合乎规定，进行弹窗提醒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<h1>登陆</h1>
<form id="registerForm">
<span>请输出用户名：</span><input type="text" name="userName" placeholder="不能为空"/>
<br />
<span>请输出明码：</span><input type="text" name="password" placeholder="起码6位"/>
<br />
<span>请输出手机号码：</span><input type="text" name="phoneNumber" placeholder="请输出正确的手机号码"/>
<br />
<button>登陆</button>
</form>
</body>
<script src="./index.js"></script>
</html>1.把策略筹备好，策略就是校验规定
const strategies = {
isNoEmpty: function(value, errorMsg) {
return value ? '' : errorMsg
},
minLength: function(value, errorMsg,length) {
return value && value.length >= length ? '' : errorMsg
},
isMoble: function(value, errorMsg) {
return /(^1[3|5|8][0-9]{9}$)/.test(value) ? '' : errorMsg;
}
}2.再写一个Context
// 校验类
const Validator = function(){
this.rules = [];// 校验规定
}
Validator.prototype.add = function(dom, rule, errorMsg){
const key = Object.keys(rule)[0];
const value = rule[key]
this.rules.push(function(){
return strategies[key].apply(null, [dom.value, errorMsg, value])
})
}
Validator.prototype.run = function(){
for(let i = 0; i < this.rules.length; i ++){
const msg = this.rules[i]()
if (msg) return msg;
}
}3.业务代码
// 进行校验
const validateLoginData = function(){
const validator = new Validator()
validator.add(document.getElementsByName('userName')[0], {isNoEmpty: true}, '用户名不能为空')
validator.add(document.getElementsByName('password')[0], {minLength: 6}, '明码起码6位')
validator.add(document.getElementsByName('phoneNumber')[0], {isMoble: true}, '手机号不正确')
return validator.run();
}
// 绑定事件
window.onload = function(){
document.getElementById('registerForm').onsubmit = function(){
console.log('xxxx')
var errorMsg = validateLoginData()
if(errorMsg){
alert(errorMsg)
return false;
}
}
}
发表回复