做網頁表單經常要用到數據校驗的功能.JavaScript校驗是一種比較常用的手段。最近寫頁面寫得比較多，發現了一個比較好用的js校驗框架--jQuery.validate。她是一款基於jquery的校驗工具，基本可以滿足我們大多數的頁面校驗需要，且支持ajax校驗。支持各種自定義的擴展，包括自定義校驗規則，自定義錯誤顯示的方式等。
通過一段時間的使用，感覺用起來還是非常簡單的。這里做一下使用方法的簡單介紹，而后會介紹一個我自己擴展的一種錯誤提示方式（感覺默認的信息提示的方式比較一般實在不怎么好看）。
閑話少說，先說下用法：
1、先導入必要的兩個js文件
2、編寫需要驗證的表單代碼及編寫驗證代碼(編寫驗證代碼有兩種方式，首先使用普通方式)
//增加自定義驗證規則 jQuery.validator.addMethod('editor', function () { return editorcontent.hasContents(); }); //使用的時候，直接在驗證條件里面 editor:true 提示內容也是 editor:"提示內容" // #formId為需要進行驗證的表單ID $("formId").validate({ 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: "用戶名不允許為空!" // 驗證未通過的消息 }, loginPassword: { required: "密碼不允許為空!", minlength: jQuery.format("密碼至少輸入 {0} 字符!") }, email: { required: "email不允許為空", email: "郵件地址格式錯誤!" } }, //顯示驗證錯誤 showErrors: function (errorMap, errorArr) { //errorMap {'name':'錯誤信息'} //errorArr [{'message':'錯誤信息',element:({})}] alert(errorArr[0].message); //獲取焦點 $(errorArr[0].element).focus(); }, })
內置驗證方式：
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:
對一組元素的驗證,用一個錯誤提示,用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
})
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({
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來添加除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就是這個唯一的參數,如果多個參數,用在[]里,用逗號分開