1、下載地址:http://jqueryvalidation.org/
2、使用方法:
<script type="text/javascript" src="http://www.xftz.cn/templets/yuanyou/js/jquery-1.12.1.min.js"></script> <script type="text/javascript" src="js/jquery.validate.min.js"></script>
jquery表單對象.validate()
3、validade()方法
作用:驗證選中的表單,傳入一個配置對象用於對驗證進行各種配置。
3.1.1、rules
作用:為各種表單元素添加各種驗證規則
類型:object
使用方法:rules:{
name屬性值:{
驗證規則1,
驗證規則2,
...
}...
}
3.1.2、內置的驗證規則:
1)、required:必須輸入的字段
使用:required:true,如果這個標簽只有這一條驗證規則,可以簡寫:name屬性值:"required"
2)、minlength:最小字符長度
3)、maxlength:最大字符長度
4)、rangelength:字符長度必須介於某個區間
使用:rangelength:[2,3]
5)、min:輸入值被允許的最小值(數字)
6)、max:輸入值被允許的最大值(數字)
7)、range:[5,10],輸入值必須介於某個區間
8)、number:true,必須是合法的數字
9)、digits:true,必須是整數
10)、email:true,必須是正確的郵箱
11)、url:true,必須是正確的網址
12)、equalTo:jq選擇器,輸入值必須和給定選擇器的值相同
13)、remote:{
url:"check_email.php",
type:"post",
data:{
username:"xulinjun"
}
}
使用ajax方法,調用服務器端腳本,驗證輸入值
14)、extension:限定特定格式的后綴名,多個用"|"隔開,(需要引入additional-methods.min文件)
4、提示信息的漢化
4.1、直接引入漢化包
<script type="text/javascript" src="js/dist/localization/messages_zh.min.js"></script>
4.2、messages
如果需要在validate()方法內修改提示信息,則可以使用本方法,
自定義的提示信息,key:value的形式,key是要驗證的元素,value可以是字符串或函數,舉例:
messages:{ username:{ required:"必須填寫" }, username1:{ required:"必須填寫", equalTo:"倆次輸入不一致" } }
//這里rules上面的值,messages里面可以同步使用,{0}代表第一個,{1}代表第二個...舉例:
username:{
required:"必須填寫",
min:"最小的值必須是{0}"
}
5、submitHandler
類型:function(form)
說明,通過驗證后運行的函數,默認添加該函數則不會再提交除非手動提交或者使用return true,
函數參數:該函數接收一個參數,表示當前表單dom對象
6、invalidHandler(event,validator)
說明,當一個無效的表單(即驗證不通過的時候)被提交的時候觸發這個函數
函數參數:當前驗證的表單validator對象
7、errorClass(默認值error)
類型:string
說明:指定錯誤提示與驗證不通過的控件的css類名
8、validClass(默認值:valid)
類型:string
在驗證成功的控件上加上傳入的css類名
9、errorElement(默認值:label)
類型:string
說明:用什么標簽標記錯誤
10、errorPlacement(默認值,在無效的元素之后)
類型:function(error,element)
說明:自定義錯誤信息放到哪里
11、errorContainer
選擇器字符串
說明:有錯誤信息出現時把選擇器匹配的元素變為顯示,沒有時隱藏。
12、errorLabelContainer
類型:選擇器字符串
說明:把錯誤信息統一放在一個容器里面
13、wrapper
類型:string
說明:用什么標簽再把上邊的errorElement包起來
14、success
類型:string or function(label,element){
}
說明:每個字段驗證通過執行函數
函數參數:label(信息提示標簽的jquery對象),element(當初驗證成功的dom元素對象)
如果跟一個字符串,會作為css類加在提示信息的標簽上
15、highlight(默認值,添加errorClass到驗證失敗的表單控件)
類型:function(element,errorClass,vaildClass){
}
說明:傳入的函數會在每個控件驗證不通過時執行,我們可以通過這個配置屬性,給不通過的控件添加效果
函數參數:element(當前未通過驗證的dom元素對象),errorClass(錯誤時給錯誤提示標簽的css類名稱),vaildClass(vaildClass屬性的當前值)
16、debug(默認值false)
類型:布爾值
設置為true之后則表單不會真正的提交,僅僅是驗證
17、ignore(默認值:hidden)
類型:selector
說明:忽略某些元素不驗證
三、validator對象
validate方法返回一個validator對象,我們稱這個對象為validator對象
常用方法:
1、validator.form()
返回:boolean
驗證form返回成功還是失敗
2、validator.element()
返回:boolean
驗證單個表單驗證是成功還是失敗
3、validator.resetForm()
把前面驗證的form恢復到驗證前原來的狀態
4、validator.showErrors()
顯示特定的錯誤信息
5、validator.numberOfInvalids()
返回驗證不通過的字段數
靜態方法:
6、$.validator.setDefaults()
改版默認的設置
7、$.validator.addClassRules()
增加組合驗證類型,可以在一個css類里面用多種驗證規則
8、$.validator.format()
用參數代表模板中的{n}
四、rules()方法
1、介紹:
查看,新增,移除一個表單控件的驗證規則
2、使用:
表單控件.rules()
3、參數:
rules() 返回元素的驗證規則
rules("add",rules) 增加驗證規則
rules("remove",rules) 刪除驗證規則,多個驗證規則用空格隔開
五、valid()方法
1、介紹
檢查表單是否通過
2、使用
表單jquery對象.valid()
六、jquery validation提供的選擇器
1、增加的選擇器
:blank 選擇所有沒有值或者值為空白的控件
:filled 選擇所有填寫了非空值的表單控件
:unchecked 與jquery提供的checked作用相反
最后附上一張效果圖:

