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 實現不同的評價方法?；蛘咧剌d

$.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 主題（無線條）

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。