表单验证请进!!!

纯洁的代码
88 阅读4分钟

还在为你表单验证头疼吗？还在为产品无理取闹，要你每个输入框都加验证而感到烦恼吗？还在忙于复制粘贴验证规则而感到厌烦吗？ 那么策略者模式是最适合你的。

What are u talking about?

上面其实是我的切身体会，我也相信有许许多多的font-end踩过这个坑。每一个项目，都要重写验证规则，验证逻辑，那感觉简直想屎。自从遇见了策略者模式，产经你不是要加验证吗？没问题。 这个验证规则不行，替换~ 没问题。这里需要多加一个验证规则，没问题。

我想我们以前写代码会是这样的

[AppleScript]
纯文本查看
复制代码
1
2
3
4
5
6
7
8
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]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
//返回多个检测的结果，如果验证都通过则返回空的数组
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]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
//总的代码如下，如果有兴趣可以拷贝测试一下。
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());
//["不能为空"]



恩~ 可以了~
如果大家领悟的话，可以自己写一个策略者模式的表单检测。前端最好的学习方式就是看书加实践(造轮子)。


avatar
文章
阅读
粉丝