一种web前端表单校验优化方法及系统与流程

1.本发明涉及客户端表单校验优化技术领域，具体为一种web前端表单校验优化方法及系统。


背景技术：

2.早期，对表单做校验，需要大量与服务器往返通信。这样，一方面会增大服务器开销；另一方面，当时还不存在无刷新技术，服务端交互是必须刷新页面的，对用户来说，填完表单，点击提交，等待几十秒处理之后，服务端返回有某些字段不符合规定，需要再重新填写，效率非常低下。
3.现有技术中，1995年，javascript问世，主要用途是代替服务端语言处理输入验证。客户端验证，反馈是实时的，脚本还能定位到填写错误的具体字段。现在虽然无刷新技术早已普及，但是只依赖服务端验证，还是会有几百毫秒的延迟，实际使用会有一种很难受的粘滞感，体验感非常差。所以客户端校验不可或缺。
4.但是，客户端常见的校验代码，会存在函数比较庞大、函数缺乏弹性、算法复用性差等问题。


技术实现要素：

5.本发明的目的在于提供一种web前端表单校验优化方法及系统，用设计模式重构代码，将算法的使用与算法的实现分离开来，优化表单校验代码，较为明显的提升开发和维护的效率，以解决客户端做表单校验时，存在函数比较庞大、函数缺乏弹性、算法复用性差等问题。
6.为实现上述目的，本发明提供如下技术方案：一种web前端表单校验优化方法，所述web前端表单校验优化方法包括以下步骤：
7.定义一个校验对象strategy；
8.在strategy中定义一个是否为空的校验单元；
9.在strategy中定义一个检测手机号的校验单元一；
10.在strategy中定义一个检测密码长度的校验单元二；
11.定义一个环境类validator。
12.优选的，校验单元检测用户是否输入手机号，将value和错误提示语传入；
13.如果value为空，则提示错误提示语并结束。
14.优选的，校验单元一检测用户输入的是否为手机号，同样将value和错误提示语传入；
15.如果用户传入的value不是手机号，则会提示错误提示语，并结束。
16.优选的，校验单元二检测用户输入密码长度是否符合设定的安全性最低要求，同样将value，最小长度和错误提示语传入；
17.如果用户传入的value长度不符合，则会提示错误提示语，并结束。
18.优选的，环境类validator接受客户的请求，随后把请求委托给相对应的校验对象，某个值发生错误，会弹出相应的错误提示语。
19.一种web前端表单校验优化系统，该系统由定义模块、检测模块、校验模块、密码查验模块以及定义模块构成；
20.定义模块，用于定义一个校验对象strategy；
21.检测模块，用于在strategy中定义一个是否为空的校验单元；
22.校验模块，用于在strategy中定义一个检测手机号的校验单元一；
23.密码查验模块，用于在strategy中定义一个检测密码长度的校验单元二；
24.定义模块，用于定义一个环境类validator。
25.优选的，所述检测模块中，校验单元检测用户是否输入手机号，将value和错误提示语传入；如果value为空，则提示错误提示语并结束。
26.优选的，所述校验模块中，校验单元一检测用户输入的是否为手机号，同样将value和错误提示语传入；如果用户传入的value不是手机号，则会提示错误提示语，并结束。
27.优选的，所述密码查验模块中，校验单元二检测用户输入密码长度是否符合设定的安全性最低要求，同样将value，最小长度和错误提示语传入；如果用户传入的value长度不符合，则会提示错误提示语，并结束。
28.优选的，所述定义模块中，环境类validator接受客户的请求，随后把请求委托给相对应的校验对象，某个值发生错误，会弹出相应的错误提示语。
29.与现有技术相比，本发明的有益效果是：
30.本发明提出的web前端表单校验优化方法及系统使用设计模式重构表单校验代码之后，消除了原程序中大片的条件分支语句，分离了校验逻辑的代码。如果需要扩展校验类型，在校验对象中新增定义即可使用；如果需要修改某个校验的实现，直接修改相应校验逻辑算法即可全局生效。这些校验规则也能在程序中任何地方复用，还能作为插件的形式，方便地移植到其他项目中。对于开发和维护都有明显的效率提升。
附图说明
31.图1为本发明方法流程图。
具体实施方式
32.为了使本发明的目的、技术方案进行清楚、完整地描述，及优点更加清楚明白，以下结合附图对本发明实施例进行进一步详细说明。应当理解，此处所描述的具体实施例是本发明一部分实施例，而不是全部的实施例，仅仅用以解释本发明实施例，并不用于限定本发明实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
33.在本发明的描述中，需要说明的是，术语“中心”、“中”、“上”、“下”、“左”、“右”、“内”、“外”、“顶”、“底”、“侧”、“竖直”、“水平”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此
外，术语“一”、“第一”、“第二”、“第三”、“第四”、“第五”、“第六”仅用于描述目的，而不能理解为指示或暗示相对重要性。
34.在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。
35.出于简明和说明的目的，实施例的原理主要通过参考例子来描述。在以下描述中，很多具体细节被提出用以提供对实施例的彻底理解。然而明显的是，对于本领域普通技术人员，这些实施例在实践中可以不限于这些具体细节。在一些实例中，没有详细地描述公知方法和结构，以避免无必要地使这些实施例变得难以理解。另外，所有实施例可以互相结合使用。
36.实施例一
37.请参阅图1，本发明提供一种技术方案：一种web前端表单校验优化方法，所述web前端表单校验优化方法包括以下步骤：
38.定义一个校验对象strategy；代码如下：var strategy＝{}；
39.在strategy中定义一个是否为空的校验单元；校验单元检测用户是否输入手机号，将value和错误提示语传入；如果value为空，则提示错误提示语并结束；代码如下：isnonempty:funtion(value,errmsg){
40.if(value＝＝＝”){
41.return errmsg；
42.}
43.}
44.在strategy中定义一个检测手机号的校验单元一；校验单元一检测用户输入的是否为手机号，同样将value和错误提示语传入；如果用户传入的value不是手机号，则会提示错误提示语，并结束；代码如下：ismobile:function(value.errmsg){
45.if(！/(^1[3|4|5|7|8][0-9]{9}$)/.test(value)){
[0046]
return errmsg；
[0047]
}
[0048]
}
[0049]
在strategy中定义一个检测密码长度的校验单元二；校验单元二检测用户输入密码长度是否符合设定的安全性最低要求，同样将value，最小长度和错误提示语传入；如果用户传入的value长度不符合，则会提示错误提示语，并结束；代码如下：
[0050][0051]
定义一个环境类validator，环境类接受用户的请求，随后把请求委托给相对应的校验对象。
[0052]
第1步，定义环境类validator，并定义cache数组来保存校验规则。
[0053]
var validator＝function(){
[0054]
this.cache＝[]
[0055]
}。
[0056]
第2步，创建add方法，用户调用时使用add方法来添加校验规则。
[0057][0058]
第3步，创建start方法，用户调用时通过start方法来开始校验。如果有错误，那么就返回错误信息(errmsg)。
[0059][0060]
第4步，用户使用。用户创建一个方法，在这个方法里通过add添加用户名、手机号和密码的校验规则，通过start方法开始校验。如果返回了errmsg，则校验未通过，弹出错误提示信息，并阻止表单提交。
[0061]
[0062][0063]
实施例二
[0064]
一种web前端表单校验优化系统，该系统由定义模块、检测模块、校验模块、密码查验模块以及定义模块构成；
[0065]
定义模块，用于定义一个校验对象strategy；
[0066]
检测模块，用于在strategy中定义一个是否为空的校验单元；校验单元检测用户是否输入手机号，将value和错误提示语传入；如果value为空，则提示错误提示语并结束；
[0067]
校验模块，用于在strategy中定义一个检测手机号的校验单元一；校验单元一检测用户输入的是否为手机号，同样将value和错误提示语传入；如果用户传入的value不是手机号，则会提示错误提示语，并结束；
[0068]
密码查验模块，用于在strategy中定义一个检测密码长度的校验单元二；校验单元二检测用户输入密码长度是否符合设定的安全性最低要求，同样将value，最小长度和错误提示语传入；如果用户传入的value长度不符合，则会提示错误提示语，并结束；
[0069]
定义模块，用于定义一个环境类validator。
[0070]
尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以
理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。