ChkInputs.js 客户端统一验证JavaScript函数库

ChkInputs.js 客户端统一验证JavaScript函数库
 
1、引言
几乎所有的Web应用开发都需要用到客户端验证，客户端验证普遍使用JavaScript编写，JavaScript结合Html和CSS几乎占据了整个网页开发市场，不管采用什么技术，我们

在最终在浏览器中看到的内容都是由这些代码组合而成。
Web应用的交互中，用户通过客户端浏览器向服务端发送请求，在网络进行数据传输会耗费一定时间，从而延长了系统响应时间，频繁地提交请求会导致页面的的刷新次数

增多，从而降低了用户体验，通过在页面中加入客户端脚本可以避免与服务器端进行的不必要交互。然而，为每个页面都增加客户端处理代码无疑又加大项目开发周期和维

护成本，众所周知，客户端脚本调试是相当耗费时间的。由程序设计器或第三方软件厂商提供的验证控件，需对每个控件的元素进行设置，会占据着页面的部分空间，从而

会影响页面的整体布局。
综合考虑以上内容，结合项目整体风格的一致性等要求，需要选择一个折中方案。一个通用的客户端验证函数库ChkInputs.js便应运而生，Web开发中，该函数库能很大程

度地减少开发的代码量，使用也非常方便，只需对验证元素简单配置一下即可。此外，加入该函数库的代码也不会影响页面的布局，能确保整个系统的界面风格一致性。
该函数库提供的验证功能包括：精确判断客户端输入框的长度、必填项、数据类型(整数型、浮点型、字母型、数字字母混合型)，验证下拉框的选择内容，以及对需要验证

的控件进行分组验证等。函数库同时提供许多常用的公共函数，如类似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");//控件数据类型
以上的两段代码完成了相同功能，对控件的输入内容增加了相应的约束，相比而言，考虑代码的可维护性，最好采用第二种方式。当页面的控件元素都设置好时，在前台页

面中只需加入少量代码，具体内容如下：
 首先在页面的head区域内定义一个JS函数：
<script language="javascript">
     //例一，全部验证，比较常用,基本满足一般所有的验证功能
     function CheckInfoAll()
     {
         return verifyAll(document.getElementById("form1"));
     }
</script>
 然后在需要验证的按钮上添加相应的客户端事件函数：
OnClientClick="return CheckInfoAll();"
 根据实际需要，也可以使用onfocus，onmousedown，onkeydown等事件，代码分别如下所示：
onfocus ="rerurn CheckInfoAll();"
οnmοusedοwn="rerurn CheckInfoAll ();"
οnkeydοwn="if(event.keyCode == 13){rerurn CheckInfoAll ();}"
 除此之外，我们还可以进行指定验证和分组验证。指定验证如下：
return verifyInput(document.getElementById("TextBox1"));
 可以对同一个页面的元素进行分组验证，但最多可分六组(对于一般系统两组已经够用)，各组之间的验证互不影响，示例代码如下：
//验证页面所属组group1="group1"的元素
function CheckAllGroup1()
{
 return verifyAllByGroup1(document.getElementById("form1"),"group1")
}
函数库提供的其它功能在公司知识库中的验证函数库示例代码中可以找到。
示例及源代码下载地址：
http://download.csdn.net/source/1601071
http://download.csdn.net/source/1594885
http://download.enet.com.cn/html/013492009082101.html