jQuery.Validate驗證庫

1、用前必備 官方網站：http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassistance.de/api-browser/plugins.html 當前版本：1.5.5 須要JQuery版本：1.2.6+, 兼容 1.3.2 2、默認校驗規則 (1)required:true 必輸字段 (2)remote:"check.php" 使用ajax方法調用check.php驗證輸入值 (3)email:true 必須輸入正確格式的電子郵件 (4)url:true 必須輸入正確格式的網址 (5)date:true 必須輸入正確格式的日期 (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 3、默認的提示 messages: { required: "This field is required.", remote: "Please fix this field.", email: "Please enter a valid email address.", url: "Please enter a valid URL.", date: "Please enter a valid date.", dateISO: "Please enter a valid date (ISO).", dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.", number: "Please enter a valid number.", numberDE: "Bitte geben Sie eine Nummer ein.", digits: "Please enter only digits", creditcard: "Please enter a valid credit card number.", equalTo: "Please enter the same value again.", accept: "Please enter a value with a valid extension.", maxlength: $.validator.format("Please enter no more than {0} characters."), minlength: $.validator.format("Please enter at least {0} characters."), rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."), range: $.validator.format("Please enter a value between {0} and {1}."), max: $.validator.format("Please enter a value less than or equal to {0}."), min: $.validator.format("Please enter a value greater than or equal to {0}.") }, 如須要修改，可在js代碼中加入： jQuery.extend(jQuery.validator.messages, { required: "必選字段", remote: "請修正該字段", email: "請輸入正確格式的電子郵件", url: "請輸入合法的網址", date: "請輸入合法的日期", dateISO: "請輸入合法的日期 (ISO).", number: "請輸入合法的數字", digits: "只能輸入整數", creditcard: "請輸入合法的信用卡號", equalTo: "請再次輸入相同的值", accept: "請輸入擁有合法後綴名的字符串", maxlength: jQuery.validator.format("請輸入一個長度最可能是 {0} 的字符串"), minlength: jQuery.validator.format("請輸入一個長度最少是 {0} 的字符串"), rangelength: jQuery.validator.format("請輸入一個長度介於 {0} 和 {1} 之間的字符串"), range: jQuery.validator.format("請輸入一個介於 {0} 和 {1} 之間的值"), max: jQuery.validator.format("請輸入一個最大爲 {0} 的值"), min: jQuery.validator.format("請輸入一個最小爲 {0} 的值") }); 推薦作法，將此文件放入messages_cn.js中，在頁面中引入 4、使用方式 1.將校驗規則寫到控件中 $().ready(function() { $("#signupForm").validate(); });

Firstname

E-Mail

Password

確認密碼

使用class="{}"的方式，必須引入包：jquery.metadata.js 可使用以下的方法，修改提示內容： class="{required:true,minlength:5,messages:{required:'請輸入內容'}}" 在使用equalTo關鍵字時，後面的內容必須加上引號，以下代碼： class="{required:true,minlength:5,equalTo:'#password'}" 另一個方式，使用關鍵字：meta（爲了元數據使用其餘插件你要包裝 你的驗證規則 在他們本身的項目中能夠用這個特殊的選項） Tell the validation plugin to look inside a validate-property in metadata for validation rules. 例如： meta: "validate" 再有一種方式： $.metadata.setType("attr", "validate"); 這樣可使用validate="{required:true}"的方式，或者class="required"，但class="{required:true,minlength:5}"將不起做用 2.將校驗規則寫到代碼中 $().ready(function() { $("#signupForm").validate({ rules: { firstname: "required", email: { required: true, email: true }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" } }, messages: { firstname: "請輸入姓名", email: { required: "請輸入Email地址", email: "請輸入正確的email地址" }, password: { required: "請輸入密碼", minlength: jQuery.format("密碼不能小於{0}個字符") }, confirm_password: { required: "請輸入確認密碼", minlength: "確認密碼不能小於5個字符", equalTo: "兩次輸入密碼不一致不一致" } } }); }); //messages處，若是某個控件沒有message，將調用默認的信息

Firstname

E-Mail

Password

確認密碼

required:true 必須有值 required:"#aa:checked"表達式的值爲真，則須要驗證 required:function(){}返回爲真，表時須要驗證 後邊兩種經常使用於，表單中須要同時填或不填的元素 5、經常使用方法及注意問題 1.用其餘方式替代默認的SUBMIT $().ready(function() { $("#signupForm").validate({ submitHandler:function(form){ alert("submitted"); form.submit(); } }); }); 能夠設置validate的默認值，寫法以下： $.validator.setDefaults({ submitHandler: function(form) { alert("submitted!");form.submit(); } }); 若是想提交表單, 須要使用form.submit()而不要使用$(form).submit() 2.debug，若是這個參數爲true，那麼表單不會提交，只進行檢查，調試時十分方便 $().ready(function() { $("#signupForm").validate({ debug:true }); }); 若是一個頁面中有多個表單，用 $.validator.setDefaults({ debug: true }) 3.ignore：忽略某些元素不驗證 ignore: ".ignore" 4.errorPlacement：Callback Default: 把錯誤信息放在驗證的元素後面 指明錯誤放置的位置，默認狀況是：error.appendTo(element.parent());即把錯誤信息放在驗證的元素後面 errorPlacement: function(error, element) { error.appendTo(element.parent()); } //示例： First Name 14/02/07 02/14/07  

I have read and accept the Terms of Use.

errorPlacement: function(error, element) { if ( element.is(":radio") ) error.appendTo( element.parent().next().next() ); else if ( element.is(":checkbox") ) error.appendTo ( element.next() ); else error.appendTo( element.parent().next() ); } 代碼的做用是：通常狀況下把錯誤信息顯示在中，若是是radio顯示在中，若是是checkbox顯示在內容的後面 errorClass：String Default: "error" 指定錯誤提示的css類名，能夠自定義錯誤提示的樣式 errorElement：String Default: "label" 用什麼標籤標記錯誤，默認的是label你能夠改爲em errorContainer：Selector 顯示或者隱藏驗證信息，能夠自動實現有錯誤信息出現時把容器屬性變爲顯示，無錯誤時隱藏，用處不大 errorContainer: "#messageBox1, #messageBox2" errorLabelContainer：Selector 把錯誤信息統一放在一個容器裏面。 wrapper：String 用什麼標籤再把上邊的errorELement包起來 通常這三個屬性同時使用，實如今一個容器內顯示全部錯誤提示的功能，而且沒有信息時自動隱藏 errorContainer: "div.error", errorLabelContainer: $("#signupForm div.error"), wrapper: "li" 設置錯誤提示的樣式，能夠增長圖標顯示 input.error { border: 1px solid red; } label.error { background:url("./demo/images/unchecked.gif") no-repeat 0px 0px; padding-left: 16px; padding-bottom: 2px; font-weight: bold; color: #EA5200; } label.checked { background:url("./demo/images/checked.gif") no-repeat 0px 0px; } success：String,Callback 要驗證的元素經過驗證後的動做，若是跟一個字符串，會當作一個css類，也可跟一個函數 success: function(label) { // set   as text for IE label.html(" ").addClass("checked"); //label.addClass("valid").text("Ok!") } 添加"valid" 到驗證元素, 在CSS中定義的樣式 success: "valid" nsubmit： Boolean Default: true 提交時驗證. 設置惟false就用其餘方法去驗證 onfocusout：Boolean Default: true 失去焦點是驗證(不包括checkboxes/radio buttons) onkeyup：Boolean Default: true 在keyup時驗證. onclick：Boolean Default: true 在checkboxes 和 radio 點擊時驗證 focusInvalid：Boolean Default: true 提交表單後，未經過驗證的表單(第一個或提交以前得到焦點的未經過驗證的表單)會得到焦點 focusCleanup：Boolean Default: false 若是是true那麼當未經過驗證的元素得到焦點時，移除錯誤提示。避免和 focusInvalid 一塊兒用 // 重置表單 $().ready(function() { var validator = $("#signupForm").validate({ submitHandler:function(form){ alert("submitted"); form.submit(); } }); $("#reset").click(function() { validator.resetForm(); }); }); remote：URL 使用ajax方式進行驗證，默認會提交當前驗證的值到遠程地址，若是須要提交其餘的值，可使用data選項 remote: "check-email.php" remote: { url: "check-email.php", //後臺處理程序 type: "post", //數據發送方式 dataType: "json", //接受數據格式 data: { //要傳遞的數據 username: function() { return $("#username").val(); } } } 遠程地址只能輸出 "true" 或 "false"，不能有其它輸出 addMethod：name, method, message 自定義驗證方法 // 中文字兩個字節 jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { var length = value.length; for(var i = 0; i < value.length; i++){ if(value.charCodeAt(i) > 127){ length++; } } return this.optional(element) || ( length >= param[0] && length <= param[1] ); }, $.validator.format("請確保輸入的值在{0}-{1}個字節之間(一箇中文字算2個字節)")); // 郵政編碼驗證 jQuery.validator.addMethod("isZipCode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, "請正確填寫您的郵政編碼"); radio和checkbox、select的驗證 radio的required表示必須選中一個 checkbox的required表示必須選中 checkbox的minlength表示必須選中的最小個數,maxlength表示最大的選中個數,rangelength:[2,3]表示選中個數區間 select的required表示選中的value不能爲空 Buga Baga Oi select的minlength表示選中的最小個數（可多選的select）,maxlength表示最大的選中個數,rangelength:[2,3]表示選中個數區間 Banana Apple Peach Turtle ////////////////////////////////////////////////////////////////////////////////////////////// jQuery.Validate是監控form，在任何提交表單的操做前jQuery.Validate都會檢測表單裏的輸入項是否知足規則，知足才容許提交。因此需 要在jQuery(document).ready（）時爲form進行驗證註冊 具體代碼以下: 複製代碼

複製代碼 jQuery.Validate爲咱們提供了3種驗證編寫方式，各有優缺點： 一、在input對象中書寫class樣式指定驗證規則或屬性驗證規則： 如 最簡單、最便捷，提示消息使用jQuery.Validate的內置的消息（自定義擴展驗證規則也屬於此項），可是因爲是以樣式名的方式進行驗證，致使了往後修改必須找到相應的input對象，同時沒法使用高級驗證規則，具體說明請向下看 二、同第1條，這種驗證規則方式也是在input對象中書寫class樣式，只不過書寫的方式改成了JSON格式，可是這種方式提供了自定義驗證消息的支持： 如 能夠看到這樣寫驗證規則雖然簡單，可是若是我要爲這個控件應用其餘樣式怎麼辦？因此如今就是處理這個問題的時候了，在頁面的頭部加上一句代碼： jQuery.metadata.setType("attr", "validate"); 因爲這種驗證規則方式須要依賴jQuery.metadata才能夠正常運做，因此咱們須要在jQuery.metadata上作文章，分析下jQuery.metadata的代碼，能夠看到，默認狀況下它是檢測控件的class屬性： defaults : { type: 'class', name: 'metadata', cre: /({.*})/, single: 'metadata' } 那咱們可不能夠更改這個屬性呢？確定是能夠的，就是在頁面上加上那句代碼，更改其檢測的屬性。 接着咱們還須要修改下頁面中的代碼，將原來全部的"CssClass」改成咱們更改的檢測屬性"validate」、 這樣就很好的更改了驗證規則所存放的屬性了。 第2點：在ASP.NET下，全部的按鈕都會提交form表單，因此都會引起驗證，如何處理？（具體見Middle-4.aspx中btnNoValidate按鈕） 在實際的開發當中，一個頁面上總會有N個按鈕，因爲ASP.NET的機制特性，全部的控件都會回發頁面，也就提交了表單，可是此時整個表單都被jQuery.Validate所監控，因此只要頁面中有某個地方不符合驗證規則，任何回發頁面的操做都會被攔截住，可是實際上咱們須要引起驗證的按鈕只有1或者2個，而其餘按鈕不須要，這時咱們就要想辦法了。 其實很簡單，就是爲不須要引起驗證的控件加個樣式"cancel"便可，代碼以下： 怎麼樣很簡單吧？ 第3點：我但願驗證的提示信息能夠在統一的地方顯示，如何處理？（具體見Middle-5.aspx） 在開發的過程中，會有一些特殊的需求，就好比頁面上使用了tab頁面，而提交按鈕就一個，這時就須要將驗證提示信息統一放在一個位置，好方便查看，如圖： pic21 要實現這個效果只需在JS編寫驗證規則時添加： errorPlacement: function(error, element) { error.html(error.html()+"
"); error.appendTo("#errorContainer"); } error是一個label對象裏面包含了錯誤消息，element則是驗證未經過的對象元素，經過errorPlacement能夠方便的將驗證提示信息統一放入一個位置。 第4點：我在開發的過程當中，我不肯定所編寫的規則是否正確，如何進行調試？（具體見Middle-5.aspx） 這個就比較簡單了，jQuery.Validate默認已經爲咱們考慮過了，只需在JS編寫規則時添加一個屬性： debug:true 這樣就表示如今在調試，這時不會提交表單。 第5點：我使用的是微軟AJAX控件，想監控dropdownlist是否選擇，爲什麼不起做用?（具體見Middle-5.aspx中的性別） 在使用微軟AJAX控件中的dropdownlist級聯時，好比省市區聯動，若是省沒有選擇，則市和區都是灰的，是disabled狀態，是被禁用的，相似代碼以下： 男 女 我這邊是強制把這個DropDownList禁用了，這時若是爲這個控件加上「required」將不會有任何反應，由於在jQuery.Validate代碼中默認是不驗證的，具體代碼見jQuery.Validate.js414行： not(":submit, :reset, :image, [disabled]") 因此爲了方便咱們使用，咱們修改下代碼，將[disabled]"去除，改成： not(":submit, :reset, :image") 這樣再刷新下頁面，驗證就起做用了。 第6點：radiobox，checkbox，listbox如何進行高級應用？如何指定選擇數量？（具體請見radio-checkbox-select-demo.html） 這點我直接引用了官方關於radiobox，checkbox，listbox應用的例子，由於官方的例子已經寫的很是好了。 一、擴展驗證規則，jQuery.Validate只提供了一些基本的驗證功能，並不能知足咱們平常開發的需求，因此咱們要爲jQuery.Validate擴展驗證規則。 二、分組驗證，在開發的時候有時會遇到的一個問題就是，不一樣按鈕引起不一樣的驗證。 首先來介紹下第一點：擴展驗證規則，在jQuery.Validate默認的驗證規則沒法知足咱們的平常開發需求的時候，咱們須要根據本身的業務需求指定一些相應的規則。（具體見MasterPage.master） 爲了擴展驗證規則，咱們首先要看下jQuery.Validate爲咱們提供的擴展方法： addMethod: function(name, method, message) { $.validator.methods[name] = method; $.validator.messages[name] = message; if (method.length < 3) { $.validator.addClassRules(name, $.validator.normalizeRule(name)); } }, 這段代碼就是用來擴展驗證規則的，意思很簡單，就是向jQuery.Validate添加驗證方法。 接收3個參數：name-驗證規則名 method-驗證規則實現函數（function） message-驗證不經過顯示的錯誤消息 當咱們調用了這個方法後，咱們所寫的規則自動就會加入到jQuery.Validate規則中。 好了，咱們看下具體如何實現： 手機號碼驗證： 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); }, "請輸入正確的手機號碼"); 這邊的method須要注意的是，這個method實現函數接收2個元素： value：檢測的對象的值 element：檢測的對象 這邊我定義了一個名爲「telphoneValid」的驗證規則，在驗證規則裏我首先定義了個手機驗證的正則表達式，而後將值放入正則表達式進行驗證，返回驗證結果，返回的錯誤消息是「請輸入正確的手機號碼」。 這樣就完成了一個簡單的手機號碼驗證規則擴展。 第2點：分組驗證，這個分組驗證在默認的jQuery.Validate中默認是不支持的，也是我以爲很不爽的，由於在實際的開發過程當中常常會碰到須要分組驗證的時候。 這點微軟的驗證控件就作的很好，在微軟的控件裏，默認都有ValidationGroup這個屬性，只要把屬性名設置爲相同就能夠進行分組驗證了，可是jQuery.Validate自身卻沒提供這個功能，因此咱們只能本身擴展了。 來一下具體的場景，在一個頁面裏有2個tab頁面，不一樣tab頁面須要不一樣的提交按鈕： pic22 pic23 這2個就是標準的分組驗證狀況，若是不設置分組驗證的狀況下，點擊[基本信息提交]和[描述提交]按鈕後頁面上全部的驗證都會被相應，這是由於2個按鈕都在一個form表單中，2個按鈕的點擊事件默認都是在客戶端提交表單，而後由服務器端來分配執行代碼，因此問題就出現了。 這時咱們就須要引入分組驗證了，這個解決思路是我在一個國外的網站找到的，不過具體地址我找不到了，這個方法有個弊端就是必須是將須要分組的控件必須放入不一樣的容器中，如div,table等，由於採用的是標識class樣式來進行分組驗證。 看下具體代碼： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 //初始化分組驗證 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(); } 上面的代碼就是用來進行分組驗證的初始化的，這段代碼會找尋頁面中標有validationGroup樣式的元素（分組的容器），而後在這個元素中找帶causesValidation樣式的元素（這個元素是引起驗證的按鈕）， 上面代碼實現分組驗證的邏輯就是當帶causesValidation樣式的元素引起驗證後會找尋這個元素的父級validationGroup元素，而後遍歷validationGroup元素下的全部有驗證規則的元素判斷是否驗證經過。 頁面代碼: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87

• 基本信息
• 我的描述

用戶名
密碼
確認密碼
姓名
年齡
性別	男 女
郵箱

分析下代碼爲2個tab頁面都加上validationGroup樣式，引起驗證的按鈕加上causesValidation樣式，同時還須要標記一個isValidationGroup = true; 表示頁面須要進行分組驗證，傳遞迴母版頁。 注意：這邊的邏輯和手寫JS驗證規則是一個邏輯，在母版頁創建一個isValidationGroup屬性默認爲false，只有當頁面須要進行分組驗證則設爲true。 接下來看下母版頁的的jQuery(document).ready()中的帶代碼： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 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是否須要進行分組驗證，同時若是isValidationGroup爲true，須要加入onsubmit：false，不然分組驗證將沒法有效。 一、如何使用jQuery.Validate進行AJAX驗證? 二、默認jQuery.Validate在進行AJAX驗證時返回必須是bool類型，如何返回一個對象包括錯誤消息及驗證結果？ 三、在反覆使用jQuery.Validate進行AJAX驗證時，老是須要編寫相關AJAX參數，能否進行進一步封裝？ 第一點：如何使用jQuery.Validate進行AJAX驗證?（具體見High-2.aspx） jQuery.Validate爲咱們提供了一個方便的AJAX驗證方式（封裝了jQuery的AJAX，同時將jQuery的AJAX和jQuery.Validate的驗證很好的結合在一塊兒），在此我僅僅介紹jQuery.Validate在ASP.NET下如何進行AJAX驗證，PHP、JSP等請查看官方例子。 我是採用jQuery.Validate+WebService進行AJAX驗證，客戶端編寫jQuery.Validate的remote驗證屬性，服務器端採用WebSerice進行接收參數進行驗證。 首先來看下jQuery.Validate的remote屬性如何編寫AJAX驗證規則： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 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的朋友確定會很熟悉這段代碼，jQuery.Validate的remote採用和jQuery.ajax相同的參數設置（緣由就上面所說的封裝了jQuery.ajax的緣由）。 這邊來詳細講解下jQuery.Validate的remote的一些知識： 一、jQuery.Validate的remote默承認以直接填寫遠程驗證的地址，格式爲：remote:」validate.aspx」，可是不少狀況下這個遠程驗證須要提交參數、返回類型等限制，因此就能夠採用在「{}」中編寫具體屬性的方式來包裝提交參數。 二、jQuery.Validate的remote官方代碼中，遠程的輸出只能是true或者false，不容許有其餘輸出，這個我以爲不太好，具體的擴展在後面我會講到。 三、jQuery.Validate的remote在使用時若是想提交參數須要以JSON的方式提交格式以下： 1 2 3 4 5 data: { uid:function(){ return jQuery("#<%=txtUid.ClientID %>").val(); } } 此處確定會有人不明白，爲何參數須要以function的形式提交，而不是直接寫 jQuery("#<%=txtUid.ClientID %>").val(); 這裏我要說明的是：jQuery.Validate的驗證規則是在頁面加載的時候就已經被加載了的，若是仍是像以往同樣直接寫"jQuery("#<%=txtUid.ClientID %>").val();"，那麼驗證的時候提交給服務器端的數據永遠是頁面加載時txtUid控件的值。 而使用function的好處就是在頁面加載的時候僅僅告訴jQuery.Validate，在控件須要進行remote驗證的時候須要調用function這個函數，這樣就保證了在執行remote驗證的時候能夠獲取到最新的值 我還修改了jQuery.Validate的remote方法，先來看下我修改的代碼（具體見scripts/jquery.validate1.js 896行）： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 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驗證規則中所寫路徑 mode: "abort", port: "validate" + element.name, type: param.type, dataType: "json", //data:data, data: param.data || data,//獲取param.data或data中所提交的參數 success: function(response) { 如下省略... } 這邊我修改了url和data的獲取方式，主要是由於在真正執行的時候，變量url是空的，因此須要從param中獲取。 而data爲何要改爲param.data || data，主要緣由就是下面這句代碼： data[element.name] = value; 這句代碼的意思就是：爲哪一個控件設置遠程驗證就獲取哪一個控件的值，可是在實際的開發中，當遇到進行AJAX驗證的時候會出現須要同時提交多個數據的狀況，此時這句代碼就是錯誤的了，因此須要改爲 param.data || data，這樣就能保證在提交多個數據的時候以多個數據爲準。 下面來看下webservice的代碼： [WebMethod] public bool CheckUid(string uid) { return uid == "testuid" ? true : false; } 至關的簡單，就是判斷下用戶名是否是指定的用戶名。 注意：webservice.cs中必須將[System.Web.Script.Services.ScriptService]這個特性取消註釋，不然AJAX驗證將無效！ 第二點：默認jQuery.Validate在進行AJAX驗證時返回必須是bool類型，如何返回一個對象包括錯誤消息及驗證結果？（具體見App_Code/WebService.cs/CheckUid） 在第一點中介紹jQuery.Validate知識的時候就提到了，jQuery.Validate默認直接收true或false，可是在具體的開發中，咱們會分層開發，三層或者多層，webservice在接收到驗證請求後不作具體的處理直接調用邏輯層的驗證方法，交由邏輯層進行驗證操做（固然你也能夠把驗證所有寫在webservice中，可是這樣就體現不出分層的好處了），此時的驗證會產生多種狀況，以最多見的用戶名驗證爲例： 1）用戶名已存在，此時的消息應該是「用戶名已存在，請從新輸入！」 2）用戶名不符合規則，此時的消息應該是「用戶名不符合規則，請從新輸入！」 3）驗證時出現程序異常，此時的消息應該是「程序出現異常，請聯繫管理員！」 能夠看出，僅僅一個用戶名驗證就會出現這3種信息，若是不返回一個明確的消息，僅僅告訴用戶「用戶名有誤」，客戶端的使用者將會至關的痛苦，由於使用者並不知道他的用戶名輸入到底錯在哪了。 因此爲了更好的客戶體驗，以及項目的合理性，咱們在服務器端封裝一個實體類（具體見AppCode/AjaxClass），代碼以下： [Serializable] public class AjaxClass { public string Msg { get; set; } public int Result { get; set; } } 就是一個最簡單的實體類，有2個屬性，Msg和Result，Msg用於存放驗證失敗的信息，Result用於存放結果。 看下WebSerivce的代碼如何修改： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 [WebMethod] public AjaxClass CheckUid(string uid) { //return uid == "testuid" ? true : false; AjaxClass ajaxClass = new AjaxClass(); try { if (uid == "testuid") { ajaxClass.Msg = "用戶名已存在,請從新輸入!"; ajaxClass.Result = 0; } else if (uid.IndexOf("test") == -1) { ajaxClass.Msg = "用戶名格式不正確,用戶名必須包含test,請從新輸入!"; ajaxClass.Result = 0; } else { ajaxClass.Msg = "格式正確!"; ajaxClass.Result = 1; } } catch { ajaxClass.Msg = "程序出現異常,請聯繫管理員!"; ajaxClass.Result = 0; } return ajaxClass; } 上面的WebService就完整的實現了我先前說的3種錯誤狀況（因爲這邊僅僅是例子因此就只有表示層，實際開發中須要分層開發，此代碼應該放入業務邏輯層） 注意：在webservice返回值前，若是檢查成功必需要爲ajaxClass.Result = 1，不然客戶端驗證會沒法經過。 雖然完成了服務器端的代碼修改，可是直接運行頁面仍是會出錯，這是由於我上面所說過的，jQuery.Validate的remote遠程的輸出只能是true或者false，咱們來看下具體的代碼，其中註釋掉的就是原來官方的代碼： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 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處地方： 一、判斷返回值，原來是直接判斷response，如今則是判斷response.Result，由於如今的response已是一個包含消息及結果的對象了。 二、錯誤消息，原來的錯誤消息是直接獲取默認配置好的消息，我這邊是獲取response.Msg。 三、設置previous對象，將previous對象的消息和結果設置爲AJAX返回的消息和結果，以供jQuery.Validate下面代碼的返回。 這樣jQuery.Validate的remote的方法就修改了，可是並無結束，緣由是先前在AJAX提交參數的時候因爲jQuery.Validate的驗證規則的緣故，提交的參數並非以JSON的格式提交的而是以{uid:function()}這樣的方式，結果就致使了沒法設置jQuery.AJAX的contentType:"application/json; charset=utf-8"，若是設置了會出現如下錯誤： pic24這樣從webservice返回的AjaxClass對象就沒法像以往的JSON方式直接操做了，因此咱們只能換一種格式——XML，由於webservice默認返回的數據是XML格式： - 用戶名格式不正確,用戶名必須包含test,請從新輸入! 0