jquery validate 指定錯誤內容的位置

一、默認的提示

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代碼中加入：

$.extend($.validator.messages, {
    required: "必選字段",
    remote: "請修正該字段",
    email: "請輸入正確格式的電子郵件",
    url: "請輸入合法的網址",
    date: "請輸入合法的日期",
    dateISO: "請輸入合法的日期 (ISO).",
    number: "請輸入合法的數字",
    digits: "只能輸入整數",
    creditcard: "請輸入合法的信用卡號",
    equalTo: "請再次輸入相同的值",
    accept: "請輸入擁有合法后綴名的字符串",
    maxlength: $.validator.format("請輸入一個長度最多是 {0} 的字符串"),
    minlength: $.validator.format("請輸入一個長度最少是 {0} 的字符串"),
    rangelength: $.validator.format("請輸入一個長度介於 {0} 和 {1} 之間的字符串"),
    range: $.validator.format("請輸入一個介於 {0} 和 {1} 之間的值"),
    max: $.validator.format("請輸入一個最大為 {0} 的值"),
    min: $.validator.format("請輸入一個最小為 {0} 的值")
});

推薦做法，將此文件放入messages_cn.js中，在頁面中引入

<script type="text/javascript" src="<%=path %>/validate/messages_cn.js"></script>

每個字段驗證通過執行函數

success：String,Callback

要驗證的元素通過驗證后的動作，如果跟一個字符串，會當作一個 css 類，也可跟一個函數。

success: function(label) { // set   as text for IE label.html(" ").addClass("checked"); //label.addClass("valid").text("Ok!") }

添加 "valid" 到驗證元素，在 CSS 中定義的樣式 <style>label.valid {}</style>。

success: "valid"

異步驗證

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)); }, "請正確填寫您的郵政編碼");

注意：要在 additional-methods.js 文件中添加或者在 jquery.validate.js 文件中添加。建議一般寫在 additional-methods.js 文件中。

注意：在 messages_cn.js 文件中添加：isZipCode: "只能包括中文字、英文字母、數字和下划線"。調用前要添加對 additional-methods.js 文件的引用。

jQuery.validate 中文 API

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

Validator

validate 方法返回一個 Validator 對象。Validator 對象有很多方法可以用來引發校驗程序或者改變 form 的內容，下面列出幾個常用的方法。

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

內置驗證方式

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

validate ()的可選項

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

addMethod(name,method,message)方法

參數 name 是添加的方法的名字。

參數 method 是一個函數，接收三個參數 (value,element,param) 。
value 是元素的值，element 是元素本身，param 是參數。

我們可以用 addMethod 來添加除內置的 Validation 方法之外的驗證方法。比如有一個字段，只能輸一個字母，范圍是 a-f，寫法如下：

$.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; } },"必須是一個字母,且a-f");

如果有個表單字段的 id="username"，則在 rules 中寫：

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

addMethod 的第一個參數，是添加的驗證方法的名字，這時是 af。
addMethod 的第三個參數，是自定義的錯誤提示，這里的提示為:"必須是一個字母,且a-f"。
addMethod 的第二個參數，是一個函數，這個比較重要，決定了用這個驗證方法時的寫法。

如果只有一個參數，直接寫，比如 af:"a"，那么 a 就是這個唯一的參數，如果多個參數，則寫在 [] 里，用逗號分開。

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>

指定錯誤內容的位置

errorLabelContainer:".erro",
wrapper:"li",
showErrors:function(errorMap,errorList) {
this.defaultShowErrors();
$('ol li:hidden').remove()//刪除所有隱藏的li標簽
$('ol li:eq(0)').nextAll().remove()//第一個li下所有跟隨的同胞級li刪除

},