客户端控件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"), nulltrue"长度验证不能为空"
12                     36"长度验证错误"
13                     );
14                 validator.AddEqual(
15                     document.getElementById("txbEqual1"), nullfalse"相等验证栏1不能为空",
16                     document.getElementById("txbEqual2"), nullfalse"相等验证栏2不能为空",
17                     "相等匹配错误"
18                     );
19                 validator.AddType(
20                     document.getElementById("txbEmail"), nulltrue"Email验证栏不能为空"
21                     "client.email"null"Email格式错误"
22                     );
23                 validator.AddType(
24                     document.getElementById("txbDigit"), nulltrue"数字验证栏不能为空"
25                     "client.digit"null"数字格式错误"
26                     );
27                 validator.AddType(
28                     document.getElementById("txbInt"), nulltrue"整数验证栏不能为空"
29                     "client.int"null"整数格式错误"
30                     );
31                 validator.AddType(
32                     document.getElementById("txbUInt"), nulltrue"正整数验证栏不能为空"
33                     "client.uint"null"正整数格式错误"
34                     );
35                 validator.AddType(
36                     document.getElementById("txbDate"), nulltrue"日期验证栏不能为空"
37                     "client.date"null"日期格式错误"
38                     );
39                 validator.AddType(
40                     document.getElementById("txbTime"), nulltrue"时间验证栏不能为空"
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里面继续。

posted @ 2005-09-20 09:01  海南K.K  阅读(1934)  评论(0编辑  收藏  举报