客户端统一验证JavaScript函数库及示例源码

1.引言 几乎所有的Web项目开发都需要客户端验证，尤其是JavaScript的使用，JS结合Html和CSS占据了网页展现市场，不管采用什么技术我们在网页看到的东西最终生成都是这些代码所表示含义。 Web应用如此广泛，其中客户端与服务端交互时所消耗的资源及响应时间，频繁的刷新页面使得人机交互体验极为不好，而对每个页面使用客户端处理技术无疑又加大项目开发周期，脚本调试及修改维护的工作量将占用大量的开发时间，验证控件须对每个控件的元素进行设置且会对页面整体的布局带来影响，占据着页面布局空间的位置，综合考虑及项目整体风格的统一等多种因素中，总得有个折中的考虑。ChkInputs.js应运而生，使用它不需要编写多少代码，只需对验证元素简单配置一下即可，使用方便，也不会影响页面的布局，并可以精确判断客户端输入框的长度、必填、数据类型(整数型、浮点型、字母型、数字字母混合型)和下拉框等，及对需要验证的控件分组验证等。同时提供许多常用的公共函数如类似C#中Trim()方法等。 使用ChkInputs.js，会将光标定位到验证不通过的控件上，若控件上有文本同时将其文本选中高亮度显示，不会刷新页面，只有当所有验证通过时才会将结果提交到后台处理，可以使用鼠标或纯键盘及相结合的方式来操作。 2.ChkInputs.js的使用： ChkInputs.js的使用极为方便，你可以直接将自定义属性像这样添加在Web页面， <input name="TextBox1" type="text" id="TextBox1" chinese="测试输入框" maxsize="6" nullable="no" datatype="number" /> 也可以在后台代码里这样添加，如在.net下.aspx.cs代码里这样写： this.TextBox1.Attributes.Add("chinese", "测试输入框");//控件名称 this.TextBox1.Attributes.Add("maxsize", "6");//控件接受的字符长度大小 this.TextBox1.Attributes.Add("nullable", "no");//不可为空，默认可为空 this.TextBox1.Attributes.Add("datatype", "number");//控件数据类型 两者代码是一样的，不过一般在后台代码(.cs)写好写，因为这样写有利于项目的维护修改。当页面的控件元素都设置好时，客户端代码通常只需这样写即可： 首先在页面head区域内定义一个这样的JS函数 <script language="javascript"> //例一，全部验证，比较常用,基本满足一般所有的验证功能 function CheckInfoAll() { return verifyAll(document.getElementById("form1")); } </script> 然后在需要验证的按钮上这样写 OnClientClick="return CheckInfoAll();" 或者使用onfocus ="rerurn CheckInfoAll();"或 onmousedown="rerurn CheckAll();" onkeydown="if(event.keyCode == 13){rerurn CheckAll();}" 后面的各种使用根据你的偏好选择使用。 除此之外，还可以指定验证及分组验证。指定验证如： return verifyInput(document.getElementById("TextBox1")); 分组验证同一个页面的元素最多可分六组(够用的了)，各组之间互不影响，示例代码如下： //验证页面所属组group1="group1"的元素 function CheckAllGroup1() { return verifyAllByGroup1(document.getElementById("form1"),"group1") } 其它更多的使用详细代码可见附件示例代码所示。 3.ChkInputs的结构及原理： 这里先简要介绍一下文档对象模型（DOM）与树状结构，DOM可以让HTML元素与其属性，利用JS程序来控制。有两种方法将JS程序用于文档的元素：通过元素的名称和通过树状结构。这两个方法并非独立的，可能同时存在于相同的脚步中。 基本上对象是可以用脚步控制，或者可编程元素，拥有属性(Property)、事件（Event）以及方法（Method）。JS把所有网页元素、屏幕上可见的画面区域，以及浏览器的窗口都当成可编程的对象。所以，只要通过程序，你就可以控制这些对象的属性，执行其方法，以及捕捉这些事件等。 对象都有属性，有的属性就是对象本身。试想将人体当成对象，如果以分级的方式来看，人体对象有个躯干属性，而躯干有个心脏属性，心脏里还有心室属性。这些身体的零件都属于属性，而且全部都与人体对象之间有逻辑化的层次关系。 同样地，任何JavaScript这类面向对象程序语言的元素，也都是对象。这些对象都通过分级系统，作为主体的一部分。举例来说，浏览器窗口是一个对象，包含了几个文档对象，这些对象进而形成其他对象，依此类推，这个分级会变得很长。 由于面向对象的本质，JavaScript允许对象、对象的属性以及其事件都通过脚本来控制。也因为大部分网页浏览器都支持JavaScript，所以它是网页设计时最适合的客户端语言。ChkInputs.js就是通过JavaScript并结合DOM对象的自定义的属性而编写的。当使用时，ChkInputs.js会自动遍历DOM的元素，逐个检测直到所以验证完毕为止，由于事件触发在客户端响应非常及时，不会刷新页面。 该函数库提供许多函数库，就不一一列举了，这里举几个代表性的函数例子加以解释说明，先介绍一个频率用的最多的函数，如函数verifyAll，定义如下： function verifyAll(myform) {…………..} 参数myform指代验证的表单，可以比作验证树DOM的根，之后的JavaScript会遍历所有元素(elements)，逐个检验，若没有设置验证则直接跳过，若有一个验证不通过，都不会将表单提交，并将光标定位到该处(focus())，若有文本同时高亮度选中该文本(select())。同样其他函数的原理也是类似。 另外，其他函数如数据长度的验证，是验证内容的实际字节的长度，即汉字两个字节英文及数字两个字节，判断依据ASCII值，计算机在设计字符存储的时候就是超过一个字节的ASCII字符都是以两个字节存放的。同时JavaScript提供了Scripting. FileSystemObject对象，GetFileSize(…)可直接取得待上传文件的字节大小，但也有限制就是客户端浏览须启用ActiveX插件，若没有启用时，会提示用户按步骤设置。CancelClientEvent()是使用事件冒泡阻止了事件的继续执行，同时设置返回值，最终成功阻止事件的继续往后执行，当在客户端触发一要回发的按钮事件是，想在程序里结束让其继续执行时，以往则不是很好处理，如Enter键，这里此方法则大显用武之地。 附有ChkInputs.js完整的源代码及实例代码。