自定义基于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