本文介绍了基于jQuery实现的客户端表单验证工具，该工具简化了JavaScript表单验证的复杂性，允许开发者通过HTML属性配置验证规则。支持预定义的验证器如：required、digit、email等，并提供了在HTML中配置验证的方法，增强了用户体验。
自定义基于jQuery的客户端表单验证工具的使用说明
张国敬
1. 概述
做健壮的可交互的web应用时，离不开表单输入数据的校验工作，不对输入的数据做验证，很难保证程序不出现错误。表单数据验证一般分为客户端验证和服务器端验证。客户端验证是利用Javascript/DOM技术，对表单域输入的数据的有效格式做检查，然后动态给出相关的结果。这种验证方式非常灵活，表单数据无需提交到服务器即可完成验证工作，用户的交互性很高。
传统的使用Javascript进行表单域验证编程量很大，过程处理繁琐，对每一个需要验证的表单项都要重复大量的验证代码，这种方式开发效率极低且容易出错。因此，为了提高开发的效率，有必要针对这种验证方法进行改进。我这里设计了一个简单的javascript客户端验证工具，在页面中只需要对要进行验证的表单(form)及其所属的表单域对象(input)进行属性声明，即可完成配置，基本不需要手工书写javascript代码即可完成验证工作。
2. 验证工具介绍
我定义的这个工具是基于jQuery框架扩展而来，使用时必须先引入jQuery框架。两个文件分别是：jquery-1.4.2.min.js和jquery.brady.js。
对于自定义的验证工具的API，放置在命名空间$.brady.validator下面，有两种使用方法，一种是javascript编程调用,另一种是在html中配置配置，本文主要讲解后一种用法。
通过html标签配置的客户端验证，主要涉及到两个API：
l $.brady.validator.initFormValidator
l $.brady.validator.validateForm
同时，工具支持几种预定义的验证器：
l required:不能为空
l checked:radio/checkbox必选
l digit:必须是0-9的字符串
l letter:必须是字母
l digitOrLetter:是数字或字母
l number:是一个有效的整数或浮点数
l cellphone:必须是一个手机号码
l telephone:必须是一个固定号码
l phone:必须是一个电话号码（手机或固话号码）
l url:必须是一个URL
l email:必须是一个Email地址
l ip:必须是一个有效的IP地址
l date:必须是一个日期型字符串
l personId:是一个中国的身份证号码
l minLength:最小长度的字符串
l maxLength:最大长度的字符串
l range:在指定范围内的整数
l maxBytes:一个最大字节数的字符串
l regex:指定一个必须满足的正则表达式
使用使用时，只需要在html标记中按一定格式配置即可完成验证。
3. 验证工具使用说明
分两种情况来说明：
A）使用<input type=”submit”/>或<input type=”image”/>来提交的表单：
l 表单中使用validate=”true”来标明需要进行验证，如：<form action=”” validate=”true”></form>
l 在页面加载事件中，对需要验证的表单进行初始化，如：
jQuery(function($) { //DOM页面载入事件
$.brady.validator.initFormValidator("form1"); //初始化表单校验处理，form1是form的id
});
l 对于每一个需要验证的表单域，则通过validator/errmsg/errpanel/required/param1/param2几个属性进行配置，其中前3个是必填项。
n validator:指定前面介绍的自定义验证器
n errmsg:指定一个验证不通过要显示的提示信息
n errpanel:用来显示提示信息的容器的id，如<p>,<div>,<span>等
n required:可选属性，指定该项的内容是不是必须输入的，值为true或false
n param1/param2：可选属性，向某些验证器传递参数，比如regex验证器需要指定一个正则表达式做为参数，如果需要一个参数，则只需指定param1即可，需要2个参数要使用param2
下面举例说明：
n email输入项，假定其值不是必须输入的，使用email验证器
<input type="text" id="email" required="false" validator="email" errmsg="不是一个正确的邮箱格式" errpanel="errp1" />
n 密码输入项，假定其值是必须输入的，且其值必须是6位，字母开头，可以包含数字。使用regex验证器，通过param1传入一个正则表达式参数
<input type="text" id="password" required="true" validator="regex" param1="^[a-zA-Z][a-zA-Z0-9]{5}$" errmsg="密码不能为空且必须是字母和数字的组合，必须是6位，必须以字母开头" errpanel="errp1" />
B）通过javascript函数来处理的表单：
具体用法基本同A)，只是不需要在form中指定validate=”true”，也不需要对该表单进行初始化，但在需要处理表单数据时，通过javascript调用表单验证函数，传入指定的form的id，如：
function doCheckForm(formId) {
var ret = $.brady.validator.validateForm(formId);
if(ret) {
alert("表单数据验证通过，你可以继续处理表单请求了");
//处理表单数据提交的动作
}
}
4. 其它
该工具支持IE/Firefox/Chrome浏览器，需要jQuery1.3或更高版本。
具体使用方法可以参考demo.html文件。
附1： jquery.brady.js
附2: demo.html
484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
