优雅的写表单校验 -- 策略模式的运用
假设我们正在编写一个注册的页面，在点击注册按钮之前，有如下几条校验逻辑。
- 用户名不能为空。
- 密码长度不能少于 6 位。
- 手机号码必须符合格式。
<form action="http:// xxx.com/register" id="registerForm" method="post"> <div>请输入用户名：<input type="text" name="userName" /></div> <div>请输入密码：<input type="text" name="password" /></div> <div>请输入手机号码：<input type="text" name="phoneNumber" /></div> <button>提交</button> </form>
html 的部分很简单，主要想想提交里怎么写？
来，简单构思下~
来，简单构思下~
来，简单构思下~
凭直觉写的表单校验 - v1
let form = document.querySelector("#registerForm"); form.onsubmit = () => { if (form.userName.value === "") { alert("用户名不能为空"); return false; } if (form.password.value.length < 6) { alert("密码不能少于6位"); return false; } if (!/[0-9]{11,11}/.test(form.phoneNumber.value)) { alert("手机号码格式不正确"); return false; } };
一顿操作猛如虎，好，写完之后，看看代码有何不妥：
- registerForm.onsubmit 函数比较庞大，包含了很多 if-else 语句，这些语句需要覆盖所有 的校验规则。
- registerForm.onsubmit 函数缺乏弹性，如果增加了一种新的校验规则，或者想把密码的长 度校验从 6 改成 8，我们都必须深入 registerForm.onsubmit 函数的内部实现，这是违反开 放—封闭原则的。
- 算法的复用性差，如果在程序中增加了另外一个表单，这个表单也需要进行一些类似的 校验，那我们很可能将这些校验逻辑复制得漫天遍野。
联系之前说过的策略模式，来改进代码~
改进版的表单校验 - v2
// 将算法的实现单独封装起来 var strategies = { isNonEmpty: function(value, errorMsg) { // 不为空 if (value === "") { return errorMsg; } }, // 这里把length作为参数 minLength: function(value, length, errorMsg) { // 限制最小长度 if (value.length < length) { return errorMsg; } }, isMobile: function(value, errorMsg) { // 手机号码格式 if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) { return errorMsg; } } }; // 算法的使用 let form = document.querySelector("#registerForm"); form.onsubmit = function() { var errorMsg = "用户名不能为空"; if ((strategies.isNonEmpty(registerForm.userName.value), errorMsg)) { alert(errorMsg); return false; } var errorMsg = "密码长度不能少于6 位"; if ((strategies.minLength(registerForm.password.value), 6, errorMsg)) { alert(errorMsg); return false; } var errorMsg = "手机号码格式不正确"; if ((strategies.isMobile(registerForm.phoneNumber.value), errorMsg)) { alert(errorMsg); return false; } // 这里开始ajax请求。。。 };
写完之后，我屮艸芔茻！！！这好像和第一版也没什么大的区别。看起来一点也不优雅！！！
但这里提供了关键性思路，提交部分明显就是重复，很容易想到列表循环，这里将其抽象成 validator 的类。
也就是 validator 类提供 add 和 start,，add 负责将每种校验方式放进一个数组，start 负责遍历数组，一旦有返回值直接返回且终止返回。
。。。咳咳，有点难度，可以试试写写。
初见美好 - v3
// var strategies = 、、、 class Validator { constructor() { this.cache = []; } add(dom, rule, msg) { // 把单个验证表单的fn存下来 let [strategy, length] = rule.split(":"); let params = length ? [dom.value, length, msg] : [dom.value, msg]; console.log(params); let fn = () => { return strategies[strategy](...params); }; this.cache.push(fn); } start() { for (var i = 0; i < this.cache.length; i++) { let errMsg = this.cache[i](); if (errMsg) { return errMsg; } } } } // 应用 let form = document.querySelector("#registerForm"); function validateData() { let validator = new Validator(); validator.add(form.userName, "isNonEmpty", "用户名不能为空"); validator.add(form.password, "minLength:6", "密码不能少于6位"); validator.add(form.phoneNumber, "isMobile", "手机号码格式不正确"); // 需要加新的校验规则，直接添加这里就好 let errMsg = validator.start(); return errMsg; } // submit里面就很优雅了 form.onsubmit = () => { let errMsg = validateData(); if (errMsg) { alert(errMsg); return false; } };
写完这些之后，很赞啦！
但。。。还有点点缺点，比如用户名想同时验证其为空和长度的话，需要单个列出，显然又累赘了
接下来试着将其改成validator.add(form.userName, {isNonEmpty:'用户名不能为空','minLength:6':'用户名长度不能少于6位'})
validator.add(form.userName, "isNonEmpty", "用户名不能为空"); validator.add(form.userName, "minLength:6", "用户名长度不能少于6位");
相知相识 - v4
// var strategies = 。。。; class Validator { constructor() { this.cache = []; } // 没事原先的add提取出来 _handleRule(dom, rule, msg) { // 把单个验证表单的fn存下来 let [strategy, length] = rule.split(":"); let params = length ? [dom.value, length, msg] : [dom.value, msg]; console.log(params); let fn = () => { return strategies[strategy](...params); }; this.cache.push(fn); } add(dom, rules) { rules.forEach(item => { for (let rule in item) { let msg = item[rule]; // 遍历的时候，直接使用就好 this._handleRule(dom, rule, msg); } }); } start() { for (var i = 0; i < this.cache.length; i++) { let errMsg = this.cache[i](); if (errMsg) { return errMsg; } } } } // 应用 let form = document.querySelector("#registerForm"); function validateData() { let validator = new Validator(); validator.add(form.userName, [ { isNonEmpty: "用户名不能为空" }, { "minLength:6": "用户名不能少于6位" } ]); validator.add(form.password, [{ "minLength:6": "密码不能少于6位" }]); validator.add(form.phoneNumber, [{ isMobile: "手机号码格式不正确" }]); console.log(validator); let errMsg = validator.start(); return errMsg; } form.onsubmit = () => { let errMsg = validateData(); if (errMsg) { alert(errMsg); return false; } };
完结，下次看表单验证的一些插件可能就能加深理解了！
引用
这里的案例是《JavaScript的设计模式与开发实践》里面的，写的非常好，强烈安利！！！
对了之前写了个策略模式的入门
