form表单的验证
<!-- 表單驗(yàn)證插件 -->
<script src="${ctx}/static/plugins/validate/jquery.validate.min.js"></script>
?
<form id="variable_form" class="form-horizontal" method="post">
<div class="form-group" >
<label class="col-sm-2 control-label">屆數(shù)<span class="text-danger">*</span></label>
<div class="col-sm-2">
<input type="text" class="form-control" ? name="number" >
</div>
</div>
</form>
?
$(function () {
$('#variable_form').validate({ ? ? ? //去form的id
errorElement: 'div',
errorClass: 'help-block',
focusInvalid: false,
ignore: "",
rules: {
number: { ? ? ? ? ? ? ? ? ?//取對(duì)象為name的值
required: true,
number:true
},
time:{
required: true,
email:false
},
},
messages: {
number: {
required: "屆數(shù)不能為空",
number: "屆數(shù)只能輸入數(shù)字"
},
time:{
required: "換屆時(shí)間不能為空"
},
},
highlight: function (e) {
$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
},
success: function (e) {
$(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
$(e).remove();
},
errorPlacement: function (error, element) {
if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
var controls = element.closest('div[class*="col-"]');
if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
}
else if(element.is('.select2')) {
error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
}
else if(element.is('.chosen-select')) {
error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
}
else error.insertAfter(element.parent());
},
submitHandler: function (form) {
form.submit();
},
invalidHandler: function (form) {
}
});
});
?
?
function saveorggeneral(){
if($('#variable_form').valid()){ ? ? ? ? ? ? ? ? ?//取formid驗(yàn)證 ? 通過后
。。。。。。
?}
}
?
?
?
?
?
?
?
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
摘自博客園
用前必備
官方網(wǎng)站：http://bassistance.de/jquery-plugins/jquery-plugin-validation/?
API:?http://jquery.bassistance.de/api-browser/plugins.html?
當(dāng)前版本：1.5.5
需要JQuery版本：1.2.6+, 兼容 1.3.2
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
二、默認(rèn)校驗(yàn)規(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?????????????????? 必須輸入正確格式的日期
(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)的提示
?
如需要修改，可在js代碼中加入：
?
推薦做法，將此文件放入messages_cn.js中，在頁面中引入
?
四、使用方式
1.將校驗(yàn)規(guī)則寫到控件中
使用class="{}"的方式，必須引入包：jquery.metadata.js
可以使用如下的方法，修改提示內(nèi)容：
在使用equalTo關(guān)鍵字時(shí)，后面的內(nèi)容必須加上引號(hào)，如下代碼：
另外一個(gè)方式，使用關(guān)鍵字：meta（為了元數(shù)據(jù)使用其他插件你要包裝 你的驗(yàn)證規(guī)則 在他們自己的項(xiàng)目中可以用這個(gè)特殊的選項(xiàng)）
Tell the validation plugin to look inside a validate-property in metadata for validation rules.
例如：
?再有一種方式：
這樣可以使用validate="{required:true}"的方式，或者class="required"，但class="{required:true,minlength:5}"將不起作用?
2.將校驗(yàn)規(guī)則寫到代碼中
?
?
required:true 必須有值
required:"#aa:checked"表達(dá)式的值為真，則需要驗(yàn)證
required:function(){}返回為真，表時(shí)需要驗(yàn)證
后邊兩種常用于，表單中需要同時(shí)填或不填的元素
?
五、常用方法及注意問題
1.用其他方式替代默認(rèn)的SUBMIT
?
可以設(shè)置validate的默認(rèn)值，寫法如下：
?
如果想提交表單, 需要使用form.submit()而不要使用$(form).submit()
2.debug，如果這個(gè)參數(shù)為true，那么表單不會(huì)提交，只進(jìn)行檢查，調(diào)試時(shí)十分方便
?
如果一個(gè)頁面中有多個(gè)表單，用
?
3.ignore：忽略某些元素不驗(yàn)證
?
4.errorPlacement：Callback? Default: 把錯(cuò)誤信息放在驗(yàn)證的元素后面??
指明錯(cuò)誤放置的位置，默認(rèn)情況是：error.appendTo(element.parent());即把錯(cuò)誤信息放在驗(yàn)證的元素后面?
errorPlacement: function(error, element) {???
??? error.appendTo(element.parent());???
}
//示例：
errorClass：String? Default: "error"??
指定錯(cuò)誤提示的css類名，可以自定義錯(cuò)誤提示的樣式
errorElement：String? Default: "label"??
用什么標(biāo)簽標(biāo)記錯(cuò)誤，默認(rèn)的是label你可以改成em
errorContainer：Selector??
顯示或者隱藏驗(yàn)證信息，可以自動(dòng)實(shí)現(xiàn)有錯(cuò)誤信息出現(xiàn)時(shí)把容器屬性變?yōu)轱@示，無錯(cuò)誤時(shí)隱藏，用處不大
errorContainer: "#messageBox1, #messageBox2"
errorLabelContainer：Selector?
把錯(cuò)誤信息統(tǒng)一放在一個(gè)容器里面。
wrapper：String
用什么標(biāo)簽再把上邊的errorELement包起來
一般這三個(gè)屬性同時(shí)使用，實(shí)現(xiàn)在一個(gè)容器內(nèi)顯示所有錯(cuò)誤提示的功能，并且沒有信息時(shí)自動(dòng)隱藏
?
?
設(shè)置錯(cuò)誤提示的樣式，可以增加圖標(biāo)顯示
?
要驗(yàn)證的元素通過驗(yàn)證后的動(dòng)作，如果跟一個(gè)字符串，會(huì)當(dāng)做一個(gè)css類，也可跟一個(gè)函數(shù)
?
添加"valid" 到驗(yàn)證元素, 在CSS中定義的樣式<style>label.valid {}</style>
success: "valid"
nsubmit： Boolean? Default: true??
提交時(shí)驗(yàn)證. 設(shè)置唯false就用其他方法去驗(yàn)證
onfocusout：Boolean? Default: true??
失去焦點(diǎn)是驗(yàn)證(不包括checkboxes/radio buttons)?
onkeyup：Boolean? Default: true??
在keyup時(shí)驗(yàn)證.
onclick：Boolean? Default: true??
在checkboxes 和 radio 點(diǎn)擊時(shí)驗(yàn)證
focusInvalid：Boolean? Default: true??
提交表單后，未通過驗(yàn)證的表單(第一個(gè)或提交之前獲得焦點(diǎn)的未通過驗(yàn)證的表單)會(huì)獲得焦點(diǎn)
focusCleanup：Boolean? Default: false??
如果是true那么當(dāng)未通過驗(yàn)證的元素獲得焦點(diǎn)時(shí)，移除錯(cuò)誤提示。避免和 focusInvalid 一起用
?
// 重置表單
?remote：URL
使用ajax方式進(jìn)行驗(yàn)證，默認(rèn)會(huì)提交當(dāng)前驗(yàn)證的值到遠(yuǎn)程地址，如果需要提交其他的值，可以使用data選項(xiàng)
?
遠(yuǎn)程地址只能輸出 "true" 或 "false"，不能有其它輸出
?
?
addMethod：name, method, message
自定義驗(yàn)證方法
?
?
radio和checkbox、select的驗(yàn)證
radio的required表示必須選中一個(gè)
//
jQuery.Validate是監(jiān)控form，在任何提交表單的操作前jQuery.Validate都會(huì)檢測(cè)表單里的輸入項(xiàng)是否滿足規(guī)則，滿足才允許提交。所以需
要在jQuery(document).ready（）時(shí)為form進(jìn)行驗(yàn)證注冊(cè)
具體代碼如下:
<body><form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#form1").validate();
});
</script>
</body>
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”/>
最簡單、最便捷，提示消息使用jQuery.Validate的內(nèi)置的消息（自定義擴(kuò)展驗(yàn)證規(guī)則也屬于此項(xiàng)），但是由于是以樣式名的方式進(jìn)行驗(yàn)證，導(dǎo)致了日后修改必須找到相應(yīng)的input對(duì)象，同時(shí)無法使用高級(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)容'}”/>
簡單、方便，但個(gè)人認(rèn)為有點(diǎn)臃腫，還是和第1條一樣和相對(duì)應(yīng)的input對(duì)象糾纏在一起，并且還增加消息自定義，使得input對(duì)象變的更大了，干擾了頁面代碼的閱讀，但可以使用高級(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àn)證規(guī)則都寫在頭部的腳本中，方便日后維護(hù)。
注意：以上3種驗(yàn)證方式的消息如果未指定都會(huì)默認(rèn)調(diào)用內(nèi)置的消息
1、在使用上一篇中第2種方式，以JSON的格式編寫驗(yàn)證規(guī)則，影響了正常的class使用，如何處理？
2、在ASP.NET下，所有的按鈕都會(huì)提交form表單，所以都會(huì)引發(fā)驗(yàn)證，如何處理？
3、我希望驗(yàn)證的提示信息可以在統(tǒng)一的地方顯示，如何處理？
4、我在開發(fā)的過程中，我不確定所編寫的規(guī)則是否正確，如何進(jìn)行調(diào)試？
5、我使用的是微軟AJAX控件，想監(jiān)控dropdownlist是否選擇，為何不起作用?
6、radiobox，checkbox，listbox如何進(jìn)行高級(jí)應(yīng)用？如何指定選擇數(shù)量？
1點(diǎn)：在使用上一篇中第2種方式，以JSON的格式編寫驗(yàn)證規(guī)則，影響了正常的class使用，如何處理？（具體見Middle-4.aspx）
首先看下使用第2種方式是如何編寫驗(yàn)證規(guī)則的：
<asp:TextBox ID="txtPwd" TextMode="Password" runat="server" CssClass="{required:true,minlength:6,messages:{required:'你不輸入密碼怎么行呢?',minlength:'密碼太短啦至少6位'}}"></asp:TextBox>
可以看到這樣寫驗(yàn)證規(guī)則雖然簡單，但是如果我要為這個(gè)控件應(yīng)用其他樣式怎么辦？所以現(xiàn)在就是處理這個(gè)問題的時(shí)候了，在頁面的頭部加上一句代碼：
jQuery.metadata.setType("attr", "validate");
由于這種驗(yàn)證規(guī)則方式需要依賴jQuery.metadata才可以正常運(yùn)作，所以我們需要在jQuery.metadata上做文章，分析下jQuery.metadata的代碼，可以看到，默認(rèn)情況下它是檢測(cè)控件的class屬性：
defaults : {?
??????????? type: 'class',?
??????????? name: 'metadata',?
??????????? cre: /({.*})/,?
??????????? single: 'metadata'?
??????? }
那我們可不可以更改這個(gè)屬性呢？肯定是可以的，就是在頁面上加上那句代碼，更改其檢測(cè)的屬性。
接著我們還需要修改下頁面中的代碼，將原來所有的"CssClass”改為我們更改的檢測(cè)屬性"validate”、
這樣就很好的更改了驗(yàn)證規(guī)則所存放的屬性了。
第2點(diǎn)：在ASP.NET下，所有的按鈕都會(huì)提交form表單，所以都會(huì)引發(fā)驗(yàn)證，如何處理？（具體見Middle-4.aspx中btnNoValidate按鈕）
在實(shí)際的開發(fā)當(dāng)中，一個(gè)頁面上總會(huì)有N個(gè)按鈕，由于ASP.NET的機(jī)制特性，所有的控件都會(huì)回發(fā)頁面，也就提交了表單，但是此時(shí)整個(gè)表單都被jQuery.Validate所監(jiān)控，所以只要頁面中有某個(gè)地方不符合驗(yàn)證規(guī)則，任何回發(fā)頁面的操作都會(huì)被攔截住，但是實(shí)際上我們需要引發(fā)驗(yàn)證的按鈕只有1或者2個(gè)，而其他按鈕不需要，這時(shí)我們就要想辦法了。
其實(shí)很簡單，就是為不需要引發(fā)驗(yàn)證的控件加個(gè)樣式"cancel"即可，代碼如下：
<asp:Button ID="btnNoValidate" runat="server" Text="點(diǎn)我不會(huì)引發(fā)驗(yàn)證哦" CssClass="cancel" />
怎么樣很簡單吧？
第3點(diǎn)：我希望驗(yàn)證的提示信息可以在統(tǒng)一的地方顯示，如何處理？（具體見Middle-5.aspx）
在開發(fā)的過程當(dāng)中，會(huì)有一些特殊的需求，就比如頁面上使用了tab頁面，而提交按鈕就一個(gè)，這時(shí)就需要將驗(yàn)證提示信息統(tǒng)一放在一個(gè)位置，好方便查看，如圖：
要實(shí)現(xiàn)這個(gè)效果只需在JS編寫驗(yàn)證規(guī)則時(shí)添加：
errorPlacement: function(error, element) {?
?????????????????????? error.html(error.html()+"<br/>");?
?????????????????????? error.appendTo("#errorContainer");?
?????????????? }
error是一個(gè)label對(duì)象里面包含了錯(cuò)誤消息，element則是驗(yàn)證未通過的對(duì)象元素，通過errorPlacement可以方便的將驗(yàn)證提示信息統(tǒng)一放入一個(gè)位置。
第4點(diǎn)：我在開發(fā)的過程中，我不確定所編寫的規(guī)則是否正確，如何進(jìn)行調(diào)試？（具體見Middle-5.aspx）
這個(gè)就比較簡單了，jQuery.Validate默認(rèn)已經(jīng)為我們考慮過了，只需在JS編寫規(guī)則時(shí)添加一個(gè)屬性：
debug:true
這樣就表示現(xiàn)在在調(diào)試，這時(shí)不會(huì)提交表單。
第5點(diǎn)：我使用的是微軟AJAX控件，想監(jiān)控dropdownlist是否選擇，為何不起作用?（具體見Middle-5.aspx中的性別）
在使用微軟AJAX控件中的dropdownlist級(jí)聯(lián)時(shí)，比如省市區(qū)聯(lián)動(dòng)，如果省沒有選擇，則市和區(qū)都是灰的，是disabled狀態(tài)，是被禁用的，類似代碼如下：
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="required" disabled="true">?
??? <asp:ListItem></asp:ListItem>?
??? <asp:ListItem Value="1">男</asp:ListItem>?
??? <asp:ListItem Value="0">女</asp:ListItem>?
</asp:DropDownList>
我這邊是強(qiáng)制把這個(gè)DropDownList禁用了，這時(shí)如果為這個(gè)控件加上“required”將不會(huì)有任何反應(yīng)，因?yàn)樵趈Query.Validate代碼中默認(rèn)是不驗(yàn)證的，具體代碼見jQuery.Validate.js414行：
not(":submit, :reset, :image, [disabled]")
所以為了方便我們使用，我們修改下代碼，將[disabled]"去除，改為：
not(":submit, :reset, :image")
這樣再刷新下頁面，驗(yàn)證就起作用了。
第6點(diǎn)：radiobox，checkbox，listbox如何進(jìn)行高級(jí)應(yīng)用？如何指定選擇數(shù)量？（具體請(qǐng)見radio-checkbox-select-demo.html）
這點(diǎn)我直接引用了官方關(guān)于radiobox，checkbox，listbox應(yīng)用的例子，因?yàn)楣俜降睦右呀?jīng)寫的非常好了。
1、擴(kuò)展驗(yàn)證規(guī)則，jQuery.Validate只提供了一些基本的驗(yàn)證功能，并不能滿足我們?nèi)粘ｉ_發(fā)的需求，所以我們要為jQuery.Validate擴(kuò)展驗(yàn)證規(guī)則。
2、分組驗(yàn)證，在開發(fā)的時(shí)候有時(shí)會(huì)遇到的一個(gè)問題就是，不同按鈕引發(fā)不同的驗(yàn)證。
首先來介紹下第一點(diǎn)：擴(kuò)展驗(yàn)證規(guī)則，在jQuery.Validate默認(rèn)的驗(yàn)證規(guī)則無法滿足我們的日常開發(fā)需求的時(shí)候，我們需要根據(jù)自己的業(yè)務(wù)需求指定一些相應(yīng)的規(guī)則。（具體見MasterPage.master）
為了擴(kuò)展驗(yàn)證規(guī)則，我們首先要看下jQuery.Validate為我們提供的擴(kuò)展方法：
addMethod: function(name, method, message) {?
??? $.validator.methods[name] = method;?
??? $.validator.messages[name] = message;?
??? if (method.length < 3) {?
??????? $.validator.addClassRules(name, $.validator.normalizeRule(name));?
??? }?
},
這段代碼就是用來擴(kuò)展驗(yàn)證規(guī)則的，意思很簡單，就是向jQuery.Validate添加驗(yàn)證方法。
接收3個(gè)參數(shù)：name-驗(yàn)證規(guī)則名
???????????????????method-驗(yàn)證規(guī)則實(shí)現(xiàn)函數(shù)（function）
???????????????????message-驗(yàn)證不通過顯示的錯(cuò)誤消息
當(dāng)我們調(diào)用了這個(gè)方法后，我們所寫的規(guī)則自動(dòng)就會(huì)加入到j(luò)Query.Validate規(guī)則中。
好了，我們看下具體如何實(shí)現(xiàn)：
手機(jī)號(hào)碼驗(yàn)證：
jQuery.validator.addMethod("telphoneValid", function(value, element) {?
??? var tel = /^(130|131|132|133|134|135|136|137|138|139|150|153|157|158|159|180|187|188|189)\d{8}$/;?
??? return tel.test(value) || this.optional(element);?
}, "請(qǐng)輸入正確的手機(jī)號(hào)碼");
這邊的method需要注意的是，這個(gè)method實(shí)現(xiàn)函數(shù)接收2個(gè)元素：
value：檢測(cè)的對(duì)象的值
element：檢測(cè)的對(duì)象
這邊我定義了一個(gè)名為“telphoneValid”的驗(yàn)證規(guī)則，在驗(yàn)證規(guī)則里我首先定義了個(gè)手機(jī)驗(yàn)證的正則表達(dá)式，然后將值放入正則表達(dá)式進(jìn)行驗(yàn)證，返回驗(yàn)證結(jié)果，返回的錯(cuò)誤消息是“請(qǐng)輸入正確的手機(jī)號(hào)碼”。
這樣就完成了一個(gè)簡單的手機(jī)號(hào)碼驗(yàn)證規(guī)則擴(kuò)展。
第2點(diǎn)：分組驗(yàn)證，這個(gè)分組驗(yàn)證在默認(rèn)的jQuery.Validate中默認(rèn)是不支持的，也是我覺得很不爽的，因?yàn)樵趯?shí)際的開發(fā)過程中經(jīng)常會(huì)碰到需要分組驗(yàn)證的時(shí)候。
這點(diǎn)微軟的驗(yàn)證控件就做的很好，在微軟的控件里，默認(rèn)都有ValidationGroup這個(gè)屬性，只要把屬性名設(shè)置為相同就可以進(jìn)行分組驗(yàn)證了，但是jQuery.Validate自身卻沒提供這個(gè)功能，所以我們只能自己擴(kuò)展了。
來一下具體的場(chǎng)景，在一個(gè)頁面里有2個(gè)tab頁面，不同tab頁面需要不同的提交按鈕：
?
這2個(gè)就是標(biāo)準(zhǔn)的分組驗(yàn)證情況，如果不設(shè)置分組驗(yàn)證的情況下，點(diǎn)擊[基本信息提交]和[描述提交]按鈕后頁面上所有的驗(yàn)證都會(huì)被相應(yīng)，這是因?yàn)?個(gè)按鈕都在一個(gè)form表單中，2個(gè)按鈕的點(diǎn)擊事件默認(rèn)都是在客戶端提交表單，然后由服務(wù)器端來分配執(zhí)行代碼，所以問題就出現(xiàn)了。
這時(shí)我們就需要引入分組驗(yàn)證了，這個(gè)解決思路是我在一個(gè)國外的網(wǎng)站找到的，不過具體地址我找不到了，這個(gè)方法有個(gè)弊端就是必須是將需要分組的控件必須放入不同的容器中，如div,table等，因?yàn)椴捎玫氖菢?biāo)識(shí)class樣式來進(jìn)行分組驗(yàn)證。
看下具體代碼：
//初始化分組驗(yàn)證 function InitValidationGroup() {$('.validationGroup .causesValidation').click(Validate);$('.validationGroup :text').keydown(function(evt) {if (evt.keyCode == 13) {var $nextInput = $(this).nextAll(':input:first');if ($nextInput.is(':submit')) {Validate(evt);}else {evt.preventDefault();$nextInput.focus();}}}); } function Validate(evt) {var $group = $(this).parents('.validationGroup');var isValid = true;$group.find(':input').each(function(i, item) {if (!$(item).valid())isValid = false;});if (!isValid)evt.preventDefault(); }上面的代碼就是用來進(jìn)行分組驗(yàn)證的初始化的，這段代碼會(huì)找尋頁面中標(biāo)有validationGroup樣式的元素（分組的容器），然后在這個(gè)元素中找?guī)ausesValidation樣式的元素（這個(gè)元素是引發(fā)驗(yàn)證的按鈕），
上面代碼實(shí)現(xiàn)分組驗(yàn)證的邏輯就是當(dāng)帶causesValidation樣式的元素引發(fā)驗(yàn)證后會(huì)找尋這個(gè)元素的父級(jí)validationGroup元素，然后遍歷validationGroup元素下的所有有驗(yàn)證規(guī)則的元素判斷是否驗(yàn)證通過。
頁面代碼:
<div id="tabs"><ul><li><a href="#baseinfo">基本信息</a></li><li><a href="#personaldesc">個(gè)人描述</a></li></ul><div id="baseinfo" class="validationGroup"><table cellpadding="1" cellspacing="1" border="1" width="50%" align="center"><tr><td>用戶名</td><td><asp:TextBox ID="txtUid" runat="server"></asp:TextBox></td></tr><tr><td>密碼</td><td><asp:TextBox ID="txtPwd" ValidationGroup="" TextMode="Password" runat="server"></asp:Text</td></tr><tr><td>確認(rèn)密碼</td><td><asp:TextBox ID="txtRePwd" TextMode="Password" runat="server"></asp:TextBox></td></tr><tr><td>姓名</td><td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td></tr><tr><td>年齡</td><td><asp:TextBox ID="txtAge" runat="server"></asp:TextBox></td></tr><tr><td>性別</td><td><asp:DropDownList ID="DropDownList1" runat="server" CssClass="required" disabled="true"><asp:ListItem></asp:ListItem><asp:ListItem Value="1">男</asp:ListItem><asp:ListItem Value="0">女</asp:ListItem></asp:DropDownList></td></tr><tr><td>郵箱</td><td><asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td></tr><tr><td colspan="2"><asp:Button ID="Button3" runat="server" Text="基本信息提交" CssClass="causesValidation"/></td></tr></table></div><div id="personaldesc" class="validationGroup"><p><asp:TextBox ID="txtDescription" runat="server" TextMode="MultiLine" Width="500px"Height="100px"></asp:TextBox></p><asp:Button ID="Button1" runat="server" Text="描述提交" CssClass="causesValidation"/></div> </div><script type="text/javascript">InitRules();isValidationGroup = true; </script>分析下代碼為2個(gè)tab頁面都加上validationGroup樣式，引發(fā)驗(yàn)證的按鈕加上causesValidation樣式，同時(shí)還需要標(biāo)記一個(gè)isValidationGroup = true; 表示頁面需要進(jìn)行分組驗(yàn)證，傳遞回母版頁。
注意：這邊的邏輯和手寫JS驗(yàn)證規(guī)則是一個(gè)邏輯，在母版頁建立一個(gè)isValidationGroup屬性默認(rèn)為false，只有當(dāng)頁面需要進(jìn)行分組驗(yàn)證則設(shè)為true。
接下來看下母版頁的的jQuery(document).ready()中的帶代碼：
if (isValidationGroup) {if (opts != undefined || opts != null) {jQuery("#<%=form1.ClientId %>").validate(jQuery.extend(opts, { onsubmit: false }));} else {jQuery("#<%=form1.ClientId %>").validate({onsubmit: false});}InitValidationGroup(); } else {if (opts != undefined || opts != null) {jQuery("#<%=form1.ClientId %>").validate(opts);} else {jQuery("#<%=form1.ClientId %>").validate();} }判斷isValidationGroup是否需要進(jìn)行分組驗(yàn)證，同時(shí)如果isValidationGroup為true，需要加入onsubmit：false，否則分組驗(yàn)證將無法有效。
1、如何使用jQuery.Validate進(jìn)行AJAX驗(yàn)證?
2、默認(rèn)jQuery.Validate在進(jìn)行AJAX驗(yàn)證時(shí)返回必須是bool類型，如何返回一個(gè)對(duì)象包括錯(cuò)誤消息及驗(yàn)證結(jié)果？
3、在反復(fù)使用jQuery.Validate進(jìn)行AJAX驗(yàn)證時(shí)，總是需要編寫相關(guān)AJAX參數(shù)，可否進(jìn)行進(jìn)一步封裝？
第一點(diǎn)：如何使用jQuery.Validate進(jìn)行AJAX驗(yàn)證?（具體見High-2.aspx）
jQuery.Validate為我們提供了一個(gè)方便的AJAX驗(yàn)證方式（封裝了jQuery的AJAX，同時(shí)將jQuery的AJAX和jQuery.Validate的驗(yàn)證很好的結(jié)合在一起），在此我僅僅介紹jQuery.Validate在ASP.NET下如何進(jìn)行AJAX驗(yàn)證，PHP、JSP等請(qǐng)查看官方例子。
我是采用jQuery.Validate+WebService進(jìn)行AJAX驗(yàn)證，客戶端編寫jQuery.Validate的remote驗(yàn)證屬性，服務(wù)器端采用WebSerice進(jìn)行接收參數(shù)進(jìn)行驗(yàn)證。
首先來看下jQuery.Validate的remote屬性如何編寫AJAX驗(yàn)證規(guī)則：
?
function InitRules() {opts = {rules:{<%=txtUid.UniqueID %>: {required: true,remote:{type: "POST",async: false,url: "WebService.asmx/CheckUid",dataType: "xml",data: {uid:function(){ return jQuery("#<%=txtUid.ClientID %>").val();}}}}}}}?
如果使用過jQuery.ajax的朋友肯定會(huì)很熟悉這段代碼，jQuery.Validate的remote采用和jQuery.ajax相同的參數(shù)設(shè)置（原因就上面所說的封裝了jQuery.ajax的原因）。
這邊來詳細(xì)講解下jQuery.Validate的remote的一些知識(shí)：
1、jQuery.Validate的remote默認(rèn)可以直接填寫遠(yuǎn)程驗(yàn)證的地址，格式為：remote:”validate.aspx”，但是很多情況下這個(gè)遠(yuǎn)程驗(yàn)證需要提交參數(shù)、返回類型等限制，所以就可以采用在“{}”中編寫具體屬性的方式來包裝提交參數(shù)。
2、jQuery.Validate的remote官方代碼中，遠(yuǎn)程的輸出只能是true或者false，不允許有其他輸出，這個(gè)我覺得不太好，具體的擴(kuò)展在后面我會(huì)講到。
3、jQuery.Validate的remote在使用時(shí)如果想提交參數(shù)需要以JSON的方式提交格式如下：
data: {uid:function(){ return jQuery("#<%=txtUid.ClientID %>").val();} }此處肯定會(huì)有人不明白，為什么參數(shù)需要以function的形式提交，而不是直接寫
jQuery("#<%=txtUid.ClientID %>").val();
這里我要說明的是：jQuery.Validate的驗(yàn)證規(guī)則是在頁面加載的時(shí)候就已經(jīng)被加載了的，如果還是像以往一樣直接寫"jQuery("#<%=txtUid.ClientID %>").val();"，那么驗(yàn)證的時(shí)候提交給服務(wù)器端的數(shù)據(jù)永遠(yuǎn)是頁面加載時(shí)txtUid控件的值。
而使用function的好處就是在頁面加載的時(shí)候僅僅告訴jQuery.Validate，在控件需要進(jìn)行remote驗(yàn)證的時(shí)候需要調(diào)用function這個(gè)函數(shù)，這樣就保證了在執(zhí)行remote驗(yàn)證的時(shí)候可以獲取到最新的值
我還修改了jQuery.Validate的remote方法，先來看下我修改的代碼（具體見scripts/jquery.validate1.js 896行）：
if (previous.old !== value) {previous.old = value;var validator = this;this.startRequest(element);var data = {};data[element.name] = value;$.ajax($.extend(true, {//url:url,//此URL無法獲取url: param.url,//獲取param驗(yàn)證規(guī)則中所寫路徑mode: "abort",port: "validate" + element.name,type: param.type,dataType: "json",//data:data,data: param.data || data,//獲取param.data或data中所提交的參數(shù)success: function(response) {以下省略... }這邊我修改了url和data的獲取方式，主要是因?yàn)樵谡嬲龍?zhí)行的時(shí)候，變量url是空的，所以需要從param中獲取。
而data為什么要改成param.data || data，主要原因就是下面這句代碼：
data[element.name] = value;
這句代碼的意思就是：為哪個(gè)控件設(shè)置遠(yuǎn)程驗(yàn)證就獲取哪個(gè)控件的值，但是在實(shí)際的開發(fā)中，當(dāng)遇到進(jìn)行AJAX驗(yàn)證的時(shí)候會(huì)出現(xiàn)需要同時(shí)提交多個(gè)數(shù)據(jù)的情況，此時(shí)這句代碼就是錯(cuò)誤的了，所以需要改成
param.data || data，這樣就能保證在提交多個(gè)數(shù)據(jù)的時(shí)候以多個(gè)數(shù)據(jù)為準(zhǔn)。
下面來看下webservice的代碼：
[WebMethod] public bool CheckUid(string uid) {return uid == "testuid" ? true : false; }相當(dāng)?shù)暮唵?#xff0c;就是判斷下用戶名是不是指定的用戶名。
注意：webservice.cs中必須將[System.Web.Script.Services.ScriptService]這個(gè)特性取消注釋，否則AJAX驗(yàn)證將無效！
第二點(diǎn)：默認(rèn)jQuery.Validate在進(jìn)行AJAX驗(yàn)證時(shí)返回必須是bool類型，如何返回一個(gè)對(duì)象包括錯(cuò)誤消息及驗(yàn)證結(jié)果？（具體見App_Code/WebService.cs/CheckUid）
在第一點(diǎn)中介紹jQuery.Validate知識(shí)的時(shí)候就提到了，jQuery.Validate默認(rèn)直接收true或false，但是在具體的開發(fā)中，我們會(huì)分層開發(fā)，三層或者多層，webservice在接收到驗(yàn)證請(qǐng)求后不做具體的處理直接調(diào)用邏輯層的驗(yàn)證方法，交由邏輯層進(jìn)行驗(yàn)證操作（當(dāng)然你也可以把驗(yàn)證全部寫在webservice中，但是這樣就體現(xiàn)不出分層的好處了），此時(shí)的驗(yàn)證會(huì)產(chǎn)生多種情況，以最常見的用戶名驗(yàn)證為例：
??? 1）用戶名已存在，此時(shí)的消息應(yīng)該是“用戶名已存在，請(qǐng)重新輸入！”
??? 2）用戶名不符合規(guī)則，此時(shí)的消息應(yīng)該是“用戶名不符合規(guī)則，請(qǐng)重新輸入！”
??? 3）驗(yàn)證時(shí)出現(xiàn)程序異常，此時(shí)的消息應(yīng)該是“程序出現(xiàn)異常，請(qǐng)聯(lián)系管理員！”
可以看出，僅僅一個(gè)用戶名驗(yàn)證就會(huì)出現(xiàn)這3種信息，如果不返回一個(gè)明確的消息，僅僅告訴用戶“用戶名有誤”，客戶端的使用者將會(huì)相當(dāng)?shù)耐纯?#xff0c;因?yàn)槭褂谜卟⒉恢浪挠脩裘斎氲降族e(cuò)在哪了。
所以為了更好的客戶體驗(yàn)，以及項(xiàng)目的合理性，我們?cè)诜?wù)器端封裝一個(gè)實(shí)體類（具體見AppCode/AjaxClass），代碼如下：
[Serializable] public class AjaxClass {public string Msg { get; set; }public int Result { get; set; } }就是一個(gè)最簡單的實(shí)體類，有2個(gè)屬性，Msg和Result，Msg用于存放驗(yàn)證失敗的信息，Result用于存放結(jié)果。
看下WebSerivce的代碼如何修改：
[WebMethod] public AjaxClass CheckUid(string uid) {//return uid == "testuid" ? true : false;AjaxClass ajaxClass = new AjaxClass();try{if (uid == "testuid"){ajaxClass.Msg = "用戶名已存在,請(qǐng)重新輸入!";ajaxClass.Result = 0;}else if (uid.IndexOf("test") == -1){ajaxClass.Msg = "用戶名格式不正確,用戶名必須包含test,請(qǐng)重新輸入!";ajaxClass.Result = 0;}else{ajaxClass.Msg = "格式正確!";ajaxClass.Result = 1;}}catch{ajaxClass.Msg = "程序出現(xiàn)異常,請(qǐng)聯(lián)系管理員!";ajaxClass.Result = 0;}return ajaxClass; }上面的WebService就完整的實(shí)現(xiàn)了我先前說的3種錯(cuò)誤情況（由于這邊僅僅是例子所以就只有表示層，實(shí)際開發(fā)中需要分層開發(fā)，此代碼應(yīng)該放入業(yè)務(wù)邏輯層）
注意：在webservice返回值前，如果檢查成功必須要為ajaxClass.Result = 1，否則客戶端驗(yàn)證會(huì)無法通過。
雖然完成了服務(wù)器端的代碼修改，但是直接運(yùn)行頁面還是會(huì)出錯(cuò)，這是因?yàn)槲疑厦嫠f過的，jQuery.Validate的remote遠(yuǎn)程的輸出只能是true或者false，我們來看下具體的代碼，其中注釋掉的就是原來官方的代碼：
success: function(response) {if (response.Result) {//if(response){var submitted = validator.formSubmitted;validator.prepareElement(element);validator.formSubmitted = submitted;validator.successList.push(element);validator.showErrors();} else {var errors = {};//errors[element.name] = response.Result || validator.defaultMessage(element, "remote");errors[element.name] = response.Msg;validator.showErrors(errors);}previous.message = response.Msg; //previous.valid = response;previous.valid = response.Result;validator.stopRequest(element, response.Result); }可以看到一共修改了3處地方：
1、判斷返回值，原來是直接判斷response，現(xiàn)在則是判斷response.Result，因?yàn)楝F(xiàn)在的response已經(jīng)是一個(gè)包含消息及結(jié)果的對(duì)象了。
2、錯(cuò)誤消息，原來的錯(cuò)誤消息是直接獲取默認(rèn)配置好的消息，我這邊是獲取response.Msg。
3、設(shè)置previous對(duì)象，將previous對(duì)象的消息和結(jié)果設(shè)置為AJAX返回的消息和結(jié)果，以供jQuery.Validate下面代碼的返回。
這樣jQuery.Validate的remote的方法就修改了，但是并沒有結(jié)束，原因是先前在AJAX提交參數(shù)的時(shí)候由于jQuery.Validate的驗(yàn)證規(guī)則的緣故，提交的參數(shù)并不是以JSON的格式提交的而是以{uid:function()}這樣的方式，結(jié)果就導(dǎo)致了無法設(shè)置jQuery.AJAX的contentType:"application/json; charset=utf-8"，如果設(shè)置了會(huì)出現(xiàn)以下錯(cuò)誤：
這樣從webservice返回的AjaxClass對(duì)象就無法像以往的JSON方式直接操作了，所以我們只能換一種格式——XML，因?yàn)閣ebservice默認(rèn)返回的數(shù)據(jù)是XML格式：
<?xml version="1.0" encoding="utf-8" ?> - <AjaxClass xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/"><Msg>用戶名格式不正確,用戶名必須包含test,請(qǐng)重新輸入!</Msg> <Result>0</Result> </AjaxClass>接下來看下具體的remote方法應(yīng)該如何編寫，設(shè)置dataType:”xml”，然后將XML數(shù)據(jù)轉(zhuǎn)換成一個(gè)對(duì)象以供上面我修改的jQuery.Validate的remote方法中ajaxsuccess的使用，具體看一下代碼：
remote:{type: "POST",dataType:"json",async: false,url: "WebService.asmx/CheckUid",data: {uid:function(){ return jQuery("#<%=txtUid.ClientID %>").val();}},dataFilter: function(dataXML) {var result = new Object();result.Result = jQuery(dataXML).find("Result").text();result.Msg = jQuery(dataXML).find("Msg").text();if (result.Result == "-1") {result.Result = false;return result;}else {result.Result = result.Result == "1" ? true : false;return result;}} }就是jQuery.Ajax方法dataFilter，可以在AJAX請(qǐng)求成功后將數(shù)據(jù)進(jìn)行過濾處理，這里我就使用了jQuery方法把結(jié)果和消息從XML中獲取出來直接賦給一個(gè)對(duì)象，再將這個(gè)對(duì)象返回，交由ajaxsuccess使用。
這樣就算是完成了修改jQuery.Validate的remote方法，使得可以返回驗(yàn)證結(jié)果及驗(yàn)證消息，看下效果圖：
第三點(diǎn)：在反復(fù)使用jQuery.Validate進(jìn)行AJAX驗(yàn)證時(shí)，總是需要編寫相關(guān)AJAX參數(shù)，可否進(jìn)行進(jìn)一步封裝？（具體見High-3.aspx和jquery.validate.extension.js）
在開發(fā)一個(gè)系統(tǒng)的時(shí)候經(jīng)常會(huì)用到AJAX的驗(yàn)證，而如果每次都要編寫上面那么多的代碼還是很不方便，所以我現(xiàn)在就來進(jìn)行一下簡單的封裝，代碼如下：
//遠(yuǎn)程驗(yàn)證抽象方法 function GetRemoteInfo(postUrl, data) {var remote = {type: "POST",async: false,url: postUrl,dataType: "xml",data: data,dataFilter: function(dataXML) {var result = new Object();result.Result = jQuery(dataXML).find("Result").text();result.Msg = jQuery(dataXML).find("Msg").text();if (result.Result == "-1") {result.Result = false;return result;}else {result.Result = result.Result == "1" ? true : false;return result;}}};return remote; }這個(gè)函數(shù)主要接收2個(gè)參數(shù)，一個(gè)是遠(yuǎn)程驗(yàn)證的路徑和需要提交的參數(shù)，返回包裝好的remote對(duì)象。
頁面調(diào)用也很簡單，代碼如下：
<script src="scripts/jquery.validate.extension.js" type="text/javascript"></script><script type="text/javascript">function InitRules() {var dataInfo = {uid:function(){ return jQuery("#<%=txtUid.ClientID %>").val();}};var remoteInfo = GetRemoteInfo('WebService.asmx/CheckUid', dataInfo);opts = {rules:{<%=txtUid.UniqueID %>: {required: true,remote:remoteInfo}}}}</script>轉(zhuǎn)載于:https://www.cnblogs.com/1234cjq/p/6950140.html
總結(jié)
- 上一篇： VirtualBox 无权限问题
- 下一篇： 交换两个变量的值，不使用第三个变量的四种