用策略模式实现表单的校验
预览
GIF.gif
作为一名前端人士，在一个web项目中，注册、登录、修改用户信息等功能的实现都离不开表单。在将用户输入的数据提交给后台之前，常常需要做一些客户端力所能及的校验工作。比如注册的时候需要校验是否填写了用户名，密码的长度是否符合规定，等等。好了，您可能会说，说出你的梦想，开始你的表演，接下来我要开始我的表演了。😜
假设现在我要写一个注册页面，在店家注册按钮之前，有如下几条校验逻辑：
用户名不能为空
密码长度不能小于6位
手机号码必须符合格式
一、表单校验的第一个版本
<html>
<body>
<form action="https://www.baidu.com" method="post" id="registerForm">
请输入用户名<input type="text" name="userName"><br>
请输入密码 <input type="password" name="password"><br>
请输入手机号码<input type="text" name="phoneNumber"><br>
<button>提交</button>
</form>
</body>
</html>
么有写CSS样式，感觉界面丑哭😭，实现功能最重要，对不？
<script>
const registerForm = document.getElementById('registerForm');
registerForm.onsubmit = function() {
if (registerForm.userName != "") {
if (registerForm.password.length >= 6) {
if (/^1[3|4|5|7|8][0-9]{9}$/.test(registerForm.phoneNumber)) {
alert('成功');
} else {
alert('请输入正确的的手机号！');
return false;
}
} else {
alert('密码不能小于六位');
return false;
}
} else {
alert("用户名不能为空！");
return false;
}
}
</script>
这是一种最常见的代码编写方式，但是他的缺点显而易见。registerForm.onsubmit函数比较庞大，包含了过多的if-else语句，如果增加一条新的校验规则，或者想把免得长度校验从6位增加到8位，要去registerForm.onsubmit内部更改，这样就违反了开放-封闭的原则。
二、用策略模式实现表单的校验
我们经常说，条条大路通罗马，在现实生活中，很多时候也有很多途径到达同一个目的地。假如我们要去某个地方旅游，我们可以这样选择：
不考虑金钱的情况下，为了节省时间，我们选择乘坐飞机
考虑钱的话，那就火车或者bus
像我这样的只能来个自行车去旅游了，这就是差距啊😭，到此为止，我们来说说主角吧，蹬蹬蹬蹬，策略模式来了。
策略模式就是定义一系列算法，把它们一个个封装起来，并且是它们可以相互替换。
用策略模式来实现表单的检验，第一步我们先来把这些校验逻辑封装成策略对象
var strategies = {
// errorMsg参数，提升了适用性
isNonEmpty: function(value, errorMsg) { //不为空
if (value === '') {
// 返回字符串true 错误信息
return errorMsg;
}
},
minLength: function(value, length, errorMsg) { //限制最小长度
if (value.length < length) {
return errorMsg;
}
},
isMobile: function(value, errorMsg) {
if (!/^1[1|5|8|7|4|3][0-9]{9}$/.test(value)) { //电话号码校验
return errorMsg;
}
}
}
接下来就是实现Validator类了。Validator负责接收用户的请求并委托给strategy对象。我们先来了解下用户是如何向Validator类发送请求的，这有助于我们知道如何去编写Validator类的代码。代码如下：
function validateFunc() {
// 校验处理 分离出去
var validator = new Validator(); //创建validator对象
// 一个个去校验
// 数组 遍历
/**********************添加校验规则**********************/
validator.add(registerForm.userName, 'isNonEmpty', '用户名不能为空');
validator.add(registerForm.password, 'minLength:6', '密码长度不能少于6位');
validator.add(registerForm.phoneNumber, 'isMobile', '手机号码格式不正确')
var errorMsg = validator.start(); //获取校验结果
// 一个个去校验
return errorMsg; //返回校验结果
}
registerForm.onsubmit = function() {
// 一票规则 数组
var errorMsg = validateFunc(); //如果errorMsg有确切的返回值，说明校验未通过，即输入的内容不符合规则
if (errorMsg) {
alert(errorMsg);
return false; //阻止表单提交
}
}
通过这段代码，我们先创建了一个validator对象，然后通过validator.add方法，往validator对象中添加一些检验规则。validator.add方法接受三个参数，
validator.add(registerForm.password, 'minLength:6', '密码长度不能少于6位');
registerForm.password为参与校验的input输入框。
'minLength:6'是一个以冒号隔开的字符串。冒号前面的minLength代表挑选的strategy对象，冒号后面的数字6表示在校验中过程中所必须的参数。'minLength:6'的意思是校验registerForm.password这个文本框输入的最小长度不能小于6。如果这个字符串中不过不包含冒号，说明教研过程中不需要额外的参数，如'isNonEmpty'＆'isMobile'。
第三个参数是当被校验的值不符合规则的时，返回的错误信息。
在往validator对象里添加了一系列的校验规则后，我们就要使用validator.start()方法来启动校验。如果validator.start()返回一个确切的errorMsg字符串当作返回值，就表明校验没有通过，此时需要registerForm.onsubmit方法返回false来阻止表单的提交。
最后实现Validator类：
var Validator = function() {
this.cache = [];
}
Validator.prototype.add = function(ele, rule, errorMsg) {
var arr = rule.split(':');
this.cache.push(function() {
// 规则
var strategy = arr.shift();
arr.unshift(ele.value);
arr.push(errorMsg);
return strategies[strategy].apply(ele, arr);
});
}
Validator.prototype.start = function() {
for (var i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
var msg = validatorFunc();
if (msg) {
return msg;
}
}
};
使用策略模式重构代码后，仅仅可以通过“配置”的方式就可以完成一个表单的校验，这些校验规则也可以复用在程序的任何地方，这就是我们所所得，处处适用。
在修改某个校验规则的时候，只需要编写或者改写少量的代码。假如想将用户名输入框的校验规则修改成用户名不能少于四个字符。代码如下所示：
validator.add(registerForm.userName, 'isNonEmpty', '用户名不能为空');
//改成
validator.add(registerForm.userName, 'minLength:8', '用户名长度不能小于8位');
学习中遇到的问题
(1)什么鬼？在校验失败的情况下，还会实现页面的跳转，真的让人有点受不了，所以我要说的是，一定要在registerForm.onsubmit方法返回false来阻止表单的提交。
(2)再来解释下手机号码的校验规则
isMobile: function(value, errorMsg) {
if (!/^1[1|3|4|5|7|8][0-9]{9}$/.test(value)) { //电话号码校验
return errorMsg;
}
}
表示第一位只匹配数字1，第二位匹配（3|4|5|7|8）里面的任意一个数值，剩下的9位是没有限制的，也就是可以匹配0-9之间的任意数字，最后以$结尾。test函数返回的是一个boolean值。正则表达式中 test、exec、match 方法区别http://www.cnblogs.com/meixianfeng/articles/2762273.html。
代码地址：https://github.com/SiHao24/js_pattern
结语
策略模式的巧妙之处远远不止这些，我只是列举了其中小小的一个环节！还需要花费更多的时间去学习其中的奥秘。虽然开始学的很艰难，但是努力过后，就会陶醉在知识的海洋里!
有建议或者觉得有错误的地方可以指出来哟，让我跟随大佬们的步伐，继续努力吧！
