您的浏览器过于古老 & 陈旧。为了更好的访问体验， 请 升级你的浏览器。

CodePlayer

注册
Ready 发布于2016年05月25日 03:02

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

2664 次浏览 读完需要≈ 18 分钟

内容目录

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

jQuery Validator 初体验

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

<form action="https://codeplayer.vip/">
	<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上随时进行反馈。

  • ： CodePlayer技术交流群1
  • ： CodePlayer技术交流群2

0 条评论

撰写评论

打开导航菜单