自定义基于 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:
$.brady.validator.initFormValidator
$.brady.validator.validateForm
同时,工具支持几种预定义的验证器:
required:不能为空
checked:radio/checkbox 必选
digit:必须是 0-9 的字符串