还在为你表单验证头疼吗？还在为产品无理取闹，要你每个输入框都加验证而感到烦恼吗？还在忙于复制粘贴验证规则而感到厌烦吗？ 那么策略者模式是最适合你的。
What are u talking about?
上面其实是我的切身体会，我也相信有许许多多的font-end踩过这个坑。每一个项目，都要重写验证规则，验证逻辑，那感觉简直想屎。自从遇见了策略者模式，产经你不是要加验证吗？没问题。 这个验证规则不行，替换~ 没问题。这里需要多加一个验证规则，没问题。
我想我们以前写代码会是这样的
[AppleScript] 纯文本查看 复制代码 var username = document.querySelector("username").value;
var reg = /\\w+/;
if(username.length===0||username==null){
alert("用户名不能为空!");
}else if(!reg.test(username)){
alert("用户名格式不正确!");
}
...
这种书写不是不好，只是重用性...so bad！
我们来看看策略者模式怎样写的。
首先验证部分
[AppleScript] 纯文本查看 复制代码 var validate = (function(){
var instructions = {
notEmpty:"不能为空!",
isPhone:"手机号不正确!"
};
var types = {
notEmpty:function(value){
if(value==null||value.length===0){
return false;
}
return true;
},
isPhone:function(value){
var reg = /\\d+/;
if(reg.test(value)){
return true;
}
return false;
}
}
return function(value,type){
//type为检测类型,value为检测的值
if(!types[type]){
throw "检测类型不存在";
}
if(!types[type](value)){
return instructions[type];
}
return false;
}
})();
//测试
console.log(validate("","notEmpty"));
// "不能为空!"
完美~
屁~
仔细观察不难发现,就是对一个输入不能验证多个内容. 那怎么满足这个需求呢？ 还得写一个检测类，相当于代理。
[AppleScript] 纯文本查看 复制代码 //返回多个检测的结果，如果验证都通过则返回空的数组
var detect = function(value,types){
var result = [];
if(!(types instanceof Array)){
//这里只是做类型检测，万一手贱输错了就不好了
throw "检测类型需要为数组不正确";
}
for(var type of types){
var msg = validate(value,type);
if(msg){ //如果信息存在
result.push(msg);
}
}
return result.length?result:false;
}
console.log(detect("",["notEmpty"]));
恩恩，这应该可以了吧。
NO NO NO ~~~
你这只是一对多的验证规则，当我要提交表单的时候，我还有其他的value都需要验证呢。你有没有多对多的检测类。
有的，客官~
[AppleScript] 纯文本查看 复制代码 //总的代码如下，如果有兴趣可以拷贝测试一下。
var validate = (function(){
var instructions = {
notEmpty:"不能为空!",
isPhone:"手机号不正确!"
};
var types = {
notEmpty:function(value){
if(value==null||value.length===0){
return false;
}
return true;
},
isPhone:function(value){
var reg = /\\d+/;
if(reg.test(value)){
return true;
}
return false;
}
}
return function(value,type){
//type为检测类型,value为检测的值
if(!types[type]){
throw "检测类型不存在";
}
if(!types[type](value)){
return instructions[type];
}
return false;
}
})();
var Detect = function(){
this.result = [];
}
Detect.prototype.add = function(value,types){
if(!(types instanceof Array)){
throw "检测类型只能为数组";
}
for(var type of types){
var msg = validate(value,type);
if(!!msg){
this.result.push(msg);
}
}
}
Detect.prototype.getResult = function(){
var result = this.result;
return result.length?result:false;
}
var detect = new Detect();
detect.add("",["notEmpty"]);
//添加值的验证
detect.add(123,["isPhone"]);
//添加另外一个值的验证
console.log(detect.getResult());
//["不能为空"]
恩~ 可以了~
如果大家领悟的话，可以自己写一个策略者模式的表单检测。前端最好的学习方式就是看书加实践(造轮子)。
点击有惊喜
| 
收藏
淘帖
踩
