共计 1906 个字符，预计需要花费 5 分钟才能阅读完成。
应用策略模式实现表单验证
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;
}
}
}
正文完
