碼上歡樂
相關內容    簡體    繁體

jQuery.validate errorPlacement

本文轉載自   查看原文   2014-04-12 13:44   3944 
在被驗證的控件的后一個元素控制顯示
errorPlacement: function(error, element) {
element.next().css("color","red");
if(error.text() == ''){
element.next().html("ok");
} else {
element.next().html(error.text());
}
},
 
 
 
errorElement : 'span',
errorPlacement: function(error, element) {  
   error.appendTo(element.parent());  
},
success: function(label) {
        label.addClass("valid")
   },

 
    
    // 中文驗證
$.validator.addMethod("stringCheck", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "只能包括中文字、英文字母、數字和下划線");
 
// 只能中文
$.validator.addMethod("CNonly", function(value, element) {
return this.optional(element) || /^[\u4e00-\u9fa5]+$/.test(value);
}, "只能輸入漢字");

 
 

one(type, [data], fn)

概述

為每一個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數。

在每個對象上，這個事件處理函數只會被執行一次。其他規則與bind()函數相同。這個事件處理函數會接收到一個事件對象，可以通過它來阻止（瀏覽器）默認的行為。如果既想取消默認的行為，又想阻止事件起泡，這個事件處理函數必須返回false

 

可以使用jq 自帶的屬性改變錯誤的顯示的位置,其中element是驗證未通過的當前表單元素,error為錯誤后的提示信息
$("#subscribeForm").validate({
errorPlacement : function(error, element) {
if (element.is(":radio"))
error.appendTo(element.parent());
else if (element.is(":checkbox"))
error.appendTo(element.parent().parent());
else
error.appendTo(element.parent().next());
}
rules : {username:required : true,maxlength : 20}
});
使用jq為我們自帶的屬性可以在不"破解原界面的情況下"方便的統一修改，希望我的回答能給你帶來幫助！
 

jQuery驗證框架（一） 可選項 (jQuery validation)

jQuery驗證框架

Html代碼
  1. <script type="text/javascript" src=js/jquery-1.3.2.min.js></script>  
  2. <script type="text/javascript" src=js/jquery.validate.pack.js></script>  
  3. <script type="text/javascript">  
  4.     $(document).ready(function(){  
  5.         $("#textForm").validate();  
  6.     });  
  7. </script>  
  8. <form class="cmxform" id="commentForm" method="get" action="">  
  9.     Name<input id="cname" name="name" size="25" class="required" minlength="2" />  
  10.         <input class="submit" type="submit" value="Submit"/>  
  11. </form>  


此文謹以以上js片段開始介紹jQuery Validation。
驗證從這個方法開始：validate( [options] )
一、可選項( options )
[1]  debug      類型：Boolean    默認：false
      說明：開啟調試模式。如果為true，表單不會提交，而且會在控制台顯示一些錯誤消息（需要Firebug或者Firebug lite）。當要阻止表單默認提交事件，嘗試去開啟它。

Js代碼
  1. $(".selector").validate({  
  2.    debug: true  
  3. })  



[2]  submitHandler      類型：Callback    默認：default (native) form submit
      說明：當表單通過驗證，提交表單。回調函數有個默認參數form

Js代碼
  1. $(".selector").validate({  
  2.    submitHandler: function(form) {  
  3.        // do other stuff for a valid form  
  4.     form.submit();  
  5.    }  
  6. })  



[3]  invalidHandler      類型：Callback
      說明：當未通過驗證的表單提交時，可以在該回調函數中處理一些事情。該回調函數有兩個參數：第一個為一個事件對象，第二個為驗證器（validator）

Js代碼
  1. $(".selector").validate({  
  2.     invalidHandler: function(form, validator) {  
  3.       var errors = validator.numberOfInvalids();  
  4.       if (errors) {  
  5.         var message = errors == 1  
  6.           ? 'You missed 1 field. It has been highlighted'  
  7.           : 'You missed ' + errors + ' fields. They have been highlighted';  
  8.         $("div.error span").html(message);  
  9.         $("div.error").show();  
  10.       } else {  
  11.         $("div.error").hide();  
  12.       }  
  13.     }  
  14.  })  



[4]  ignore      類型：Seletor
      說明：當進行表單驗證時，過濾掉選擇器所選擇的表單。用了jQuery not方法（ not() ）。類型為submit和reset的表單總是被忽略的。

Js代碼
  1. $("#myform").validate({  
  2.    ignore: ".ignore"  
  3. })  



[5]  rules      類型：Options    默認：rules are read from markup (classes, attributes, metadata)
      說明：用 戶定義的鍵/值對規則。鍵為一個表單元素的 name屬性（或是一組單選/復選按鈕）、值為一個簡單的字符串或者由規則/參數對（rule/parameter）組成的一個對象。可以和 class/attribute/metadata 規則一起使用。每個規則可以指定一個依存的驗證前提條件。

Js代碼
  1. $(".selector").validate({  
  2.    rules: {  
  3.      // simple rule, converted to {required:true}  
  4.      name: "required",  
  5.      // compound rule  
  6.      email: {  
  7.        required: true,  
  8.        email: true  
  9.      }/* 
  10.      email: { 
  11.          depends: function(element) { 
  12.            return $("#contactform_email:checked") 
  13.          } 
  14.      }*/  
  15.    }  
  16. })  



[6]  messages      類型：Options    默認：驗證方法默認使用的消息
      說明：用 戶自定義的 鍵/值 對消息。鍵為一個表單元素的name屬性，值為該表單元素將要顯示的消息。該消息覆蓋元素的title屬性或者默認消息。消息可以是一個字符串或者一個回 調函數。回調函數必須在驗證器的作用域中調用，將規則參數作為回調函數的第一個參數，將該表單元素作為回調函數的第二個參數，且必須返回一個字符串類型的 消息。

Js代碼
  1. $(".selector").validate({  
  2.    rules: {  
  3.      name: "required",  
  4.      email: {  
  5.        required: true,  
  6.        email: true  
  7.      }  
  8.    },  
  9.    messages: {  
  10.      name: "Please specify your name",  
  11.      email: {  
  12.        required: "We need your email address to contact you",  
  13.        email: "Your email address must be in the format of name@domain.com"  
  14.      }  
  15.    }  
  16. })  



[7]  groups      類型：Options
      說明：指定錯誤消息分組。一個組由一個任意的組名作為鍵，一個由空白符分割的表單元素name屬性列表作為值。用errorPlacement定義組消息的存放位置。

Js代碼
  1. $("#myform").validate({  
  2.   groups: {  
  3.     username: "fname lname"  
  4.   },  
  5.   errorPlacement: function(error, element) {  
  6.      if (element.attr("name") == "fname"   
  7.                  || element.attr("name") == "lname" )  
  8.        error.insertAfter("#lastname");  
  9.      else  
  10.        error.insertAfter(element);  
  11.    },  
  12.    debug:true  
  13.  })  



[8]  onsubmit      類型：Boolean    默認：true
      說明：提交時驗證表單。當設置為false時，只能用其它的事件驗證。

Js代碼
  1. $(".selector").validate({  
  2.    onsubmit: false  
  3. })  



[9]  onfocusout      類型：Boolean    默認：true
      說明：焦點離開時驗證（單選/復選按鈕除外）。如果表單中沒有輸入任何內容，所有的規則將被跳過，除非該表單已經被標記為無效的。

Js代碼
  1. $(".selector").validate({  
  2.    onfocusout: false  
  3. })  



[10]  onkeyup      類型：Boolean    默認：true
      說明：當鍵盤按鍵彈起時驗證。只要表單元素沒有被標記成無效的，不會有反應。另外，所有的規則將在每次按鍵彈起時驗證。

Js代碼
  1. $(".selector").validate({  
  2.    onkeyup: false  
  3. })  



[11]  onclick      類型：Boolean    默認：true
      說明：鼠標點擊驗證針對單選和復選按鈕。

Js代碼
  1. $(".selector").validate({  
  2.    onclick: false  
  3. })  



[12]  focusInvalid      類型：Boolean    默認：true
      說明：當驗證無效時，焦點跳到第一個無效的表單元素。當為false時，驗證無效時，沒有焦點響應。

Js代碼
  1. $(".selector").validate({  
  2.    focusInvalid: false  
  3. })  



[12]  focusCleanup      類型：Boolean    默認：false
      說明：如果為true，當表單得到焦點時，移除在該表單上的errorClass並隱藏所有錯誤消息。避免與focusInvalid一起使用。

Js代碼
  1. $(".selector").validate({  
  2.    focusCleanup: true  
  3. })  



[13]  meta      類型：String
      說明：如果想使用其它插件來使用元數據驗證規則，得指定相應的元數據對象。

Js代碼
  1. $("#myform").validate({  
  2.    meta: "validate"  
  3. })  
  4. <input type="text" name="email" class="{validate:{ required: true, email:true}}" />  



[14]  errorClass      類型：String    默認："error"
      說明：用此設定的樣式來定義錯誤消息的樣式。

Js代碼
  1. $(".selector").validate({  
  2.    errorClass: "invalid"  
  3. })  



[15]  validClass      類型：String    默認："valid"
      說明：設定當驗證通過時，消息顯示的樣式。

Js代碼
  1. $(".selector").validate({  
  2.    validClass: "success"  
  3. })  



[16]  errorElement      類型：String    默認："label"
      說明：用html元素類型創建錯誤消息的容器。默認的"label"有個優點就是能在錯誤消息與無效表單之間用for屬性建立有意義的聯系（一個常常使用的，而不管表單元素是什么的）。

Js代碼
  1. $(".selector").validate({  
  2.    errorElement: "em"  
  3. })  



[17]  wrapper      類型：Boolean
      說明：用一個指定的元素將錯誤消息包圍。與errorLabelContainer一起創建一個錯誤消息列表非常有用。

Js代碼
  1. $(".selector").validate({  
  2.    wrapper: "li"  
  3. })  



[18]  errorLabelContainer      類型：Selector
      說明：錯誤消息標簽的容器。

Js代碼
  1. $("#myform").validate({  
  2.    errorLabelContainer: "#messageBox",  
  3.    wrapper: "li"  
  4. })  



[19]  errorContainer      類型：Selector
      說明：錯誤消息的容器。

Js代碼
  1. $("#myform").validate({  
  2.    errorContainer: "#messageBox1, #messageBox2",  
  3.    errorLabelContainer: "#messageBox1 ul",  
  4.    wrapper: "li", debug:true,  
  5.    submitHandler: function() { alert("Submitted!") }  
  6. })  



[20]  showErrors      類型：Callback    默認：None,內置的顯示消息
      說明：自 定義消息顯示的句柄。該回調函數有兩個參數，第一 個為errorMap,第二個參數為errorList，在validator對象的上下文中調用。參數只包含那些經過onblur/onkeyup驗證 的表單元素，也有可能是單個元素。除此之外，你還可以用this.defaultShowErrors()觸發默認的行為。

Js代碼
  1. $(".selector").validate({  
  2.    showErrors: function(errorMap, errorList) {  
  3.         $("#summary").html("Your form contains "  
  4.                                    + this.numberOfInvalids()   
  5.                                    + " errors, see details below.");  
  6.         this.defaultShowErrors();  
  7.     }  
  8.  })  



[21]  errorPlacement      類型：Callback    默認：緊跟在無效表單后的標簽中
      說明：用戶自定義錯誤標簽的顯示位置。第一個參數：一個作為jQuery對象的錯誤標簽，第二個參數為：一個作為jQuery對象的未通過驗證的表單元素。

Js代碼
  1. $("#myform").validate({  
  2.   errorPlacement: function(error, element) {  
  3.      error.appendTo( element.parent("td").next("td") );  
  4.    },  
  5.    debug:true  
  6.  })  



[22]  success      類型：String,Callback
      說明：如果指定它，當驗證通過時顯示一個消息。如果是String類型的，則添加該樣式到標簽中，如果是一個回調函數，則將標簽作為其唯一的參數。

Js代碼
  1. $("#myform").validate({  
  2.    //success: "valid",  
  3.      success: function(label) {  
  4.          label.addClass("valid").text("Ok!")  
  5.      }  
  6. })  



[23]  highlight      類型：Callback    默認：添加errorClass到表單元素
      說明：將未通過驗證的表單元素設置高亮。

Js代碼
  1. $(".selector").validate({  
  2.   highlight: function(element, errorClass) {  
  3.      $(element).fadeOut(function() {  
  4.        $(element).fadeIn()  
  5.      })  
  6.   }  
  7. })  



[24]  unhighlight      類型：Callback    默認：移除errorClass
      說明：與highlight操作相反

Js代碼
  1. $(".selector").validate({  
  2.   highlight: function(element, errorClass) {  
  3.      $(element).addClass(errorClass);  
  4.      $(element.form).find("label[for=" + element.id + "]")  
  5.                     .addClass(errorClass);  
  6.   },  
  7.   unhighlight: function(element, errorClass) {  
  8.      $(element).removeClass(errorClass);  
  9.      $(element.form).find("label[for=" + element.id + "]")  
  10.                     .removeClass(errorClass);  
  11.   }  
  12. });  



[25]  ignoreTitle      類型：Boolean    默認：false
      說明：設置它用來跳過錯誤消息對title屬性的引用，避免Google工具欄引起的沖突。

Js代碼
    1. $(".selector").validate({  
    2.    ignoreTitle: true  
    3. }) 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 jquery.validate使用攻略 jquery.validate試用方法 jQuery.validate 的form校驗 jquery.validate ajax提交 Jquery.Form和jquery.validate 的使用 Jquery.Form和jquery.validate 的使用 jquery.validate ajax方式驗證 jquery.validate 動態增加、刪除規則 jquery.validate使用攻略（表單校驗） jquery.validate提示錯誤方法
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM