jQuery.validate 用法

jquery.validate是一個基于jquery的非常優秀的驗證框架，我們可以通過它迅速驗證一些常見的輸入,并且可以自己擴充自己的驗證方法，而且對國際化也有非常好的支持。

jquery.validate 官方網址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/

使用用法：
1、首先下載jquery.js和jquery.validate.js并引入js文件(注意：jquery必須在jquery.validate.js之前被引入，否則會報錯)

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.validate.js"></script>

2、編寫需要驗證的表單代碼及編寫驗證代碼(編寫驗證代碼有兩種方式，首先使用普通方式)

var validator = $("formId").validate({// #formId為需要進行驗證的表單ID
errorElement :"div",// 使用"div"標簽標記錯誤， 默認:"label"
wrapper:"li",// 使用"li"標簽再把上邊的errorELement包起來
errorClass :"validate-error",// 錯誤提示的css類名"error"
onsubmit:true,// 是否在提交是驗證,默認:true
onfocusout:true,// 是否在獲取焦點時驗證,默認:true
onkeyup :true,// 是否在敲擊鍵盤時驗證,默認:true
onclick:false,// 是否在鼠標點擊時驗證（一般驗證checkbox,radiobox）
focusCleanup:false,// 當未通過驗證的元素獲得焦點時,并移除錯誤提示
rules: {
loginName: {// 需要進行驗證的輸入框name
required: true// 驗證條件：必填
},
loginPassword: {// 需要進行驗證的輸入框name
required: true,// 驗證條件：必填
minlength: 5// 驗證條件：最小長度為5
},
email: {// 需要進行驗證的輸入框name
required: true,// 驗證條件：必填
email: true// 驗證條件：格式為email
}
},
messages: {
loginName: {
required: "用戶名不允許為空!"http:// 驗證未通過的消息
},
loginPassword: {
required: "密碼不允許為空!",
minlength: jQuery.format("密碼至少輸入 {0} 字符!")
},
email: {
required: "email不允許為空",
email: "郵件地址格式錯誤!"
}
}

2、使用meta String方式進行驗證，即驗證內容與寫入class中(注意meta String方式需要引入jquery.metadata.js文件)

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

<form id="validate" action="admin/transfer!save.action" method="post">
<input type="text" class="required" name="entity.name" />
<input type="text" class="email" name="entity.email" />
<input type="submit" class="button" value="提 交" />
</form>
<script type="text/javascript">
$(document).ready(
function() {
$("#formId").validate({// #formId為需要進行驗證的表單ID
meta :"validate"http:// 采用meta String方式進行驗證（驗證內容與寫入class中）
errorElement :"div",// 使用"div"標簽標記錯誤， 默認:"label"
wrapper:"li",// 使用"li"標簽再把上邊的errorELement包起來
errorClass :"validate-error",// 錯誤提示的css類名"error"
onsubmit:true,// 是否在提交是驗證,默認:true
onfocusout:true,// 是否在獲取焦點時驗證,默認:true
onkeyup :true,// 是否在敲擊鍵盤時驗證,默認:true
onclick:false,// 是否在鼠標點擊時驗證（一般驗證checkbox,radiobox）
focusCleanup:false,// 當未通過驗證的元素獲得焦點時,并移除錯誤提示
});
})
</script>

注意：在Struts2應用中經常用遇到name="entity.name"形式的input表單(即name中包含逗號或其它特殊符號時),我們可以將上述名稱以引號("")括起即可，如：

rules: {
"entity.loginName": {// 需要進行驗證的輸入框name
required: true// 驗證條件：必填
}
},
messages: {
"entity.loginName": {
required: "用戶名不允許為空!"http:// 驗證未通過的消息
}
}

可給我email: services@0798wz.com 歡迎一起探討有關java技術的問題
以上部分代碼來源于payj開源支付系統，這個java開源項目里面有很多優秀的Struts2 spring hibernate jquery 等框架的應用源碼，值得一看。在這里先推薦一下，呵呵。。。

。

附：

內置驗證方式：
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 or 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是要驗證的元素,值是字符串或函數 $(".selector").validate({
rules:{
name:"required",
email:{
required:true,
email:true
}
},
messages:{
name:"Name不能為空",
email:{
required:"E-mail不能為空",
email:"E-mail地址不正確"
}
}
})
groups:
對一組元素的驗證,用一個錯誤提示,用error Placement控制把出錯信息放在哪里 $("#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
})
Onubmit 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({
rrorPlacement: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來添加除built-in Validation methods之

外的驗證方法 比如有一個字段,只能輸一個字母,范圍是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就是這個唯一的參數,如果多個參數,用在[]里,用逗號分開