客户端控件Javascript验证类
客户端控件Javascript验证类
2005-09-20
javascritp一直是web开发的利器,在Ajax逐渐流行以后,javascript又更焕发活力。但是别误会,本文不讨论如何用javascript实现Ajax,而仅仅讨论javascript的常用功能-如何用javascript编写更高效和易用的客户端控件验证类。
通过使用javascript在客户端验证输入值的有效性,能够有效的保证数据的有效性,并减轻了服务器端验证给服务器带来的负担。下面介绍两种验证模式。
通常的验证模式是“函数式”验证,由两部分组成:
1、验证函数库:
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里面继续。
转载于:https://www.cnblogs.com/chwkai/archive/2005/09/20/240126.html
客户端控件Javascript验证类相关推荐
- 一起学asp.net基础文章二 服务器控件、客户端控件和html表单控件
首先解释一下这两个控件个概念. 所谓服务器控件 就是微软官方提供的如 textbox label dropdownlist等可以直接添加事件,属性 操作方式和winform类似的.net控件. 1.使 ...
- 客户端控件调用服务器的参数
如果你用客户端控件那里调用一些服务器的东西....... <span οnclick="javascript:window.open('<%= url %>')" ...
- 控件注册验证机制探索 License
先给大家介绍一下Silverlight客户端控件的使用情景.一般来说,Silverlight客户端控件会****给开发Silverlight程序 的公司,他们是控件的购买者.他们开发的程序中会 ...
- 后台取得客户端控件的值(ListBox)
由于没有web编程经验,开始用的是服务端ListBox,在客户端通过脚本改变值后发到服务端后,发现客户端的操作没有起作用,请教别人,说用客户端控件,然后选作为服务端控件运行,还是不行,据闻.net20 ...
- 背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar
原文:背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar [源码下载] 背水一战 Windows 10 (40) - 控件(导航类): AppBar, ...
- 背水一战 Windows 10 (61) - 控件(媒体类): InkCanvas 涂鸦编辑
背水一战 Windows 10 (61) - 控件(媒体类): InkCanvas 涂鸦编辑 原文:背水一战 Windows 10 (61) - 控件(媒体类): InkCanvas 涂鸦编辑 [源码 ...
- 背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox
背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox 原文:背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox [源码 ...
- asp.net如何取得纯客户端控件的值
例一:纯客户端控件 <input name="edisundong" type="text"> 在服务器端取得的方法 string strvalue ...
- 背水一战 Windows 10 (41) - 控件(导航类): Frame
原文:背水一战 Windows 10 (41) - 控件(导航类): Frame [源码下载] 背水一战 Windows 10 (41) - 控件(导航类): Frame 作者:webabcd 介绍 ...
最新文章
- Android开机启动流程初探
- s5720找mac 华为交换机_【基础】交换机堆叠模式
- 计算机图形学在GIS中的应用,GIS在交通中的应用与发展
- mysql使用MRG_MyISAM(MERGE)实现水平分表
- MapReduce-流量统计求和-步骤分析
- 戴尔-EMC将至强Phi服务器与Tesla GPU纳入PowerEdge
- Nodejs nmp 常用命令
- java访问mysql_Java访问数据库
- IP子网编址和无类域路由CIDR
- Atitit enhance dev effect提升开发效率的十大原理与方法v3 u66.docx Atitit enhance dev effect提升开发效率的十大原理与方法v2 u66.do
- 高清图片免费下载网站
- 切图工具:又一个处理大图的例子
- Java实现动态切换IP的方法(一)
- 最新图解 FileZilla Server + FlashFXP 快速傻瓜式搭建FTP服务 1
- WinRAR去广告:只需六步,教你去除WinRAR的广告
- OFDM子载波正交特性matlab,OFDM的正交性(转)
- 基于SDN的访问控制模块实现
- Android椭圆offon按钮,如何使椭圆闪烁?
- html怎么读取lrc文件,lrc文件怎么打开?lrc是什么文件?
- word段落居中的快捷键_word里段落的快捷键 WORD中段落的快捷键是什么
热门文章
- Android开发笔记(十四)圆弧进度动画CircleAnimation
- Python 图形 GUI 库 pyqtgraph
- 处理 ODBC, OLE DB, 和 SQL Server .NET Provider 中的异常
- excel去重_Python 轻松搞定 Excel 常用的 20 个操作
- C程序设计语言现代方法02:C语言基本概念
- python安装django模块_在您的(Django)项目中使用setup.py
- java 删除zip文件_Java--字节缓冲流的效率有多高?测试一下
- 配置 MySQL 服务器容器
- 2017IEC计算机第二次作业
- 012-centos6.5配置静态ip