表單驗證插件----jquery validation


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作用相反

 最后附上一張效果圖:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM