jQuery教程

jQuery選擇器

jQuery動(dòng)畫(huà)效果

jQuery節(jié)點(diǎn)操作

jQuery事件

jQuery HTML

jQuery遍歷

jQuery其他

jQuery noConflict() 方法

jQuery Ajax

jQuery參考手冊(cè)

jQuery實(shí)例

jQuery實(shí)例

jQuery插件

jQuery Validate插件（一） jQuery Cookie插件

jQuery Validate插件（二）

jQuery.validate 中文 API

名稱	返回類型	描述
validate(options)	Validator	驗(yàn)證所選的 FORM。
valid()	Boolean	檢查是否驗(yàn)證通過(guò)。
rules()	Options	返回元素的驗(yàn)證規(guī)則。
rules("add",rules)	Options	增加驗(yàn)證規(guī)則。
rules("remove",rules)	Options	刪除驗(yàn)證規(guī)則。
removeAttrs(attributes)	Options	刪除特殊屬性并且返回它們。
自定義選擇器
:blank	Validator	沒(méi)有值的篩選器。
:filled	Array	有值的篩選器。
:unchecked	Array	沒(méi)選擇的元素的篩選器。
實(shí)用工具
jQuery.format(template,argument,argumentN...)	String	用參數(shù)代替模板中的 {n}。

1、Validator

validate 方法返回一個(gè) Validator 對(duì)象。Validator 對(duì)象有很多方法可以用來(lái)引發(fā)校驗(yàn)程序或者改變 form 的內(nèi)容，下面列出幾個(gè)常用的方法。

名稱	返回類型	描述
form()	Boolean	驗(yàn)證 form 返回成功還是失敗。
element(element)	Boolean	驗(yàn)證單個(gè)元素是成功還是失敗。
resetForm()	undefined	把前面驗(yàn)證的 FORM 恢復(fù)到驗(yàn)證前原來(lái)的狀態(tài)。
showErrors(errors)	undefined	顯示特定的錯(cuò)誤信息。
Validator 函數(shù)
setDefaults(defaults)	undefined	改變默認(rèn)的設(shè)置。
addMethod(name,method,message)	undefined	添加一個(gè)新的驗(yàn)證方法。必須包括一個(gè)獨(dú)一無(wú)二的名字，一個(gè) JAVASCRIPT 的方法和一個(gè)默認(rèn)的信息。
addClassRules(name,rules)	undefined	增加組合驗(yàn)證類型，在一個(gè)類里面用多種驗(yàn)證方法時(shí)比較有用。
addClassRules(rules)	undefined	增加組合驗(yàn)證類型，在一個(gè)類里面用多種驗(yàn)證方法時(shí)比較有用。這個(gè)是同時(shí)加多個(gè)驗(yàn)證方法。

2、內(nèi)置驗(yàn)證方式

名稱	BooleanBoolean返回類型	描述
required()	Boolean	必填驗(yàn)證元素。
required(dependency-expression)	Boolean	必填元素依賴于表達(dá)式的結(jié)果。
required(dependency-callback)	Boolean	必填元素依賴于回調(diào)函數(shù)的結(jié)果。
remote(url)	Boolean	請(qǐng)求遠(yuǎn)程校驗(yàn)。url 通常是一個(gè)遠(yuǎn)程調(diào)用方法。
minlength(length)	Boolean	設(shè)置最小長(zhǎng)度。
maxlength(length)	Boolean	設(shè)置最大長(zhǎng)度。
rangelength(range)	Boolean	設(shè)置一個(gè)長(zhǎng)度范圍 [min,max]。
min(value)	Boolean	設(shè)置最小值。
max(value)	Boolean	設(shè)置最大值。
email()	Boolean	驗(yàn)證電子郵箱格式。
range(range)	Boolean	設(shè)置值的范圍。
url()	Boolean	驗(yàn)證 URL 格式。
date()	Boolean	驗(yàn)證日期格式(類似 30/30/2008 的格式，不驗(yàn)證日期準(zhǔn)確性只驗(yàn)證格式)。
dateISO()	Boolean	驗(yàn)證 ISO 類型的日期格式。
dateDE()	Boolean	驗(yàn)證德式的日期格式(29.04.1994 或 1.1.2006)。
number()	Boolean	驗(yàn)證十進(jìn)制數(shù)字(包括小數(shù)的)。
digits()	Boolean	驗(yàn)證整數(shù)。
creditcard()	Boolean	驗(yàn)證信用卡號(hào)。
accept(extension)	Boolean	驗(yàn)證相同后綴名的字符串。
equalTo(other)	Boolean	驗(yàn)證兩個(gè)輸入框的內(nèi)容是否相同。
phoneUS()	Boolean	驗(yàn)證美式的電話號(hào)碼。

3、validate ()的可選項(xiàng)

描述	代碼
debug：進(jìn)行調(diào)試模式(表單不提交)。	`$(".selector").validate ({ debug:true })`
把調(diào)試設(shè)置為默認(rèn)。	`$.validator.setDefaults({ debug:true })`
submitHandler：通過(guò)驗(yàn)證后運(yùn)行的函數(shù)，里面要加上表單提交的函數(shù)，否則表單不會(huì)提交。	`$(".selector").validate({ submitHandler:function(form) { $(form).ajaxSubmit(); } })`
ignore：對(duì)某些元素不進(jìn)行驗(yàn)證。	`$("#myform").validate({ ignore:".ignore" })`
rules：自定義規(guī)則，key:value 的形式，key 是要驗(yàn)證的元素，value 可以是字符串或?qū)ο蟆?/p>	`$(".selector").validate({ rules:{ name:"required", email:{ required:true, email:true } } })`
messages：自定義的提示信息，key:value 的形式，key 是要驗(yàn)證的元素，value 可以是字符串或函數(shù)。	`$(".selector").validate({ rules:{ name:"required", email:{ required:true, email:true } }, messages:{ name:"Name不能為空", email:{ required:"E-mail不能為空", email:"E-mail地址不正確" } } })`
groups：對(duì)一組元素的驗(yàn)證，用一個(gè)錯(cuò)誤提示，用 errorPlacement 控制把出錯(cuò)信息放在哪里。	`$("#myform").validate({ groups:{ username:"fname lname" }, errorPlacement:function(error,element) { if (element.attr("name") == "fname" \|\| element.attr("name") == "lname") error.insertAfter("#lastname"); else error.insertAfter(element); }, debug:true })`
OnSubmit：類型 Boolean，默認(rèn) true，指定是否提交時(shí)驗(yàn)證。	`$(".selector").validate({ onsubmit:false })`
onfocusout：類型 Boolean，默認(rèn) true，指定是否在獲取焦點(diǎn)時(shí)驗(yàn)證。	`$(".selector").validate({ onfocusout:false })`
onkeyup：類型 Boolean，默認(rèn) true，指定是否在敲擊鍵盤(pán)時(shí)驗(yàn)證。	`$(".selector").validate({ onkeyup:false })`
onclick：類型 Boolean，默認(rèn) true，指定是否在鼠標(biāo)點(diǎn)擊時(shí)驗(yàn)證(一般驗(yàn)證 checkbox、radiobox)。	`$(".selector").validate({ onclick:false })`
focusInvalid：類型 Boolean，默認(rèn) true。提交表單后，未通過(guò)驗(yàn)證的表單(第一個(gè)或提交之前獲得焦點(diǎn)的未通過(guò)驗(yàn)證的表單)會(huì)獲得焦點(diǎn)。	`$(".selector").validate({ focusInvalid:false })`
focusCleanup：類型 Boolean，默認(rèn) false。當(dāng)未通過(guò)驗(yàn)證的元素獲得焦點(diǎn)時(shí)，移除錯(cuò)誤提示(避免和 focusInvalid 一起使用)。	`$(".selector").validate({ focusCleanup:true })`
errorClass：類型 String，默認(rèn) "error"。指定錯(cuò)誤提示的 css 類名，可以自定義錯(cuò)誤提示的樣式。	`$(".selector").validate({ errorClass:"invalid" })`
errorElement：類型 String，默認(rèn) "label"。指定使用什么標(biāo)簽標(biāo)記錯(cuò)誤。	`$(".selector").validate errorElement:"em" })`
wrapper：類型 String，指定使用什么標(biāo)簽再把上邊的 errorELement 包起來(lái)。	`$(".selector").validate({ wrapper:"li" })`
errorLabelContainer：類型 Selector，把錯(cuò)誤信息統(tǒng)一放在一個(gè)容器里面。	`$("#myform").validate({ errorLabelContainer:"#messageBox", wrapper:"li", submitHandler:function() { alert("Submitted!") } })`
showErrors：跟一個(gè)函數(shù)，可以顯示總共有多少個(gè)未通過(guò)驗(yàn)證的元素。	`$(".selector").validate({ showErrors:function(errorMap,errorList) { $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below."); this.defaultShowErrors(); } })`
errorPlacement：跟一個(gè)函數(shù)，可以自定義錯(cuò)誤放到哪里。	`$("#myform").validate({ errorPlacement:function(error,element) { error.appendTo(element.parent("td").next("td")); }, debug:true })`
success：要驗(yàn)證的元素通過(guò)驗(yàn)證后的動(dòng)作，如果跟一個(gè)字符串，會(huì)當(dāng)作一個(gè) css 類，也可跟一個(gè)函數(shù)。	`$("#myform").validate({ success:"valid", submitHandler:function() { alert("Submitted!") } })`
highlight：可以給未通過(guò)驗(yàn)證的元素加效果、閃爍等。

4、addMethod(name,method,message)方法

參數(shù) name 是添加的方法的名字。

參數(shù) method 是一個(gè)函數(shù)，接收三個(gè)參數(shù) (value,element,param) 。

value 是元素的值，element 是元素本身，param 是參數(shù)。

我們可以用 addMethod 來(lái)添加除內(nèi)置的 Validation 方法之外的驗(yàn)證方法。比如有一個(gè)字段，只能輸一個(gè)字母，范圍是 a-f，寫(xiě)法如下：

$.validator.addMethod("af",function(value,element,params){  
    if(value.length>1){
        return false;
    }
    if(value>=params[0] && value<=params[1]){
        return true;
    }else{
        return false;
    }
},"必須是一個(gè)字母,且a-f");

如果有個(gè)表單字段的 name="username"，則在 rules 中寫(xiě)：

username:{
   af:["a","f"]
}

addMethod 的第一個(gè)參數(shù)，是添加的驗(yàn)證方法的名字，這時(shí)是 af。

addMethod 的第三個(gè)參數(shù)，是自定義的錯(cuò)誤提示，這里的提示為:"必須是一個(gè)字母,且a-f"。

addMethod 的第二個(gè)參數(shù)，是一個(gè)函數(shù)，這個(gè)比較重要，決定了用這個(gè)驗(yàn)證方法時(shí)的寫(xiě)法。

如果只有一個(gè)參數(shù)，直接寫(xiě)，比如 af:"a"，那么 a 就是這個(gè)唯一的參數(shù)，如果多個(gè)參數(shù)，則寫(xiě)在 [] 里，用逗號(hào)分開(kāi)。

5、meta String 方式

$("#myform").validate({

   meta:"validate",

   submitHandler:function() { 
alert("Submitted!") }

})

<script type="text/javascript" 
src="js/jquery.metadata.js"></script>

<script type="text/javascript" 
src="js/jquery.validate.js"></script>

<form id="myform">

  <input type="text" 
name="email" class="{validate:{ required:true,email:true }}" />

  <input type="submit" 
value="Submit" />

</form>

實(shí)例演示

虛構(gòu)的實(shí)例

• 錯(cuò)誤消息容器

• 自定義消息作為元素?cái)?shù)據(jù)

• radio(單選按鈕)、checkbox(復(fù)選按鈕)和 select(下拉框)

• 與表單(Form)插件的交互(AJAX 提交)

• 自定義方法和消息顯示

• 動(dòng)態(tài)表單

• 使用 jQuery UI Themeroller 定義表單樣式

• TinyMCE - 一個(gè)輕量級(jí)的基于瀏覽器的所見(jiàn)即所得編輯器

• 文件輸入框

• jQuery Mobile 表單驗(yàn)證

現(xiàn)實(shí)世界的實(shí)例

• Milk 注冊(cè)表單

• Marketo 注冊(cè)表單

• 房屋買賣折疊面板表單

• 遠(yuǎn)程 CAPTCHA(驗(yàn)證碼)驗(yàn)證

jQuery Validate插件（一） jQuery Cookie插件

全部教程

黄色网址大全免费-黄色网址你懂得-黄色网址你懂的-黄色网址有那些-免费超爽视频-免费大片黄国产在线观看

jQuery Validate插件（二）

5、meta String 方式

虛構(gòu)的實(shí)例

現(xiàn)實(shí)世界的實(shí)例

視頻課程

2020Java零基礎(chǔ)教程

JQuery零基礎(chǔ)入門(mén)視頻

AJAX視頻教程全集

linux基礎(chǔ)視頻教程