w3cschool教程 jQuery插件總結(jié)

http://www.w3cschool.cc/jquery/jquery-plugin-validate.html

一 jQuery Validate
jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能，讓客戶端表單驗(yàn)證變得更

簡單，同時(shí)提供了大量的定制選項(xiàng)，滿足應(yīng)用程序各種需求。該插件捆綁了一套

有用的驗(yàn)證方法，包括 URL 和電子郵件驗(yàn)證，同時(shí)提供了一個(gè)用來編寫用戶自定

義方法的 API。所有的捆綁方法默認(rèn)使用英語作為錯(cuò)誤信息，且已翻譯成其他 37

種語言。
?
導(dǎo)入 js 庫
?<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>

默認(rèn)校驗(yàn)規(guī)則

序號(hào)
規(guī)則
描述
?
1
required:true
必須輸入的字段。
?
2
remote:"check.php"
使用 ajax 方法調(diào)用 check.php 驗(yàn)證輸入值。

3
email:true
必須輸入正確格式的電子郵件。
?
4
url:true
必須輸入正確格式的網(wǎng)址。
?
5
date:true
必須輸入正確格式的日期。日期校驗(yàn) ie6 出錯(cuò)，慎用。
?
6
dateISO:true
必須輸入正確格式的日期（ISO），例如：2009-06-23，1998/01/22。只驗(yàn)證格式

，不驗(yàn)證有效性。
?
7
number:true
必須輸入合法的數(shù)字（負(fù)數(shù)，小數(shù)）。
?
8
digits:true
必須輸入整數(shù)。
?
9
creditcard:
必須輸入合法的信用卡號(hào)。
?
10
equalTo:"#field"
輸入值必須和 #field 相同。

11
accept:
輸入擁有合法后綴名的字符串（上傳文件的后綴）。
?
12
maxlength:5
輸入長度最多是 5 的字符串（漢字算一個(gè)字符）。

13
minlength:10
輸入長度最小是 10 的字符串（漢字算一個(gè)字符）。
?
14
rangelength:[5,10]
輸入長度必須介于 5 和 10 之間的字符串（漢字算一個(gè)字符）。
?
15
range:[5,10]
輸入值必須介于 5 和 10 之間。
?
16
max:5
輸入值不能大于 5。
?
17
min:10
輸入值不能小于 10。

默認(rèn)提示

使用方式
1 將校驗(yàn)規(guī)則寫到控件中
2 將校驗(yàn)規(guī)則寫到j(luò)s代碼中

常用方法及注意問題
1 用其他方式替代默認(rèn)的SUBMIT
2 debug，只驗(yàn)證不提交表單
3 ignore，忽略某些元素不驗(yàn)證
4 更改錯(cuò)誤信息顯示的位置
5 更改錯(cuò)誤信息顯示的樣式
6 每個(gè)字段驗(yàn)證通過執(zhí)行函數(shù)
7 驗(yàn)證的觸發(fā)方式修改
8 異步驗(yàn)證
9 添加自定義校驗(yàn)
10 radio和checkbox、select的驗(yàn)證

jQuery.validate中文API
validate(options)，驗(yàn)證所選的FORM
valid()，檢查是否驗(yàn)證通過
rules()，返回元素的驗(yàn)證規(guī)則
rules("add",rules)，增加驗(yàn)證規(guī)則
rules("remove",rules)，刪除驗(yàn)證規(guī)則
removeAttrs(attributes)，刪除特殊屬性并且返回它們
:blank，沒有值的篩選器
:filled，有值的篩選器
:unchecked，沒選擇的元素的篩選器
jQuery.format(template, argument, argumentN...)，用參數(shù)代替模板中的{n}

實(shí)例
錯(cuò)誤消息容器
自定義消息作為元素?cái)?shù)據(jù)
radio(單選按鈕)、checkbox(復(fù)選按鈕）和select(下拉框)
與表單(Form)插件的交互（Ajax提交）
自定義方法和消息顯示
動(dòng)態(tài)表單
使用jQuery UI Themeroller定義表單樣式
TinyMCE - 一個(gè)輕量級(jí)的基于瀏覽器的所見即所得編輯器
文件輸入框
jQuery Mobile 表單驗(yàn)證
Milk注冊(cè)表單
Marketo 注冊(cè)表單
房屋買賣折疊面板表單
遠(yuǎn)程CAPTCHA（驗(yàn)證碼）驗(yàn)證

二 jQuery Accordion
??? jQuery Accordion 插件用于創(chuàng)建折疊菜單。它通常與嵌套的列表、定義列表

或嵌套的 div 一起使用。選項(xiàng)用于指定結(jié)構(gòu)、激活的元素和定制的動(dòng)畫。
??? 該插件現(xiàn)在是 jQuery UI 的一部分，獨(dú)立的版本不會(huì)再更新了。目前版本是

1.6。
?
??? jQuery Accordion 官網(wǎng)，jQuery Accordion 插件下載：

http://www.w3cschool.cc/try/download/jquery-accordion.zip。

標(biāo)準(zhǔn)
標(biāo)準(zhǔn)代碼如下:
?jQuery('#list1a').accordion();
jQuery('#list1b').accordion({
??? autoheight: false
});

導(dǎo)航
帶有錨和嵌套列表的無序列表
?jQuery('#navigation').accordion({
??? active: false,
??? header: '.head',
??? navigation: true,
??? event: 'mouseover',
??? fillSpace: true,
??? animated: 'easeslide'
});

帶選項(xiàng)
容器是一個(gè)定義列表，標(biāo)題是 dt，內(nèi)容是 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 插件根據(jù)用戶輸入值進(jìn)行搜索和過濾，讓用戶快速找到并

從預(yù)設(shè)值列表中選擇。通過給 Autocomplete 字段焦點(diǎn)或者在其中輸入字符，插

件開始搜索匹配的條目并顯示供選擇的值的列表。通過輸入更多的字符，用戶可

以過濾列表以獲得更好的匹配。
?
該插件現(xiàn)在是 jQuery UI 的一部分，獨(dú)立的版本不會(huì)再更新了。目前版本是 1.6

。

四 jQuery Message
jQuery Message 插件允許您很容易地在一個(gè)覆蓋層顯示反饋消息。消息會(huì)在一段

時(shí)間后自動(dòng)消失，不需要單擊"確定"按鈕等。用戶可以通過移動(dòng)鼠標(biāo)或點(diǎn)擊任何

地方加快隱藏信息。
?
該插件目前版本是 1.0.0。
訪問 jQuery Message 官網(wǎng)，下載 jQuery Message 插件。
?
使用方式
如需使用 Message 插件，請(qǐng)選擇要顯示文本的元素，把文本作為參數(shù)傳遞給它：
?$(function() {
? $().message("Hello world!");
? // or
? $(".feedback").message();
});

五 jQuery Password Validation（密碼驗(yàn)證）
jQuery Password Validation（密碼驗(yàn)證）插件擴(kuò)展了 jQuery Validate 插件，

提供了兩種組件：
?一種評(píng)價(jià)密碼的相關(guān)因素的功能：比如大小寫字母的混合情況、字符（數(shù)字、特

殊字符）的混合情況、長度、與用戶名的相似度（可選的）。
?一種使用評(píng)價(jià)功能顯示密碼強(qiáng)度的驗(yàn)證插件自定義方法。顯示的文本可以被本地

化。
?
您可以簡單地自定義強(qiáng)度顯示的外觀、本地化消息顯示，并集成到已有的表單中

。
?
該插件目前版本是 1.0.0。
?
訪問 jQuery Password Validation（密碼驗(yàn)證）官網(wǎng)，下載 jQuery Password

Validation（密碼驗(yàn)證）插件。
?
使用方式
?
如需使用 Password Validation（密碼驗(yàn)證）插件，請(qǐng)?zhí)砑右粋€(gè) class

"password" 到 input，同時(shí)添加顯示強(qiáng)度的基本標(biāo)記在表單的需要顯示的地方：
?<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>
對(duì)表單應(yīng)用 Validate 插件：
?$(document).ready(function() {
? $("#register").validate();
});
您可以重載 $.validator.passwordRating 實(shí)現(xiàn)不同的評(píng)價(jià)方法。或者重載

$.validator.passwordRating.messages 來提供其他消息，比如本地化。

六 jQuery Prettydate
jQuery Prettydate 插件為表單提供了強(qiáng)大的驗(yàn)證功能，讓客戶端表單驗(yàn)證變得

更簡單，同時(shí)提供了大量的定制選項(xiàng)，滿足應(yīng)用程序各種需求。該插件捆綁了一

套有用的驗(yàn)證方法，包括 URL 和電子郵件驗(yàn)證，同時(shí)提供了一個(gè)用來編寫用戶自

定義方法的 API。所有的捆綁方法默認(rèn)使用英語作為錯(cuò)誤信息，且已翻譯成其他

37 種語言。
?
該插件目前版本是 1.1.0。
?
訪問 jQuery Prettydate 官網(wǎng)，下載 jQuery Prettydate Validation（密碼驗(yàn)

證）插件。
?
使用方式
?
如需使用 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>
然后對(duì)它們應(yīng)用 prettyDate 方法：
?$(function() { $("a").prettyDate(); });
如需本地化該插件，請(qǐng)?jiān)?$.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 秒中更新一次每個(gè)被選中的元素。這樣子 "just now" 會(huì)變?yōu)?"1

minute ago" 再變?yōu)?"x minutes ago" 再變?yōu)?"1 hour ago" 等等。
?
您可以通過指定 interval 選項(xiàng)為 "false" 來禁用間隔更新：
?$(function() { $("a").prettyDate({ interval: false }); });
或者設(shè)置一個(gè)不同的時(shí)間間隔，例如：interval: 1000，每隔一秒更新一次每個(gè)

被選中的元素：
?$(function() { $("a").prettyDate({ interval: 1000 }); });
value 選項(xiàng)默認(rèn)讀取 title 屬性中的 ISO8601 日期字符串。重載該選項(xiàng)來使用

其他屬性，例如，一個(gè)自定義的 "isodate" 屬性：
?$(function() { $("a").prettyDate({ function() { // "this" is the DOM

element return $(this).attr("isodate"); } }); });

七 jQuery Tooltip

jQuery Tooltip 插件取代了原生的工具提示框，讓它們可自定義，您只需要調(diào)整

它們的內(nèi)容、位置和外觀即可。
?
該插件目前版本是 1.3，已經(jīng)很長時(shí)間沒有更新，推薦使用 jQuery UI 工具提示

框（Tooltip）。
?
訪問 jQuery Tooltip 官網(wǎng)，下載 jQuery Tooltip 插件。

八 jQuery Treeview
jQuery Treeview 插件用于把一個(gè)無序列表改為一個(gè)可擴(kuò)展的可折疊的樹，有利

于導(dǎo)航。該插件支持位置和基于 cookie 的持久性。
?
該插件目前版本是 1.4.1，以后將會(huì)整合成為 jQuery UI 的一部分。
?
訪問 jQuery Treeview 官網(wǎng)，下載 jQuery Treeview 插件。
?
另外，還有很多可替代 Treeview 的 jQuery 樹插件，比如 jsTree。
?
實(shí)例
jQuery Treeview 插件 - 基本
jQuery Treeview 插件 - 大型樹
jQuery Treeview 插件 - 預(yù)渲染的大型樹
jQuery Treeview 插件 - 異步樹
jQuery Treeview 插件 - 可編輯的樹
jQuery Treeview 插件 - 簡單的樹，famfamfam 主題（無線條）

總結(jié)

以上是生活随笔為你收集整理的w3cschool教程 - jQuery插件总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。