w3cschool教程 - jQuery插件总结
w3cschool教程 jQuery插件总结
http://www.w3cschool.cc/jquery/jquery-plugin-validate.html
一 jQuery Validate
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更
简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套
有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定
义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37
种语言。
导入 js 库
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
默认校验规则
序号
规则
描述
1
required:true
必须输入的字段。
2
remote:"check.php"
使用 ajax 方法调用 check.php 验证输入值。
3
email:true
必须输入正确格式的电子邮件。
4
url:true
必须输入正确格式的网址。
5
date:true
必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6
dateISO:true
必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式
，不验证有效性。
7
number:true
必须输入合法的数字（负数，小数）。
8
digits:true
必须输入整数。
9
creditcard:
必须输入合法的信用卡号。
10
equalTo:"#field"
输入值必须和 #field 相同。
11
accept:
输入拥有合法后缀名的字符串（上传文件的后缀）。
12
maxlength:5
输入长度最多是 5 的字符串（汉字算一个字符）。
13
minlength:10
输入长度最小是 10 的字符串（汉字算一个字符）。
14
rangelength:[5,10]
输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15
range:[5,10]
输入值必须介于 5 和 10 之间。
16
max:5
输入值不能大于 5。
17
min:10
输入值不能小于 10。
默认提示
使用方式
1 将校验规则写到控件中
2 将校验规则写到js代码中
常用方法及注意问题
1 用其他方式替代默认的SUBMIT
2 debug，只验证不提交表单
3 ignore，忽略某些元素不验证
4 更改错误信息显示的位置
5 更改错误信息显示的样式
6 每个字段验证通过执行函数
7 验证的触发方式修改
8 异步验证
9 添加自定义校验
10 radio和checkbox、select的验证
jQuery.validate中文API
validate(options)，验证所选的FORM
valid()，检查是否验证通过
rules()，返回元素的验证规则
rules("add",rules)，增加验证规则
rules("remove",rules)，删除验证规则
removeAttrs(attributes)，删除特殊属性并且返回它们
:blank，没有值的筛选器
:filled，有值的筛选器
:unchecked，没选择的元素的筛选器
jQuery.format(template, argument, argumentN...)，用参数代替模板中的{n}
实例
错误消息容器
自定义消息作为元素数据
radio(单选按钮)、checkbox(复选按钮）和select(下拉框)
与表单(Form)插件的交互（Ajax提交）
自定义方法和消息显示
动态表单
使用jQuery UI Themeroller定义表单样式
TinyMCE - 一个轻量级的基于浏览器的所见即所得编辑器
文件输入框
jQuery Mobile 表单验证
Milk注册表单
Marketo 注册表单
房屋买卖折叠面板表单
远程CAPTCHA（验证码）验证
二 jQuery Accordion
jQuery Accordion 插件用于创建折叠菜单。它通常与嵌套的列表、定义列表
或嵌套的 div 一起使用。选项用于指定结构、激活的元素和定制的动画。
该插件现在是 jQuery UI 的一部分，独立的版本不会再更新了。目前版本是
1.6。
jQuery Accordion 官网，jQuery Accordion 插件下载：
http://www.w3cschool.cc/try/download/jquery-accordion.zip。
标准
标准代码如下:
jQuery('#list1a').accordion();
jQuery('#list1b').accordion({
autoheight: false
});
导航
带有锚和嵌套列表的无序列表
jQuery('#navigation').accordion({
active: false,
header: '.head',
navigation: true,
event: 'mouseover',
fillSpace: true,
animated: 'easeslide'
});
带选项
容器是一个定义列表，标题是 dt，内容是 dd。
jQuery('#list2').accordion({
event: 'mouseover',
active: '.selected',
selectedClass: 'active',
animated: "bounceslide",
header: "dt"
}).bind("change.ui-accordion", function(event, ui) {
jQuery('<div>' + ui.oldHeader.text() + ' hidden, ' +
ui.newHeader.text() + ' shown</div>').appendTo('#log');
});
三 jQuery Autocomplete
jQuery Autocomplete 插件根据用户输入值进行搜索和过滤，让用户快速找到并
从预设值列表中选择。通过给 Autocomplete 字段焦点或者在其中输入字符，插
件开始搜索匹配的条目并显示供选择的值的列表。通过输入更多的字符，用户可
以过滤列表以获得更好的匹配。
该插件现在是 jQuery UI 的一部分，独立的版本不会再更新了。目前版本是 1.6
。
四 jQuery Message
jQuery Message 插件允许您很容易地在一个覆盖层显示反馈消息。消息会在一段
时间后自动消失，不需要单击"确定"按钮等。用户可以通过移动鼠标或点击任何
地方加快隐藏信息。
该插件目前版本是 1.0.0。
访问 jQuery Message 官网，下载 jQuery Message 插件。
使用方式
如需使用 Message 插件，请选择要显示文本的元素，把文本作为参数传递给它：
$(function() {
$().message("Hello world!");
// or
$(".feedback").message();
});
五 jQuery Password Validation（密码验证）
jQuery Password Validation（密码验证）插件扩展了 jQuery Validate 插件，
提供了两种组件：
一种评价密码的相关因素的功能：比如大小写字母的混合情况、字符（数字、特
殊字符）的混合情况、长度、与用户名的相似度（可选的）。
一种使用评价功能显示密码强度的验证插件自定义方法。显示的文本可以被本地
化。
您可以简单地自定义强度显示的外观、本地化消息显示，并集成到已有的表单中
。
该插件目前版本是 1.0.0。
访问 jQuery Password Validation（密码验证）官网，下载 jQuery Password
Validation（密码验证）插件。
使用方式
如需使用 Password Validation（密码验证）插件，请添加一个 class
"password" 到 input，同时添加显示强度的基本标记在表单的需要显示的地方：
<form id="register">
<label for="password">Password:</label>
<input class="password" name="password" id="password" />
<div class="password-meter">
<div class="password-meter-message"> </div>
<div class="password-meter-bg">
<div class="password-meter-bar"></div>
</div>
</div>
</form>
对表单应用 Validate 插件：
$(document).ready(function() {
$("#register").validate();
});
您可以重载 $.validator.passwordRating 实现不同的评价方法。或者重载
$.validator.passwordRating.messages 来提供其他消息，比如本地化。
六 jQuery Prettydate
jQuery Prettydate 插件为表单提供了强大的验证功能，让客户端表单验证变得
更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一
套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自
定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他
37 种语言。
该插件目前版本是 1.1.0。
访问 jQuery Prettydate 官网，下载 jQuery Prettydate Validation（密码验
证）插件。
使用方式
如需使用 Prettydate 插件，您需要在 title 中带有 ISO8601 日期：
<a title="2008-01-28T20:24:17Z">January 28th, 2008</a>
<a title="2008-01-27T22:24:17Z">January 27th, 2008</a>
<a title="2008-01-26T22:24:17Z">January 26th, 2008</a>
然后对它们应用 prettyDate 方法：
$(function() { $("a").prettyDate(); });
如需本地化该插件，请在 $.prettyDate.messages 中重写属性。在这里，以德国
本地化为例：
$.prettyDate.messages = { now: "gerade eben", minute: "vor einer
Minute", minutes: $.prettyDate.template("vor {0} Minuten"), hour: "vor
einer Stunde", hours: $.prettyDate.template("vor {0} Stunden"),
yesterday: "Gestern", days: $.prettyDate.template("vor {0} Tagen"),
weeks: $.prettyDate.template("vor {0} Wochen") }
该插件每隔 10 秒中更新一次每个被选中的元素。这样子 "just now" 会变为 "1
minute ago" 再变为 "x minutes ago" 再变为 "1 hour ago" 等等。
您可以通过指定 interval 选项为 "false" 来禁用间隔更新：
$(function() { $("a").prettyDate({ interval: false }); });
或者设置一个不同的时间间隔，例如：interval: 1000，每隔一秒更新一次每个
被选中的元素：
$(function() { $("a").prettyDate({ interval: 1000 }); });
value 选项默认读取 title 属性中的 ISO8601 日期字符串。重载该选项来使用
其他属性，例如，一个自定义的 "isodate" 属性：
$(function() { $("a").prettyDate({ function() { // "this" is the DOM
element return $(this).attr("isodate"); } }); });
七 jQuery Tooltip
jQuery Tooltip 插件取代了原生的工具提示框，让它们可自定义，您只需要调整
它们的内容、位置和外观即可。
该插件目前版本是 1.3，已经很长时间没有更新，推荐使用 jQuery UI 工具提示
框（Tooltip）。
访问 jQuery Tooltip 官网，下载 jQuery Tooltip 插件。
八 jQuery Treeview
jQuery Treeview 插件用于把一个无序列表改为一个可扩展的可折叠的树，有利
于导航。该插件支持位置和基于 cookie 的持久性。
该插件目前版本是 1.4.1，以后将会整合成为 jQuery UI 的一部分。
访问 jQuery Treeview 官网，下载 jQuery Treeview 插件。
另外，还有很多可替代 Treeview 的 jQuery 树插件，比如 jsTree。
实例
jQuery Treeview 插件 - 基本
jQuery Treeview 插件 - 大型树
jQuery Treeview 插件 - 预渲染的大型树
jQuery Treeview 插件 - 异步树
jQuery Treeview 插件 - 可编辑的树
jQuery Treeview 插件 - 简单的树，famfamfam 主题（无线条）