Html代碼
<script type="text/javascript" src="js/jquery-min.js"></script>
<script type="text/javascript" src="js/jquery.validate.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#textForm").validate();
});
</script>
<form class="cmxform" id="commentForm" method="get" action="">
Name<input id="cname" name="name" size="25" class="required" minlength="2" />
<input class="submit" type="submit" value="Submit" />
</form>
此文謹以以上js片段開始介紹jQuery Validation。
驗證從這個方法開始：validate( [options] )
（一）、可選項( options )
[1] debug 類型：Boolean 默認：false
說明：開啟調試模式。如果為true，表單不會提交，而且會在控制臺顯示一些錯誤消息（需要Firebug或者Firebug lite）。當要阻止表單默認提交事件，嘗試去開啟它。
$(".selector").validate({
debug: true
})
[2] submitHandler 類型：Callback 默認：default (native) form submit
說明：當表單通過驗證，提交表單。回調函數有個默認參數form
$(".selector").validate({
submitHandler: function(form) {
// do other stuff for a valid form
form.submit();
}
})
[3] invalidHandler 類型：Callback
說明：當未通過驗證的表單提交時，可以在該回調函數中處理一些事情。該回調函數有兩個參數：第一個為一個事件對象，第二個為驗證器（validator）
$(".selector").validate({
invalidHandler: function(form, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'You missed 1 field. It has been highlighted'
: 'You missed ' + errors + ' fields. They have been highlighted';
$("p.error span").html(message);
$("p.error").show();
} else {
$("p.error").hide();
}
}
})
[4] ignore 類型：Seletor
說明：當進行表單驗證時，過濾掉選擇器所選擇的表單。用瞭jQuery not方法（ not() ）。類型為submit和reset的表單總是被忽略的。
$("#myform").validate({
ignore: ".ignore"
})
[5] rules 類型：Options 默認：rules are read from markup (classes, attributes, metadata)
說明：用戶定義的鍵/值對規則。鍵為一個表單元素的name屬性（或是一組單選/復選按鈕）、值為一個簡單的字符串或者由規則/參數對（rule/parameter）組成的一個對象。可以和class/attribute/metadata 規則一起使用。每個規則可以指定一個依存的驗證前提條件。
$(".selector").validate({
rules: {
// simple rule, converted to {required:true}
name: "required",
// compound rule
email: {
required: true,
email: true
}/*
email: {
depends: function(element) {
return $("#contactform_email:checked")
}
}*/
}
})
[6] messages 類型：Options 默認：驗證方法默認使用的消息
說明：用戶自定義的 鍵/值 對消息。鍵為一個表單元素的name屬性，值為該表單元素將要顯示的消息。該消息覆蓋元素的title屬性或者默認消息。消息可以是一個字符串或者一個回調函數。回調函數必須在驗證器的作用域中調用，將規則參數作為回調函數的第一個參數，將該表單元素作為回調函數的第二個參數，且必須返回一個字符串類型的消息。
$(".selector").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please specify your name",
email: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of name@domain.com"
}
}
})
[7] groups 類型：Options
說明：指定錯誤消息分組。一個組由一個任意的組名作為鍵，一個由空白符分割的表單元素name屬性列表作為值。用errorPlacement定義組消息的存放位置。
Js代碼
$("#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
})
[8] onsubmit 類型：Boolean 默認：true
說明：提交時驗證表單。當設置為false時，隻能用其它的事件驗證。
Js代碼
$(".selector").validate({
onsubmit: false
})
[9] onfocusout 類型：Boolean 默認：true
說明：焦點離開時驗證（單選/復選按鈕除外）。如果表單中沒有輸入任何內容，所有的規則將被跳過，除非該表單已經被標記為無效的。
Js代碼
$(".selector").validate({
onfocusout: false
})
[10] onkeyup 類型：Boolean 默認：true
說明：當鍵盤按鍵彈起時驗證。隻要表單元素沒有被標記成無效的，不會有反應。另外，所有的規則將在每次按鍵彈起時驗證。
$(".selector").validate({
onkeyup: false
})
[11] onclick 類型：Boolean 默認：true
說明：鼠標點擊驗證針對單選和復選按鈕。
$(".selector").validate({
onclick: false
})
[12] focusInvalid 類型：Boolean 默認：true
說明：當驗證無效時，焦點跳到第一個無效的表單元素。當為false時，驗證無效時，沒有焦點響應。
$(".selector").validate({
focusInvalid: false
})
[12] focusCleanup 類型：Boolean 默認：false
說明：如果為true，當表單得到焦點時，移除在該表單上的errorClass並隱藏所有錯誤消息。避免與focusInvalid一起使用。
$(".selector").validate({
focusCleanup: true
})
[13] meta 類型：String
說明：如果想使用其它插件來使用元數據驗證規則，得指定相應的元數據對象。
$("#myform").validate({
meta: "validate"
})
<input type="text" name="email" class="{validate:{ required: true, email:true}}" />
[14] errorClass 類型：String 默認："error"
說明：用此設定的樣式來定義錯誤消息的樣式。
$(".selector").validate({
errorClass: "invalid"
})
[15] validClass 類型：String 默認："valid"
說明：設定當驗證通過時，消息顯示的樣式。
$(".selector").validate({
validClass: "success"
})
[16] errorElement 類型：String 默認："label"
說明：用html元素類型創建錯誤消息的容器。默認的"label"有個優點就是能在錯誤消息與無效表單之間用for屬性建立有意義的聯系（一個常常使用的，而不管表單元素是什麼的）。
$(".selector").validate({
errorElement: "em"
})
[17] wrapper 類型：Boolean
說明：用一個指定的元素將錯誤消息包圍。與errorLabelContainer一起創建一個錯誤消息列表非常有用。
$(".selector").validate({
wrapper: "li"
})
[18] errorLabelContainer 類型：Selector
說明：錯誤消息標簽的容器。
$("#myform").validate({
errorLabelContainer: "#messageBox",
wrapper: "li"
})
[19] errorContainer 類型：Selector
說明：錯誤消息的容器。
$("#myform").validate({
errorContainer: "#messageBox1, #messageBox2",
errorLabelContainer: "#messageBox1 ul",
wrapper: "li", debug:true,
submitHandler: function() { alert("Submitted!") }
})
[20] showErrors 類型：Callback 默認：None,內置的顯示消息
說明：自定義消息顯示的句柄。該回調函數有兩個參數，第一個為errorMap,第二個參數為errorList，在validator對象的上下文中調用。參數隻包含那些經過onblur/onkeyup驗證的表單元素，也有可能是單個元素。除此之外，你還可以用this.defaultShowErrors()觸發默認的行為。
$(".selector").validate({
showErrors: function(errorMap, errorList) {
$("#summary").html("Your form contains "
+ this.numberOfInvalids()
+ " errors, see details below.");
this.defaultShowErrors();
}
})
[21] errorPlacement 類型：Callback 默認：緊跟在無效表單後的標簽中
說明：用戶自定義錯誤標簽的顯示位置。第一個參數：一個作為jQuery對象的錯誤標簽，第二個參數為：一個作為jQuery對象的未通過驗證的表單元素。
$("#myform").validate({
errorPlacement: function(error, element) {
error.appendTo( element.parent("td").next("td") );
},
debug:true
})
[22] success 類型：String,Callback
說明：如果指定它，當驗證通過時顯示一個消息。如果是String類型的，則添加該樣式到標簽中，如果是一個回調函數，則將標簽作為其唯一的參數。
$("#myform").validate({
//success: "valid",
success: function(label) {
label.addClass("valid").text("Ok!")
}
})
[23] highlight 類型：Callback 默認：添加errorClass到表單元素
說明：將未通過驗證的表單元素設置高亮。
$(".selector").validate({
highlight: function(element, errorClass) {
$(element).fadeOut(function() {
$(element).fadeIn()
})
}
})
[24] unhighlight 類型：Callback 默認：移除errorClass
說明：與highlight操作相反
$(".selector").validate({
highlight: function(element, errorClass) {
$(element).addClass(errorClass);
$(element.form).find("label[for=" + element.id + "]")
.addClass(errorClass);
},
unhighlight: function(element, errorClass) {
$(element).removeClass(errorClass);
$(element.form).find("label[for=" + element.id + "]")
.removeClass(errorClass);
}
});
[25] ignoreTitle 類型：Boolean 默認：false
說明：設置它用來跳過錯誤消息對title屬性的引用，避免Google工具欄引起的沖突。
$(".selector").validate({
ignoreTitle: true
})
（二）插件方法 (jQuery validation)
文章分類:Web前端
[1] validate( [options] ) 返回：Validator
說明：見第一部分 [2] valid() 返回：Boolean
說明：檢查表單是否已通過驗證。
$("#myform").validate();
$("a.check").click(function() {
alert("Valid: " + $("#myform").valid());
return false;
});
[3] rules() 返回：Options
說明：返回一個表單元素的驗證規則。有幾個方法定義驗證規則：
在表單元素的class屬性中定義驗證規則（推薦的方法）。
通過指定驗證方法的屬性（推薦的方法）。
可以通過元數據(metadata)插件來定義元數據驗證規則。
可以通過指定validate()方法的rules選項。
alert($("#password").rules()["required"]);
[4] rules( "add", rules ) 返回：Options
參數"add" 類型：String
參數 rules 類型：Options 要添加的規則，與validate方法中的驗證規則一致。
說明：添加規則到匹配的表單元素，返回該元素的所有驗證規則，需要先執行$("form").validate()。在rules中也可以添加用戶自定義的消息對象。
$("#myinput").rules("add", {
required: true,
minlength: 2,
messages: {
required: "Required input",
minlength: jQuery.format("Please, at least {0} characters are necessary")
}
});
[5] rules( "remove", [rules] ) 返回：Options
參數"remove" 類型：String
參數 rules (Options) 類型：Options 用空白符分割的驗證規則。隻操作通過rules選項或rules("add")指定的驗證規則。
說明：從第一個匹配的表單元素中移除指定的驗證規則，並返回該元素所有的驗證規則。
$("#myinput").rules("remove");
$("#myinput").rules("remove", "min max");
[6] removeAttrs( attributes ) 返回：Options
參數 attributes 類型：String 用空白符分割的屬性列表
說明：從第一個匹配的表單元素中刪除指定的屬性並返回它們。
$("#skip").click(function() {
var rules = $("#myinput").removeAttrs("min max");
$("#myform).submit();
$("#myinput").attr(rules);
});
（三、四）選擇器及實用工具 (jQuery validation)
文章分類:Web前端
[1] :blank 返回：Array<Element>
說明：匹配所有空值的表單元素。沒有任何值或都空白符(whitespace)都被認為是空值。
它是由 jQuery.trim(value).length == 0 來判斷的。
$("input:blank").css("background-color", "#bbbbff");
[2] :filled 返回：Array<Element>
說明：匹配所有不為空的表單元素。任何值都可以認為是已輸入的，但隻有空白符的值除外。
它是由 jQuery.trim(value).length > 0 來判斷的。
$("input:filled").css("background-color", "#bbbbff");
[3] :unchecked 返回：Array<Element>
說明：匹配所有未選擇的表單元素。反向操作為 :checked
function countUnchecked() {
var n = $("input:unchecked").length;
$("p").text(n + (n == 1 ? " is" : " are") + " unchecked!");
}
countUnchecked();
$(":checkbox").click(countUnchecked);
四、實用工具(Utilities)
jQuery.validator.format( template, [argument], [argumentN…] ) 返回：String
參數 template 類型：String 要格式化的字符串
參數 argument (Optional) 類型：String, Array<String> 用字符串或字符串數組(對應索引的元素)填充第一個占位符
參數 argumentN… (Optional) 類型：String 填充第二個或之後的占位符。
說明：用參數來填充{n}占位符。除template外的一個或多個參數都可以用來填充相應的占位符。
$(document).ready(function(){
$("button").click(function () {
var str = "Hello {0}, this is {1}";
alert("'" + str + "'");
str = jQuery.validator.format(str, "World", "Bob");
//str = $.validator.format(str, ["koala","oo"]);
alert("'" + str + "'");
});
});
（五）驗證器 (jQuery validation)
validate方法返回的驗證器對象( Validator Object) 有一些公用的方法。你可以用來觸發驗證程序或改變表單(form)的內容。驗證器對象有更多的方法，不過隻有文檔中給出的這些方法是專為使用而設計的。 (一)驗證器方法(Validator methods)
[1] form() 返回：Boolean
說明：驗證表單是否通過驗證，若通過驗證則返回true，反之返回false。這個方法在正常的提交事件(submit event)觸發，它返回一個結果。
$("#myform").validate().form();
[2] element( element ) 返回：Boolean
參數 element 類型：Selector 驗證表單中的一個需要驗證的表單元素。
說明：驗證單個表單元素是否通過驗證，若通過驗證則返回true，反之返回false。這個方法在正常的焦點離開事件(blur)或按鍵彈起(keyup)時觸發，它返回一個結果。
$("#myform").validate().element( "#myselect" );
[3] resetForm( ) 返回：undefined
說明：重置表單。
恢復表單元素到原來的值(需要form插件支持)，移除無效驗證的樣式並隱藏錯誤消息。
(…貌似隻有在IE下才可以移除樣式)
var validator = $("#myform").validate();
validator.resetForm();
[4] addClassRules( rules ) 返回：undefined
參數 rules 類型：Options 樣式類名-規則表。
說明：添加一個復合的樣式驗證方法。對於重構通用的聯合規則非常有用。
jQuery.validator.addClassRules({
name: {
required: true,
minlength: 2
},
zip: {
required: true,
digits: true,
minlength: 5,
maxlength: 5
}
（六）內置驗證方法 (jQuery validation)
[1] required( ) 返回：Boolean
說明：讓表單元素必須填寫（選擇）。
如果表單元素為空(text input)或未選擇(radio/checkbox)或選擇瞭一個空值(select)。
作用於text inputs, selects, checkboxes and radio buttons.
當select提供瞭一個空值選項<option value="">Choose…</option>則強迫用戶去選擇一個不為空的值。
$("#myform").validate({
rules: {
fruit: "required"
}
});
[2] required( dependency-expression ) 返回：Boolean
參數 dependency-expression 類型：String 在form上下文中的一個表達式( String )，表單元素是否需要填寫依賴於該表達式返回一個或多個元素。
說明：讓表單元素必須填寫（選擇），依賴於參數的返回值。
表達式中像#foo:checked, #foo:filled, #foo:visible這樣的選擇過濾器將經常用到。
$("#myform").validate({
rules: {
details: {
required: "#other:checked"
}
}, debug:true
});
$("#other").click(function() {
$("#details").valid();
});
[3] required( dependency-callback ) 返回：Boolean
參數 dependency-callback 類型：Callback 該回函數以待驗證表單元素作為其唯一的參數。當該回調函數返回true，則該表單元素是必須的。
說明：讓表單元素必須填寫（選擇），依賴於參數的返回值。
表達式中像#foo:checked, #foo:filled, #foo:visible這樣的選擇過濾器將經常用到。
$("#myform").validate({
rules: {
age: {
required: true,
min: 3
},
parent: {
required: function(element) {
return $("#age").val() < 13;
}
}
}
});
$("#age").blur(function() {
$("#parent").valid();
});
[4] remote( options ) 返回：Boolean
參數 options 類型：String, Options 請求服務器端資源的url(String)。或$.ajax()方法中的選項(Options)。
說明：請求服務器端資源驗證。
服務器端的資源通過$.ajax (XMLHttpRequest)獲取key/value對，響應返回true則表單通過驗證。
$("#myform").validate({
rules: {
email: {
required: true,
email: true,
remote: "check-email.php"
}
}
});
[5] minlength( length ) 返回：Boolean
參數 length 類型：Integer 至少需要多少個字符數。
說明：確保表單元素滿足給定的最小字符數。
在文本框(text input)中輸入的字符太少、沒有選中足夠的復選框(checkbox)、一個選擇框(select)中沒有選中足夠的選項。這以上三種情況中該方法返回false。
$("#myform").validate({
rules: {
field: {
required: true,
minlength: 3
}
}
});
[6] maxlength( length ) 返回：Boolean
參數 length 類型：Integer 允許輸入的最大字符數。
說明：確保表單元素的文本不超過給定的最大字符數。
在文本框(text input)中輸入的字符太多、選擇太多的復選框(checkbox)、一個選擇框(select)中沒有選中太多的選項。這以上三種情況中該方法返回false。
$("#myform").validate({
rules: {
field: {
required: true,
maxlength: 4
}
}
});
[7] rangelength( range ) 返回：Boolean
參數 range 類型：Array<Integer> 允許輸入的字符數范圍。
說明：確保表單元素的文本字符數在給定的范圍當中。
在文本框(text input)中輸入的字符數不在給定范圍內、選擇的復選框(checkbox)不在給在的范圍內、一個選擇框(select)選中的選項不在給定的范圍內。這以上三種情況中該方法返回false。
$("#myform").validate({
rules: {
field: {
required: true,
rangelength: [2, 6]
}
}
});
[8] min( value ) 返回：Boolean
參數 value 類型：Integer 需要輸入的最小整數。
說明：確保表單元素的值大於等於給定的最小整數。
該方法隻在文本輸入框(text input)下有效。
$("#myform").validate({
rules: {
field: {
required: true,
min: 13
}
}
});
[9] max( value ) 返回：Boolean
參數 value 類型：Integer 給定的最大整數。
說明：確保表單元素的值小於等於給定的最大整數。
該方法隻在文本輸入框(text input)下有效。
$("#myform").validate({
rules: {
field: {
required: true,
max: 23
}
}
});
[10] range( range ) 返回：Boolean
參數 range 類型：Array<Integer> 給定的整數范圍。
說明：確保表單元素的值在給定的范圍當中。
該方法隻在文本輸入框(text input)下有效。
$("#myform").validate({
rules: {
field: {
required: true,
range: [13, 23]
}
}
});
[11] email( ) 返回：Boolean
說明：確保表單元素的值為一個有效的email地址。
如果值為一個有效的email地址，則返回true。該方法隻在文本輸入框(text input)下有效。
$("#myform").validate({
rules: {
field: {
required: true,
email: true
}
}
});
[12] url( ) 返回：Boolean
說明：確保表單元素的值為一個有效的URL地址(http://www.mydomain.com)。
如果值為一個有效的url地址，則返回true。該方法隻在文本輸入框(text input)下有效。
$("#myform").validate({
rules: {
field: {
required: true,
url: true
}
}
});
[13] date( ) dateISO( ) dateDE( ) 返回：Boolean
說明：用來驗證有效的日期。這三個函數分別驗證的日期格式為(mm/dd/yyyy)、(yyyy-mm-dd,yyyy/mm/dd)、(mm.dd.yyyy)。
$("#myform").validate({
rules: {
field: {
required: true,
date: true
/*dateISO: true
dateDE: true*/
}
}
});
[14] number( ) numberDE() 返回：Boolean
說明：用來驗證小數。number()的小數點為圓點( . )，numberDE()的小數點為英文逗號( , )。
$("#myform").validate({
rules: {
field: {
required: true,
number: true
//numberDE: true
}
}
});
[15] digits() 返回：Boolean
說明：確保文本框中的值為數字。
$("#myform").validate({
rules: {
field: {
required: true,
digits: true
}
}
});
[16] digits() 返回：Boolean
說明：確保文本框中的值為數字。
$("#myform").validate({
rules: {
field: {
required: true,
digits: true
}
}
});
[17] accept( [extension] ) 返回：Boolean
參數 extension(Optional) 類型：String 允許的文件後綴名，用"|"或","分割。默認為"png|jpe?g|gif"
說明：確保表單元素接收給定的文件後綴名的文件。如果沒有指定參數，則隻有圖片是允許的(png,jpeg,gif)。
$("#myform").validate({
rules: {
field: {
required: true,
accept: "xls|csv"
}
}
});
[18] equalTo( other ) 返回：Boolean
參數 other 類型：Selector 要與當前值比較的另一個表單元素。
說明：確保兩個表單元素的值是一致的。
$("#myform").validate({
rules: {
password: "required",
password_again: {
equalTo: "#password"
}
}
});
（七）註意事項 (jQuery validation)
[1]復雜的name屬性值
當使用rules選項時，如果表單的name屬性值包含有非法的javascript標識符，必須將name值加上引號。
$("#myform").validate({
rules: {
// no quoting necessary
name: "required",
// quoting necessary!
"user[email]": "email",
// dots need quoting, too!
"user.address.street": "required"
}
});
[2]重構規則
不論什麼時候，當你的表單中的多個字段含有相同的驗證規則及驗證消息，重構規則可以減少很多重復。使用 addMethod 和 addClassRules 將非常有效果。
假使已經重構瞭如下規則：
// alias required to cRequired with new message
$.validator.addMethod("cRequired", $.validator.methods.required,
"Customer name required");
// alias minlength, too
$.validator.addMethod("cMinlength", $.validator.methods.minlength,
// leverage parameter replacement for minlength, {0} gets replaced with 2
$.format("Customer name must have at least {0} characters"));
// combine them both, including the parameter for minlength
$.validator.addClassRules("customer", { cRequired: true, cMinlength: 2 });
那麼使用的時候如下：
<input name="customer1" class="customer" />
<input name="customer2" class="customer" />
<input name="customer3" class="customer" />
[3]驗證消息
當驗證瞭一個無效的表單元素，驗證消息顯示在用戶面前。這些消息是從哪裡來的呢？有三個途徑來取得驗證消息。
1.通過待驗證表單元素的title屬性
2.通過默認的驗證消息
3.通過插件設置(messages選項)
這三種途徑的優先順序為：3 > 1 > 2
[4]驗證消息與Google工具欄的沖突
有時候驗證消息會與Goole工具欄的AutoFill插件沖突。AutoFill通過替換表單元素的title屬性，以顯示提示消息。此時，驗證消息如果獲取的是title屬性值，那麼就得不到我們預期想要得到的結果。當文檔載入時，可以通過如下方法避免沖突。
$("input.remove_title").attr("title", "");
[5]表單提交
默認地，表單驗證失敗時阻止表單的提交，當驗證通過，表單提交。當然，也可以通過submitHandler來自定義提交事件。
將提交按鈕的class屬性設置成cancel，在表單提交時可以跳過驗證。
<input type="submit" name="submit" value="Submit" />
<input type="submit" class="cancel" name="cancel" value="Cancel" />
下面這段代碼將循環提交表單：
$("#myform").validate({
submitHandler: function(form) {
// some other code maybe disabling submit button
// then:
$(form).submit();
}
});
$(form).submit() 觸發瞭另外一輪的驗證，驗證後又去調用submitHandler，然後就循環瞭。可以用 form.submit() 來觸發原生的表單提交事件。
$("#myform").validate({
submitHandler: function(form) {
form.submit();
}
});
（八）應用實例 (jQuery validation)
[1] 驗證頁面
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<html>
<head>
<title>jquery驗證框架</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src=js/jquery-1.3.2.min.js></script>
<script type="text/javascript" src=js/jquery.validate.pack.js></script>
<script type="text/javascript" src=js/jquery.form.js></script>
<script type="text/javascript" src=js/valid.js></script>
<style type="text/css">
label { width: 10em; float: left; }
label.haha {color: red; padding-left: 18px; vertical-align: top;width: 196px; background: url("images/unchecked.gif") no-repeat;}
input.haha { border: 1px solid red; }
label.valid {background: url("images/checked.gif") no-repeat; color: #065FB9;}
input.focus { border: 2px solid green; }
ul li{ display: block;}
</style>
</head>
<body>
<p id="form_con">
<form class="cmxform" id="myform" method="post" action="">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>用戶名</td>
<td><input type="text" name="username" class="required" /></td>
<td></td>
</tr>
<tr>
<td>密碼</td>
<td><input id="password" type="password" name="firstpwd" /></td>
<td></td>
</tr>
<tr>
<td>驗證密碼</td>
<td><input type="password" name="secondpwd" /></td>
<td></td>
</tr>
<tr>
<td>性別</td>
<td><input id="sex" type="radio" name="sex" />男<input type="radio" name="sex" />女</td>
<td></td>
</tr>
<tr>
<td>年齡</td>
<td><input type="text" name="age" /></td>
<td></td>
</tr>
<tr>
<td>郵箱</td>
<td><input type="text" name="email" /></td>
<td></td>
</tr>
<tr>
<td>個人網頁</td>
<td><input type="text" name="purl" /></td>
<td></td>
</tr>
<tr>
<td>電話</td>
<td><input type="text" name="telephone" /></td>
<td></td>
</tr>
<tr>
<td>附件</td>
<td><input type="file" name="afile"/></td>
<td></td>
</tr>
<tr><td colspan="3" ><input type="submit" name="submit" value="提交" /><button>重置</button></td></tr>
</tbody>
</table>
</form>
</p>
</body>
</html>
[2] 驗證js
$(function(){
var validator = $("#myform").validate({
debug: true, //調試模式取消submit的默認提交功能
errorClass: "haha",//默認為錯誤的樣式類為：error
focusInvalid: false,
onkeyup: false,
submitHandler: function(form){ //表單提交句柄,為一回調函數，帶一個參數：form
alert("提交表單");
//form.submit(); 提交表單
},
rules: { //定義驗證規則,其中屬性名為表單的name屬性
username: {
required: true,
minlength: 2,
remote: "uservalid.jsp" //傳說當中的ajax驗證
},
firstpwd: {
required: true,
//minlength: 6
rangelength: [6,8]
},
secondpwd: {
required: true,
equalTo: "#password"
},
sex: {
required: true
},
age: {
required: true,
range: [0,120]
},
email: {
required: true,
email: true
},
purl: {
required: true,
url: true
},
afile: {
required: true,
accept: "xls,doc,rar,zip"
}
},
messages: { //自定義驗證消息
username: {
required: "用戶名是必需的！",
minlength: $.format("用戶名至少要{0}個字符！"),
remote: $.format("{0}已經被占用")
},
firstpwd: {
required: "密碼是必需的！",
rangelength: $.format("密碼要在{0}-{1}個字符之間！")
},
secondpwd: {
required: "密碼驗證是必需的！",
equalTo: "密碼驗證需要與密碼一致"
},
sex: {
required: "性別是必需的"
},
age: {
required: "年齡是必需的",
range: "年齡必須介於{0}-{1}之間"
},
email: {
required: "郵箱是必需的！",
email: "請輸入正確的郵箱地址（例如 myemail@163.com）"
},
purl: {
required: "個人主頁是必需的",
url: "請輸入正確的url格式,如 "
},
afile: {
required: "附件是必需的！",
accept: "隻接收xls,doc,rar,zip文件"
}
},
errorPlacement: function(error, element) { //驗證消息放置的地方
error.appendTo( element.parent("td").next("td") );
},
highlight: function(element, errorClass) { //針對驗證的表單設置高亮
$(element).addClass(errorClass);
},
success: function(label) {
label.addClass("valid").text("Ok!")
}
/*,
errorContainer: "#error_con", //驗證消息集中放置的容器
errorLabelContainer: "#error_con ul", //存放消息無序列表的容器
wrapper: "li", //將驗證消息用無序列表包圍
validClass: "valid", //通過驗證的樣式類
errorElement: "em", //驗證標簽的名稱，默認為：label
success: "valid" //驗證通過的樣式類
*/
});
$("button").click(function(){
validator.resetForm();
});
//alert($("#password").rules()["required"]);
//validator.showErrors({"username": "用戶名是必需的"});
/*$("button").click(function () {
var str = "Hello {0}, this is {1}";
alert("'" + str + "'");
str = $.validator.format(str, ["koala","oo"]);
alert("'" + str + "'");
});*/
});
[3] 遠程驗證程序
<%@ page language="java" import="java.io.PrintWriter" pageEncoding="gb2312"%><%
String username = request.getParameter("username");
PrintWriter pw = response.getWriter();
try{
if(username.toLowerCase().equals("admin")){
pw.println("true");
}else{
pw.println("false");
}
}catch(Exception ex){
ex.getStackTrace();
}finally{
pw.flush();
pw.close();
}
%>
摘自 張毅☆.Net★Java軟件聯盟
