推薦整理分享表單驗(yàn)證插件Validation應(yīng)用的實(shí)例講解(表單驗(yàn)證插件)，希望有所幫助，僅作參考，歡迎閱讀內(nèi)容。

文章相關(guān)熱門搜索詞:表單驗(yàn)證插件,表單驗(yàn)證原理,表單驗(yàn)證用什么方法實(shí)現(xiàn),前端表單驗(yàn)證插件,validateform表單驗(yàn)證,validateform表單驗(yàn)證,表單驗(yàn)證插件,validate表單驗(yàn)證,內(nèi)容如對(duì)您有幫助，希望把文章鏈接給更多的朋友！

jquery.Validation是一款優(yōu)秀的jquery插件，它能對(duì)客戶端表單進(jìn)行驗(yàn)證，并且提供了許多可以定制的屬性和方法，良好的擴(kuò)展性。現(xiàn)在結(jié)合實(shí)際情況，我把項(xiàng)目中經(jīng)常要用到的驗(yàn)證整理成一個(gè)實(shí)例DEMO，本文就是通過講解這個(gè)實(shí)例來理解Validation的應(yīng)用。

本實(shí)例涉及到的驗(yàn)證有：用戶名：長(zhǎng)度、字符驗(yàn)證，重復(fù)性ajax驗(yàn)證（是否已存在）。密碼：長(zhǎng)度驗(yàn)證，重復(fù)輸入密碼驗(yàn)證。郵件：郵件地址驗(yàn)證。固定電話：中國大陸固定電話號(hào)碼驗(yàn)證。手機(jī)號(hào)：中國大陸手機(jī)號(hào)碼驗(yàn)證。網(wǎng)址：網(wǎng)站URL地址驗(yàn)證。日期：標(biāo)準(zhǔn)日期格式驗(yàn)證。數(shù)字：整數(shù)、正整數(shù)驗(yàn)證，數(shù)字范圍驗(yàn)證。身份證：大陸身份證號(hào)碼驗(yàn)證。郵政編碼：大陸郵政編碼驗(yàn)證。文件：文件類型（后綴）驗(yàn)證，如只允許上傳圖片。IP：IP地址驗(yàn)證。驗(yàn)證碼：驗(yàn)證碼ajax驗(yàn)證。使用方法：1、準(zhǔn)備jquery和jquery.validate插件

2、準(zhǔn)備CSS樣式頁面樣式我不再詳述，大家可以自己寫個(gè)樣式，也可以參看DEMO的頁面源代碼。這里要強(qiáng)調(diào)的關(guān)鍵樣式是要顯示驗(yàn)證信息的樣式：

3、XHTML

值得一提的是，我在給了標(biāo)簽一個(gè)“required”類樣式，下文將會(huì)提到它的作用。4、應(yīng)用Validation插件調(diào)用Validation插件的方法：

rules:定義驗(yàn)證規(guī)則，key:value的形式，key是要驗(yàn)證的元素,value可以是字符串或?qū)ο蟆１热珧?yàn)證用戶名的長(zhǎng)度和不允許為空：

其實(shí)我們?cè)赬HTML代碼中可以直接指定input的class屬性為required，作用是不允許為空，這樣在JS部分就不用重復(fù)寫了。同樣的驗(yàn)證email等，直接設(shè)置input的class屬性為email。messages:定義提示信息，key:value的形式key是要驗(yàn)證的元素,值是字符串或函數(shù)，當(dāng)驗(yàn)證不通過時(shí)提示的信息。

本例中涉及的驗(yàn)證JS就是按照上面的規(guī)則進(jìn)行編寫的，Validation插件封裝了好多基本的驗(yàn)證方式，如下：required:true 必須有值，不能為空remote:url 可以用于判斷用戶名等是否已經(jīng)存在,服務(wù)器端輸出true,表示驗(yàn)證通過minlength:6 最小長(zhǎng)度為6maxlength: 最大長(zhǎng)度為rangelength:長(zhǎng)度范圍range:[,] 數(shù)值范圍在-之間email:true 驗(yàn)證郵件url:true 驗(yàn)證URL網(wǎng)址dateISO:true 驗(yàn)證日期格式'yyyy-mm-dd'digits:true 只能為數(shù)字accept:'gif|jpg' 只接受gif或jpg為后綴的圖片。常用于驗(yàn)證文件的擴(kuò)展名equalTo:'#pass' 與哪個(gè)表單字段的值相等，常用于驗(yàn)證重復(fù)輸入密碼此外，我還根據(jù)項(xiàng)目實(shí)際情況擴(kuò)展了幾個(gè)驗(yàn)證，驗(yàn)證的代碼在validate-ex.js，使用前需要先加載這個(gè)JS。它能提供以下驗(yàn)證：userName:true 用戶名只能包括中文字、英文字母、數(shù)字和下劃線isMobile:true 手機(jī)號(hào)碼驗(yàn)證isPhone:true 大陸手機(jī)號(hào)碼驗(yàn)證isZipCode:true 郵政編碼驗(yàn)證isIdCardNo:true 大陸身份證號(hào)碼驗(yàn)證ip:true IP地址驗(yàn)證以上提供的驗(yàn)證方式基本上滿足我們?cè)诖蠖鄶?shù)項(xiàng)目中的需求。如果其他特殊驗(yàn)證需求，可以擴(kuò)展，方法如：

疑難問題解決：1、在項(xiàng)目中遇到在驗(yàn)證用戶名是否存在時(shí)，發(fā)現(xiàn)不支持中文輸入驗(yàn)證。我的解決辦法是給用戶名進(jìn)行encodeURIComponent編碼，后臺(tái)PHP再對(duì)接受的值進(jìn)行urldecode解碼

服務(wù)端驗(yàn)證程序chk_user.php的代碼：

我使用的服務(wù)端程序是PHP，您也可以使用ASP，ASP.NET，JAVA等。此外本例為了演示，用戶名數(shù)據(jù)是直接寫在服務(wù)端的，真正的應(yīng)用是從數(shù)據(jù)庫里取出的用戶名數(shù)據(jù)，來和接收客戶端的數(shù)據(jù)進(jìn)行對(duì)比。2、在驗(yàn)證checkbox和radio控件時(shí)，驗(yàn)證信息不會(huì)出現(xiàn)在最后的控件文本后面，而是直接跟在第一個(gè)控件的后面，不符合我們的要求。

解決辦法是在validate({})追加以下代碼：

3、重置表單。Form表單原始的重置方法是reset自帶

點(diǎn)擊“重置”按鈕，表單元素將會(huì)重置，但是再運(yùn)行Validation插件后，驗(yàn)證的提示信息并沒重置，就是那些提示信息沒有消失。感謝Validation提供了重置表單的方法：resetForm()

jQuery實(shí)現(xiàn)仿新浪微博浮動(dòng)的消息提示框(可智能定位) 本文實(shí)例講述了jQuery實(shí)現(xiàn)仿新浪微博浮動(dòng)的消息提示框。分享給大家供大家參考。具體如下：這是一款jQuery實(shí)現(xiàn)的仿新浪微博新消息提示框效果，支持

jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)出現(xiàn)隱藏層文字鏈接的方法 本文實(shí)例講述了jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)出現(xiàn)隱藏層文字鏈接的方法。分享給大家供大家參考。具體如下：這里演示Jquery顯示隱藏層的方法，鼠標(biāo)經(jīng)過時(shí)出

jquery實(shí)現(xiàn)可自動(dòng)判斷位置的彈出層效果代碼 本文實(shí)例講述了jquery實(shí)現(xiàn)可自動(dòng)判斷位置的彈出層效果代碼。分享給大家供大家參考。具體如下：這是一款jquery實(shí)現(xiàn)的智能彈出層效果，位置可以自適