客户端控件Javascript验证类
2005-09-20
javascritp一直是web开发的利器，在Ajax逐渐流行以后，javascript又更焕发活力。但是别误会，本文不讨论如何用javascript实现Ajax，而仅仅讨论javascript的常用功能－如何用javascript编写更高效和易用的客户端控件验证类。
通过使用javascript在客户端验证输入值的有效性，能够有效的保证数据的有效性，并减轻了服务器端验证给服务器带来的负担。下面介绍两种验证模式。
通常的验证模式是“函数式”验证，由两部分组成：
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、页面中调用验证函数进行验证
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进行验证的代码模式：
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里面继续。