客户端控件Javascript验证类客户端控件Javascript验证类 javascritp一直是web开发的利器,在Ajax逐渐流行以后,javascript又更焕发活力。但是别误会,本文不讨论如何用
javascript实现Ajax,而仅仅讨论javascript的常用功能-如何用javascript编写更高效和易用的客户端控件验证类。 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),但这也带来了很多问题。 2、使用封装的javascript验证类进行验证: 1 <script language="javascript" src="clientvalidator.js"></script>
读者可以发现上面javascript代码所验证的情况是非常极端的,总共了涉及9种验证,包括是否为空、长度、相等、email、数字、整数、正
整数、时间和日期格式的验证。使用者通过AddXXX把验证项加到JSClientValidator的验证队列中,然后调用
JSValidateClient::RunValidate()进行统一认证,当验证错误时,可提示验证错误信息,并且focus到出错的控件上。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> 这 种验证模式解决了“函数式”验证模式的缺点,为了支持更多格式的验证,JSClientValidator设计成支持自定义正则式验证和自定义函数验证。 当遇到新的验证格式要求时,程序员只要编写响应的正则表达式注册到JSClientValidator中就可以了,不用编写额外的验证函数;当然你也可以 用自定的函数注册到JSClientValidator中,进行验证,只要函数定义遵守JSClientValidator的自定义函数定义接口就可以 了。 |
|
来自: 小朋 > 《Html/CSS/Javascript》