JSClientValidator-客户端javascript验证新模式

JSClientValidator-客户端javascript验证新模式

2005-09-21

 

---

 

在客户端控件javascript验证模式中，我已经介绍了当前大量在web上用于客户端控件验证的函数式验证模式，也简单的提出了使用封装的javascript类验证的方法。这次，我要向大家介绍的是如何使用JSClientValidator类进行客户端控件验证、JSClientValidator的设计思想、优点和进行自动化验证的设想。

内容
JSClientValidator的设计思想
如何使用JSClientValidator进行客户端控件验证
自动javascript验证设想

 

JSClientValidator.js下载：/Files/chwkai/ClientValidator.rar

---

JSClientValidator的设计思想

JSClientValidator类是为了更简化script验证代码而编写的。首先来看一段经典的函数式javascript验证代码段：

 1 <script language="javascript">
 2  <!--
 3     function ValidateInput()
 4     {
 5         // fucCheckNull为判断输入字符串是否为空的函数
 6          if (fucCheckNull(document.getElementById("txbName").value) == true)
 7         {
 8             window.alert("请输入用户名");
 9             document.getElementById("txbName").focus;
10 
11             return false;
12         }
13 
14         //其他控件验证代码..
15          
16         return true;
17     }
18 -->
19 </script>

在处理不同的页面时，开发人员必须在每个页面都copy这样的代码。在上一篇文章中，我已经说过这样的模式不仅要重复的编写类似的验证代码，代码段结构差，而且为了实现错误提示，必须在每个if段添加上focus和alert代码。

下面是一段采用JSClientValidator类进行验证的代码段，可以看出验证类的设计思想

 1 <script language="javascript">
 2         <!--
 3             function ValidateInput()
 4             {
 5                 var validator = new ClientValidator();
 6                 var bValid = false;
 7                 
 8                 // 验证名称是否为空
 9                 validator.AddEmpty(document.getElementById("txbName"), null, "名称不能为空");
10                 
11                 // 验证备注是否为空，且长度是否合法
12                 validator.AddLength(
13                     document.getElementById("txbRemark"), null, true, "备注不能为空",
14                     10, 300, "备注长度应在10－300字内"
15                     );
16                 
17                 bValid = validator.RunValidate();
18                 
19                 if (bValid == false)
20                 {
21                     // 提示错误信息
22                     window.alert(validator.lastErrorMessage);    
23                     // 定位自出错控件
24                     validator.lastErrorControl.focus();
25                 }
26             }
27             -->
28         </script>

通过AddXXX方法，把相应类型的验证项加到验证队列中，最后运行RunValidate()进行批量认证，返回控件验证是否合法。并且由lastErrorControl和lastErrorMessage可以得到出错的控件和相应的错误信息。


通过对开发过程中的javascript验证代码进行统计，最常进行的验证是“xxx输入值不能为空”，而且其他格式的校验通常是以“非空”为前提的。因此，JSClientValidator中保持着两个Array，并且把“不能为空”验证（简称EmptyValidate）作为第一项验证。

1、控件数组：保存着所有待验证的控件

 1 // 控件数组
 2 this.Controls = new Array();
 3 
 4 
 5 /**
 6 * 控件类
 7 * 
 8 * @param ctl        控件对象
 9 * @param strValue    控件值，为null时由控件对象的value属性获取
10 * @param bCheckEmpty    是否进行为空判断
11 * @param strErrorMessage为空时提示的错误信息，bCheckEmpty==false时可为null
12 *
13 * 创建人：陈文凯
14 * 创建日期：2005年9月12日
15 * 修改人：
16 * 修改日期：
17 **/
18 function ControlItem(ctl, strValue, bCheckEmpty, strErrorMessage)
19 {
20     this.Control = ctl;
21     this.Value = (strValue == null ? ctl.value : strValue);
22     this.CheckEmpty = bCheckEmpty;
23     this.Message = strErrorMessage;
24 }
25 
26 /**
27 * 添加控件对象
28 * 
29 * @param ctl            控件对象
30 * @param strValue        控件输入值
31 * @param bCheckEmpty    是否执行输入值非空校验
32 * @param strErrorMessage当输入值为空时的提示信息
33 * @return        控件对象在控件数组中的下标
34 *
35 * 创建人：陈文凯
36 * 创建日期：2005年9月12日
37 * 修改人：
38 * 修改日期：
39 **/
40 function AddControl(ctl, strValue, bCheckEmpty, strErrorMessage)
41 {
42     var index = this.Controls.length;
43     var ctlItem = new ControlItem(ctl, strValue, bCheckEmpty, strErrorMessage);
44     this.Controls[index] = ctlItem;
45     
46     return index;
47 }

当执行验证时，先遍历Control数组，对那些需要进行EmptyValidate验证的控件进行验证。若验证通过，在执行其他各种验证项的验证。

2、验证项数组：保存控件的验证方式的数组，下面的代码演示了可接受的验证方式。注意，其中还有一种验证项类型为“自定义验证项”，可以指定验证函数进行验证。类型验证项（Type）可接受自定义的正则式为验证格式。通过这两种验证类型＋内置的验证类型（Empty，相等，长度）等，已经能够覆盖web页面上常用的验证方式。
（1）验证方式：

 1 /**
 2     * 验证方式枚举型定义
 3     *
 4     **/
 5     function ValidateTypeEnum()
 6     {
 7         // 判断是否为空
 8         this.Empty = "client.empty";
 9         
10         // 判断是否相等
11         this.Equal = "client.equal"
12         
13         // 判断长度是否符合要求
14         this.Length = "client.length";
15         
16         // 判断是否符合类型（包括以下定义的数字－时间）
17         this.Type = "client.Type";
18         
19         // 判断是否为数字
20         this.Digit = "client.digit";
21         
22         // 判断是否整数
23         this.Integer = "client.int";
24         
25         // 判断是否正整数
26         this.Unsigned = "client.uint";
27         
28         // 判断是否email
29         this.Email = "client.email";
30         
31         // 判断是否日期，格式为yyyy-MM-dd
32         this.Date =    "client.date";
33         
34         // 判断是否为时间，格式为yyyy-MM-dd hh:mm:ss
35         this.Time =    "client.time";
36         
37         // 自定义验证项
38         this.Extend = "client.extend";
39&nb%