当前位置: 首页 > 中文手册 > jQuery Validator 表单验证框架快速入门

jQuery Validator 表单验证框架快速入门

jQuery Validator 是一个简单易用、功能强大的基于jQuery的表单验证框架。其Github开源网址为:https://github.com/CodePlayer/jQuery-Validator

jQuery Validator 初体验

在学习之前,为了使稍后的讲解更加形象、便于理解,我们先通过几个示例来直观地感受一下jQuery Validator的魅力。以下列常见的HTML表单为例(只是演示,请先忽略表单字段的业务逻辑合理性):

<form action="http://www.365mini.com/">
	<div>
		<label>用户名</label>:
		<input id="username" name="username" type="text" />
	</div>
	<div>
		<label>密码</label>:
		<input id="password" name="password" type="password" />
	</div>			
	<div>
		<label>年龄</label>:
		<input id="age" name="age" type="text" />
	</div>
	<div>
		<label>出生日期</label>:
		<input id="birthday" name="birthday" type="text" />
	</div>
	<div>
		<label>手机号码</label>:
		<input id="cellphone" name="cellphone" type="text" />
	</div>
	<div>
		<label>兴趣爱好</label>:
		<input name="hobby" type="checkbox" value="0" /> 足球 
		<input name="hobby" type="checkbox" value="1" />篮球 
	</div>
	<input type="submit" value="提交" />
</form>

我们需要在表单提交时进行表单校验,则可以编写如下代码:

var v = new V();
$("form").v("submit", {
	"#username": "username",
	"#password": "password",
	"#age": "age",
	"#birthday": "date",
	"#cellphone": "cellphone",
	"hobby": "required"
});

运行代码

你还可以参考以下示例:

当然,jQuery Validator的强大功能无法简单地通过几个例子就能够全部展现。

jQuery Validator 快速入门

"磨刀不误砍柴工"。在使用框架之前,大致了解框架的设计理念是很有必要的,这样可以让您在使用过程中少走很多弯路。

所谓"校验",就是判断指定的输入是否符合条件,并根据判断结果进行对应的提示或操作。

通过总结可以发现,我们所有的输入校验大致可以分为以下几种:

  • 非空校验:输入不能为空。

  • 长度校验:输入必须满足指定的长度条件。例如,密码的长度为6~16位。

  • 范围校验:输入的值必须满足指定的范围条件。例如,年龄必须在18~100岁之间。

  • 比较校验:输入必须满足与其他相关(表单)输入的特定条件。例如,再次输入密码必须与原密码一致,结束时间必须大于开始时间。

  • 常规格式校验:输入必须满足指定的格式。例如,价格必须为数字,姓名必须为中文,手机号码格式,邮箱格式,时间格式……

  • 特殊校验:输入必须满足某些特殊的业务逻辑需要。例如,用户名必须唯一(通过远程AJAX校验)。

当然,有些时候一个输入可能需要多种校验方式来组合校验。比如:我们要求输入的用户名必须非空(非空校验),必须以英文字母开头(格式校验),且必须是6~16位(长度校验);我们要求输入的商品价格必须非空(非空校验),必须是两位小数以内的数字(格式校验),且必须大于0、小于或等于10000(值的范围校验);我们要求输入的结束时间必须是"yyyy-MM-dd"格式(格式校验),且不能小于开始时间(值的比较校验)……

基于上述分析,我们可以如下描述表单验证框架的大致工作过程:定义校验器->定义校验规则->对指定的输入执行校验->根据校验结果进行提示或操作

定义通用的校验器

校验器应该是通用(可复用)的,不依赖于任何特定的输入,每个校验器只负责一种校验。例如:非空校验器只校验非空,长度校验器只校验长度,范围校验器只校验范围……

定义校验规则

将一个或多个校验器组合成一种校验规则。还是以商品价格为例(非空、两位以内的数字、大于0且小于或等于10000),我们可以定义一个名为"price"的校验规则:

v.define("price", {
	required: true, // 非空校验
	format: "number/money", // 两位以内的数字格式校验
	range: "(0,10000]" // 值的范围校验
});

校验规则中还可以指定一些特殊的属性,以实现一些特定的功能,请参考左侧菜单中的【特殊规则属性】。

对输入执行校验

为输入指定对应的校验规则,并在指定时刻执行校验。jQuery Validator提供了多种执行校验的方式:

/** ***对单个输入执行校验,使用validate()方法,返回true或false*** */
// 对值直接进行校验,"price"是我们刚才定义的规则名称
var value = "xxx";
v.validate(value, "price");
// 也可以动态指定规则。required=true可以不用指定
// 定义的规则只要不显式指定required=false,默认就是required=true
v.validate(value, {
	format: "number/money",
	range: "(0,10000]"
});
// 也可以传入jQuery对象
v.validate($("#goodsPrice"), "price");


/** ***对多个输入执行校验,使用execute()方法*** */
var rules = {
	"username":"username", // name为"username"的表单指定名为"username"的校验规则
	"password":"password",
	"repassword": { // 规则也可以动态指定
		equalsTo: "password"
	},
	"#goodsPrice":"price" // 也可以"#"开头,表示根据ID获取该元素,否则根据name获取
};
// 立即执行校验,并返回校验结果:true或false
v.execute($("form"), rules); // 等价于 $("form").v(rules);

// 在form表单提交时触发校验,校验失败时自动阻止表单提交
v.execute($("form"), "submit", rules);
// 以上等价于 $("form").v("submit", rules);

// 在form表单提交时,鼠标移开表单元素时,都触发校验
v.execute($("form"), "submit focusout", rules);
// 以上等价于 $("form").v("submit focusout", rules);


/** ***利用表单元素的属性来指定规则名称,使用bindAttr()方法*** */
var options = {
	container: "form", // 元素容器,并对此进行监听
	eventType: "submit", // 监听事件
	attr:"v", // 指定设置规则的属性
	nameAsValue: true, // 如果attr指定的属性值为空,是否可使用name属性值作为其属性值
	cache: true // 是否允许缓存,如果需要校验的元素不再变动,建议开启缓存以提高重复校验的性能
};
v.bindAttr(options); // 一般情况下options可以不用传,默认即为上述设置,当然你也可以指定其中的一个或多个属性以更改对应的属性设置

根据校验结果进行提示

如果内置的校验器就能满足你的需求,那么你可以不用定义任何错误提示信息,因为内置校验器已经能够完成这项工作。以我们刚才定义的"price"规则为例:

v.define("price", {
	required:true,
	format: "number/money",
	range: "(0,10000]"
});
// 当输入为空时,对应的提示消息为:"{label}不能为空!"
// 当格式不对时,对应的提示消息为:"{label}必须是整数或最多保留两位的小数!"
// 当输入不大于0时,对应的提示消息为:"{label}必须大于{expected}!"
// 当输入大于10000时,对应的提示消息为:"{label}必须小于或等于{expected}!"

聪明的你应该注意到了,上面的提示消息中有两个占位符{label}{expected}。没错!为了实现提示消息的复用,而不与某个表单元素的名称(比如"用户名")耦合,框架支持带占位符的提示消息并自动解析。一般情况下,你只需要关注{label},因为它表示具体的表单元素的名称({expected}是验证器内置的,框架也支持自定义内置占位符)。

jQuery Validator怎么知道当前正在校验的表单元素的名称是什么呢?这个当然得需要你来配合。默认情况下,框架会依次通过以下方式获取表单元素的名称,并以优先获取到的为准:

// name是表单元素的name属性值
v.labels[name]
// 你可以通过setLabel()方法设置label:v.setLabel("username", "用户名");
// 或批量设置:v.setLabel({"username":"用户名", "password":"密码"});
>
// 你也可以为元素设置label属性:'<input name="name" label="姓名">'
$dom.attr("label")
>
// 取该元素前面的label标签的文本内容作为名称
$dom.prev("label").text()

当然,你也可以重写getLabel()方法来自定义获取方法:

v.getLabel = function(name, $dom, context){
	if(!name) name = $dom.prop("name");
	// name是表单元素名称,如果之前没有获取过,可能需要你自己获取
	// $doms 是表示当前正在校验的表单元素的jQuery对象
	// context 是上下文对象,请参看文档
}
// 如果需要全局重写,请重写原型上的getLabel方法(将v.getLabel替换为V.fn.getLabel)

如果你不想使用框架自带的提示消息,你也可以在定义规则时,自定义对应的提示消息,且同样都支持占位符:

// 该规则校验失败,均提示统一的信息
v.define("price", {
	required: true,
	format: "number/money",
	range: "(0,10000]",
	message: "只要校验失败,一律提示该信息"
});
// message还可以为对象,根据不同校验器的失败,分别提示不同的信息
message: {
	required:"{label}必须输入",
	format:"格式不对,提示该信息",
	range:"范围不对,提示该信息"
}
// message 还可以为自定义的函数
message: function(context){
	// 自行返回提示信息,返回值中也支持占位符
}
// message为false,表示不提示任何信息

如果系统找不到任何自定义或内置的提示信息,则提示v.messages["default"]的字符串值(默认为{label}的格式不正确!)。

若想了解关于内置提示信息及自定义提示信息的更多内容,请点击这里

在上面我们提到过,jQuery Validator的基本使用流程为:定义校验器->定义校验规则->对指定的输入执行校验->根据校验结果进行提示或操作

不过,jQuery Validator已经完成了第一步和第四步,其内置的校验器已经能够实现几乎所有的校验功能,连第二步jQuery Validator都已经为你内置定义了一些常用的校验规则。因此,在实际开发过程中,你要做的仅仅是:

  1. 定义额外的校验规则(如果框架内预定义的校验规则仍然无法满足你的话)。

  2. 对指定的输入执行校验(Just do it!)。

更上一层楼

当你看到这里时,你应该初步掌握了jQuery Validator的基本使用技巧。不过,仅仅掌握这些,你还无法灵活地运用该框架,尤其是当你的验证需要比较复杂时。至少,你应该认真了解每一个内置的表单验证器,因为它是表单验证框架的核心所在。jQuery Validator内置验证器的功能强大,也是与其他表单验证框架的最大区别之一。

如果你想"更上一层楼",请参考jQuery Validator的参考文档。

此外,如果您有任何意见或建议,也欢迎您在评论中或在Github上随时进行反馈。

49 0
我们认为: 用户的主要目的,是为了获取有用的信息,而不是来点击广告的。因此本站将竭力做好内容,并将广告和内容进行分离,确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信:只有给用户带来价值,用户才会给我们以回报。
CodePlayer技术交流群1CodePlayer技术交流群1

帮朋友打一个硬广告:

P2P网贷系统(Java版本) 新年低价大促销,多年P2P技术积累,系统功能完善(可按需定制,可支持第三方存管、银行存管),架构稳定灵活、性能优异、二次开发快速简单。 另可提供二次开发、安装部署、售后维护、安全培训等一条龙服务。

外行看热闹,内行看门道。可以自信地认为,在系统设计上,比市面上的晓风、迪蒙、方维、绿麻雀、国融信、金和盛等P2P系统要好。
深圳地区支持自带技术人员现场考察源代码、了解主要技术架构,货比三家,再决定是否购买。

也可推荐他人购买,一旦完全成交,推荐人可获得实际售价 10% 的返现。
有意向者,详情请 点击这里 联系,工作时间立即回复。