客户端控件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里面继续。

转载于:https://www.cnblogs.com/chwkai/archive/2005/09/20/240126.html

客户端控件Javascript验证类相关推荐

  1. 一起学asp.net基础文章二 服务器控件、客户端控件和html表单控件

    首先解释一下这两个控件个概念. 所谓服务器控件 就是微软官方提供的如 textbox label dropdownlist等可以直接添加事件,属性 操作方式和winform类似的.net控件. 1.使 ...

  2. 客户端控件调用服务器的参数

    如果你用客户端控件那里调用一些服务器的东西....... <span οnclick="javascript:window.open('<%= url %>')" ...

  3. 控件注册验证机制探索 License

        先给大家介绍一下Silverlight客户端控件的使用情景.一般来说,Silverlight客户端控件会****给开发Silverlight程序 的公司,他们是控件的购买者.他们开发的程序中会 ...

  4. 后台取得客户端控件的值(ListBox)

    由于没有web编程经验,开始用的是服务端ListBox,在客户端通过脚本改变值后发到服务端后,发现客户端的操作没有起作用,请教别人,说用客户端控件,然后选作为服务端控件运行,还是不行,据闻.net20 ...

  5. 背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar

    原文:背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar [源码下载] 背水一战 Windows 10 (40) - 控件(导航类): AppBar, ...

  6. 背水一战 Windows 10 (61) - 控件(媒体类): InkCanvas 涂鸦编辑

    背水一战 Windows 10 (61) - 控件(媒体类): InkCanvas 涂鸦编辑 原文:背水一战 Windows 10 (61) - 控件(媒体类): InkCanvas 涂鸦编辑 [源码 ...

  7. 背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox

    背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox 原文:背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox [源码 ...

  8. asp.net如何取得纯客户端控件的值

    例一:纯客户端控件 <input name="edisundong" type="text"> 在服务器端取得的方法 string strvalue ...

  9. 背水一战 Windows 10 (41) - 控件(导航类): Frame

    原文:背水一战 Windows 10 (41) - 控件(导航类): Frame [源码下载] 背水一战 Windows 10 (41) - 控件(导航类): Frame 作者:webabcd 介绍 ...

最新文章

  1. Android开机启动流程初探
  2. s5720找mac 华为交换机_【基础】交换机堆叠模式
  3. 计算机图形学在GIS中的应用,GIS在交通中的应用与发展
  4. mysql使用MRG_MyISAM(MERGE)实现水平分表
  5. MapReduce-流量统计求和-步骤分析
  6. 戴尔-EMC将至强Phi服务器与Tesla GPU纳入PowerEdge
  7. Nodejs nmp 常用命令
  8. java访问mysql_Java访问数据库
  9. IP子网编址和无类域路由CIDR
  10. Atitit enhance dev effect提升开发效率的十大原理与方法v3 u66.docx Atitit enhance dev effect提升开发效率的十大原理与方法v2 u66.do
  11. 高清图片免费下载网站
  12. 切图工具:又一个处理大图的例子
  13. Java实现动态切换IP的方法(一)
  14. 最新图解 FileZilla Server + FlashFXP 快速傻瓜式搭建FTP服务 1
  15. WinRAR去广告:只需六步,教你去除WinRAR的广告
  16. OFDM子载波正交特性matlab,OFDM的正交性(转)
  17. 基于SDN的访问控制模块实现
  18. Android椭圆offon按钮,如何使椭圆闪烁?
  19. html怎么读取lrc文件,lrc文件怎么打开?lrc是什么文件?
  20. word段落居中的快捷键_word里段落的快捷键 WORD中段落的快捷键是什么

热门文章

  1. Android开发笔记(十四)圆弧进度动画CircleAnimation
  2. Python 图形 GUI 库 pyqtgraph
  3. 处理 ODBC, OLE DB, 和 SQL Server .NET Provider 中的异常
  4. excel去重_Python 轻松搞定 Excel 常用的 20 个操作
  5. C程序设计语言现代方法02:C语言基本概念
  6. python安装django模块_在您的(Django)项目中使用setup.py
  7. java 删除zip文件_Java--字节缓冲流的效率有多高?测试一下
  8. 配置 MySQL 服务器容器
  9. 2017IEC计算机第二次作业
  10. 012-centos6.5配置静态ip