客户端控件Javascript验证类

客户端控件Javascript验证类

2005-09-20

---

javascritp一直是web开发的利器，在Ajax逐渐流行以后，javascript又更焕发活力。但是别误会，本文不讨论如何用javascript实现Ajax，而仅仅讨论javascript的常用功能－如何用javascript编写更高效和易用的客户端控件验证类。

通过使用javascript在客户端验证输入值的有效性，能够有效的保证数据的有效性，并减轻了服务器端验证给服务器带来的负担。下面介绍两种验证模式。

通常的验证模式是“函数式”验证，由两部分组成：

1、验证函数库：

 1 /*包括在validator.js文件中*/
 2 /*****************************************************************************
 3 函数名称：fucCheckNull
 4 函数功能：检查是否为空
 5 参数    ：strTemp  要检查的字符串
 6 参数    ：strAlertMsg 要显示的提示信息
 7 返回    ：消息提示框  true/false
 8 日期    ：2003-10-17
 9 作者    ：xxx
10 修改人  ：
11 修改日  ：
12 ******************************************************************************/
13 function fucCheckNull(strTemp,strAlertMsg)
14 {
15     strTemp=strTemp.replace(/^(\s)*|(\s)*$/g,"");//去掉字符串两边的空格
16     if (strTemp.length<1)
17             {
18                 alert(strAlertMsg);
19                 return false;
20             }
21 }

2、页面中调用验证函数进行验证

 1 <SCRIPT language=javascript 
 2 src＝"validator.js"></SCRIPT>
 3         <script language="javascript" type="text/javascript">
 4         <!--
 5         //标识页面是否已提交
 6         var subed = false;
 7         
 8         function check()
 9         {        
10             //验证是否重复提交
11             if (subed == true)
12             {
13                 alert("信息正在发送给服务器，请不要重复提交信息！");
14                 return false;
15             }
16             
17             //验证活动名称是否为空
18             if(fucCheckNull(document.Add.txbMaName.value,"活动名称不能为空")==false)
19             {
20                return false;
21             }
22             
23             //验证活动名称字符不超过30
24             if(fucCheckLength(document.Add.txbMaName.value,60,"输入的活动名称长度超出60个字符")==false)
25             {
26                return false;
27             }
28             
29             //验证活动时间是否为空
30             if(fucCheckNull(document.Add.dtMaTime_txbDate.value,"活动时间不能为空")==false)
31             {
32                return false;
33             }
34             
35             //验证活动地点是否为空
36             if(fucCheckNull(document.Add.txbMaPlace.value,"活动地点不能为空")==false)
37             {
38                return false;
39             }
40             //验证活动介绍上传是否为空
41             if(fucCheckNull(document.Add.InputFileOne.value,"活动介绍不能为空")==false)
42             {
43                return false;
44             }
45             
46             subed == true;
47          }      
48         -->
49         </script>

这种方式的优点是使用简单，容易理解，并且使用函数库也容易扩充，当有新增验证需要的时候只要编写响应的验证函数就可以了，比如说fucCheckEmail（strEmail, strAlertMessage），但这也带来了很多问题。
（1）函数库日益庞大：因为验证函数库以函数增量的方式来满足不断增加的验证需求。
（2）页面仍需不少编码：大量的if, return, focus；
（3）页面逻辑结构差：一段非常简单的代码却包含了多个return；
（4）不便应用于内容管理模板

2、使用封装的javascript验证类进行验证：
下面代码演示了在页面中使用JSClientValidator进行验证的代码模式：

 1 <script language="javascript" src="clientvalidator.js"></script>
 2         <script language="javascript">
 3             function Validate()
 4             {
 5                 var validator = new ClientValidator();
 6                 
 7                 validator.AddEmpty(
 8                     document.getElementById("txbEmpty"), null, "为空验证栏不能为空");
 9                 
10                 validator.AddLength(
11                     document.getElementById("txbLength"), null, true, "长度验证不能为空", 
12                     3, 6, "长度验证错误"
13                     );
14                 validator.AddEqual(
15                     document.getElementById("txbEqual1"), null, false, "相等验证栏1不能为空",
16                     document.getElementById("txbEqual2"), null, false, "相等验证栏2不能为空",
17                     "相等匹配错误"
18                     );
19                 validator.AddType(
20                     document.getElementById("txbEmail"), null, true, "Email验证栏不能为空", 
21                     "client.email", null, "Email格式错误"
22                     );
23                 validator.AddType(
24                     document.getElementById("txbDigit"), null, true, "数字验证栏不能为空", 
25                     "client.digit", null, "数字格式错误"
26                     );
27                 validator.AddType(
28                     document.getElementById("txbInt"), null, true, "整数验证栏不能为空", 
29                     "client.int", null, "整数格式错误"
30                     );
31                 validator.AddType(
32                     document.getElementById("txbUInt"), null, true, "正整数验证栏不能为空", 
33                     "client.uint", null, "正整数格式错误"
34                     );
35                 validator.AddType(
36                     document.getElementById("txbDate"), null, true, "日期验证栏不能为空", 
37                     "client.date", null, "日期格式错误"
38                     );
39                 validator.AddType(
40                     document.getElementById("txbTime"), null, true, "时间验证栏不能为空", 
41                     "client.time", null, "时间格式错误"
42                     );
43                 
44                 
45                 if (validator.RunValidate() == true)
46                 {
47                     window.alert("校验成功");
48                 }
49                 else
50                 {
51                     window.alert(validator.lastErrorMessage);
52                     
53                     validator.lastErrorControl.focus();
54                 }
55             }
56         </script>

读者可以发现上面javascript代码所验证的情况是非常极端的，总共了涉及9种验证，包括是否为空、长度、相等、email、数字、整数、正整数、时间和日期格式的验证。使用者通过AddXXX把验证项加到JSClientValidator的验证队列中，然后调用JSValidateClient::RunValidate()进行统一认证，当验证错误时，可提示验证错误信息，并且focus到出错的控件上。

这种验证模式解决了“函数式”验证模式的缺点，为了支持更多格式的验证，JSClientValidator设计成支持自定义正则式验证和自定义函数验证。当遇到新的验证格式要求时，程序员只要编写响应的正则表达式注册到JSClientValidator中就可以了，不用编写额外的验证函数；当然你也可以用自定的函数注册到JSClientValidator中，进行验证，只要函数定义遵守JSClientValidator的自定义函数定义接口就可以了。

有关于JSClientValidator的详细说明，我将在后续的post里面继续。