|
[jQuery]使用jQuery.Validate進(jìn)行客戶端驗(yàn)證（中級(jí)篇-上）——不使用微軟驗(yàn)證控件的理由
在上一篇使用jQuery.Validate進(jìn)行客戶端驗(yàn)證（初級(jí)篇）中我介紹了為什么選用jQuery.Validate作為客戶端的理由，同時(shí)也介紹了jQuery.Validate的基本用法以及中文驗(yàn)證消息的修改方法，今天的中級(jí)篇我將介紹下jQuery.Validate的一些常見的驗(yàn)證的使用方法。
jQuery.Validate為我們提供了3種驗(yàn)證編寫方式，各有優(yōu)缺點(diǎn)：
1、在input對(duì)象中書寫class樣式指定驗(yàn)證規(guī)則或?qū)傩则?yàn)證規(guī)則：
如<input type=”text” class=”required”/>
最簡(jiǎn)單、最便捷，提示消息使用jQuery.Validate的內(nèi)置的消息（自定義擴(kuò)展驗(yàn)證規(guī)則也屬于此項(xiàng)），但是由于是以樣式名的方式進(jìn)行驗(yàn)證，導(dǎo)致了日后修改必須找到相應(yīng)的input對(duì)象，同時(shí)無(wú)法使用高級(jí)驗(yàn)證規(guī)則，具體說明請(qǐng)向下看
2、同第1條，這種驗(yàn)證規(guī)則方式也是在input對(duì)象中書寫class樣式，只不過書寫的方式改為了JSON格式，但是這種方式提供了自定義驗(yàn)證消息的支持：
如<input type=”text”class="{required:true,minlength:5,,messages:{required:'請(qǐng)輸入內(nèi)容'}”/>
簡(jiǎn)單、方便，但個(gè)人認(rèn)為有點(diǎn)臃腫，還是和第1條一樣和相對(duì)應(yīng)的input對(duì)象糾纏在一起，并且還增加消息自定義，使得input對(duì)象變的更大了，干擾了頁(yè)面代碼的閱讀，但可以使用高級(jí)驗(yàn)證規(guī)則（實(shí)際就是將第3種JS以JSON的格式放到具體的class中
3、這種方式使用純JS的方式：
如：
$().ready(function() {
$("#aspnetform").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
})
})
很好的解決了HTML和驗(yàn)證規(guī)則的分離，就是書寫較為麻煩，需要單獨(dú)寫JS腳本，但好處是可以統(tǒng)一驗(yàn)證規(guī)范，將每個(gè)頁(yè)面的驗(yàn)證規(guī)則都寫在頭部的腳本中，方便日后維護(hù)。
注意：以上3種驗(yàn)證方式的消息如果未指定都會(huì)默認(rèn)調(diào)用內(nèi)置的消息
在了解了jQuery.Validate為我們提供幾種驗(yàn)證方式后，我們來(lái)具體分析下每個(gè)驗(yàn)證方式：
第一種，在input對(duì)象中書寫class樣式指定驗(yàn)證規(guī)則或?qū)傩则?yàn)證規(guī)則，可以將該input需要的規(guī)則一次性寫在里面（具體見頁(yè)面Middle-1.aspx）。
如:
<asp:TextBox ID="txtAge" runat="server" class="required number" max="99" min="1"></asp:TextBox>
這段代碼的意思是必須輸入年齡字段，年齡必須是數(shù)字，同時(shí)必須在0-99范圍內(nèi)，使用起來(lái)很方便寫幾個(gè)屬性就可以搞定，可以根據(jù)需求自由的組合驗(yàn)證規(guī)則。
但是就如上面說的許多高級(jí)的驗(yàn)證規(guī)則無(wú)法使用:
range（范圍驗(yàn)證，這個(gè)就可以替代max,min），
rangeLength（長(zhǎng)度范圍驗(yàn)證，可以替代maxLength,minLength），
equalTo（比較驗(yàn)證，這個(gè)其實(shí)可以用，但是如果使用使用的是ASP.NET控件就不行，純HTML控件可以。
看下代碼，我想比較2次輸入的密碼是否一樣時(shí)理論上可以這么寫：
<asp:TextBox ID="txtRePwd" runat="server" TextMode="Password" CssClass="required" minlength="6" equalTo='#<%=txtPwd.ClientID %>'></asp:TextBox>
但是由于ASP.NET控件的機(jī)制問題，會(huì)把#<%=txtPwd.ClientID %>進(jìn)行轉(zhuǎn)譯成#<%=txtPwd.ClientID %>這樣就導(dǎo)致了要比較的ID無(wú)法正確獲取，導(dǎo)致驗(yàn)證不成功。
但如果這么寫就不會(huì)出現(xiàn)問題：
<input type=”password” class=”required” minlenght=”6” equalTo=”txtPwd”/>
第二種，同樣書寫class驗(yàn)證規(guī)則，只不過以JSON格式書寫，可自定義驗(yàn)證消息，高級(jí)驗(yàn)證功能，JS驗(yàn)證規(guī)則的簡(jiǎn)化版（具體見頁(yè)面Middle-2.aspx）：
這種方式由于要以JSON的格式來(lái)編寫規(guī)則，所以需要引用個(gè)單獨(dú)的JS文件：jquery.metadata.js
具體書寫代碼格式如下：
<asp:TextBox ID="txtUid" runat="server" CssClass="{required:true,messages:{required:'不輸入用戶名你怎么登陸?'}}"></asp:TextBox>
<asp:TextBox ID="txtPwd" TextMode="Password" runat="server"
CssClass="{required:true,minlength:6,messages:{required:'你不輸入
密碼怎么行呢?',minlength:'密碼太短啦至少6位'}}"></asp:TextBox>
具體意思分別是：必須輸入用戶名和必須輸入密碼同時(shí)長(zhǎng)度至少6位。
注意：這邊我重新定義了驗(yàn)證信息，這樣就不用使用原先在jQuery.Validate中的內(nèi)置的通用消息，可以指定更加人性化的消息，看下截圖（可以對(duì)比下內(nèi)置提示信息和自定義提示信息）：
使用了這種方式后，我們就可以使用第一種驗(yàn)證方式中無(wú)法使用的一些驗(yàn)證規(guī)則了，如range：
<asp:TextBox ID="txtAge" runat="server" class="{required:true,number:true,range:[1,99],messages:{range:'您的年齡有問題把,得在1-99歲之間哦'}}"></asp:TextBox>
樣我這邊也修改了具體具體的消息，而rangelength的用法也與這個(gè)類似我就不演示了。
同樣很遺憾的，由于ASP.NET控件特性問題equalTo在這也不能使用，HTML還是有效的。
出處：博客園
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) 使用jQuery.Validate進(jìn)行客戶端驗(yàn)證(中篇) [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 使用jQuery.Validate進(jìn)行客戶端驗(yàn)證(中篇) [1]
第 2 頁(yè) 
