jquery validate表單驗(yàn)證插件
對(duì)于初學(xué)者而言,html表單驗(yàn)證是一項(xiàng)極其瑣碎的事情。要做好表單驗(yàn)證,需要準(zhǔn)備以下基本要素:
1.html表單結(jié)構(gòu):包含需要校驗(yàn)的表單元素;
2.js邏輯控制:在需要校驗(yàn)的表單元素上綁定事件,如點(diǎn)擊、獲取焦點(diǎn)、失去焦點(diǎn)等事件,并設(shè)置這些事件對(duì)應(yīng)的執(zhí)行函數(shù);
3.css樣式設(shè)置:針對(duì)需要校驗(yàn)的表單元素,需要設(shè)置默認(rèn)的初始樣式,以及觸發(fā)元素綁定事件后的變化樣式。
這3類基本要素中,html表單結(jié)構(gòu)的創(chuàng)建相對(duì)簡(jiǎn)單。表單驗(yàn)證的重點(diǎn)和難點(diǎn)在于如何利用js及時(shí)有效地提醒用戶有關(guān)表單操作的信息。這里我參考了百度,163郵箱,京東等知名互聯(lián)網(wǎng)企業(yè)的注冊(cè)頁(yè)面,歸納出表單驗(yàn)證需要的主要提示信息分類如下:
1.表單元素獲取焦點(diǎn)后的幫助信息(插件中對(duì)應(yīng)class名"tip");
2.表單元素驗(yàn)證通過時(shí)的成功信息(插件中對(duì)應(yīng)class名"valid");
3.表單元素驗(yàn)證失敗時(shí)的錯(cuò)誤信息(插件中對(duì)應(yīng)class名"error")。
如果不借助任何插件,我們需要花費(fèi)大量的時(shí)間去編寫不同類型的信息提示,考慮各種樣式間的來回切換,以及編寫一些基本的驗(yàn)證規(guī)則。名言曰:"我 之所以看得更遠(yuǎn),是因?yàn)槲艺驹诰奕说募绨蛏?。何不直接利用一些已有的成熟插件,來幫助我們快速的編寫一個(gè)表單驗(yàn)證功能,這樣既能提高效率,又能讓我們抽 出時(shí)間專注于我們自己的邏輯。
在眾多表單驗(yàn)證插件中,jquery validate插件是歷史最悠久的jQuery插件之一,經(jīng)過了全球范圍內(nèi)不同項(xiàng)目的驗(yàn)證。它的特點(diǎn)如下:
1.內(nèi)置驗(yàn)證規(guī)則:擁有必填、數(shù)字、email、url和信用卡號(hào)碼等內(nèi)置驗(yàn)證規(guī)則;
2.自定義驗(yàn)證規(guī)則:可以很方便地自定義驗(yàn)證規(guī)則(通過$.validator.addMethod(name,method,message)實(shí)現(xiàn));
3.簡(jiǎn)單強(qiáng)大的驗(yàn)證信息提示:默認(rèn)了驗(yàn)證信息提示,并提供自定義覆蓋默認(rèn)信息提示的功能(通過設(shè)置插件中的message參數(shù)來實(shí)現(xiàn));
4.實(shí)時(shí)驗(yàn)證:可以通過keyup或blur事件觸發(fā)驗(yàn)證,而不僅僅在表單提交的時(shí)候驗(yàn)證。
下面我們選擇該插件,來實(shí)現(xiàn)一個(gè)簡(jiǎn)單而漂亮的表單驗(yàn)證例子。
jquery validate插件實(shí)現(xiàn)表單驗(yàn)證的小例子
在引入jquery validate插件前,需要先引入它所依賴的文件jquery.js(例子中jquery的版本為1.9);在實(shí)現(xiàn)的過程中,為了更好地效果,我在 jquery.validate.extend.js文件中對(duì)jquery validate原有的功能進(jìn)行了擴(kuò)展,并修改了相關(guān)默認(rèn)選項(xiàng);因此在文檔頭部需要引入的文件有三個(gè):
<script src="jquery.js"></script> <script src="lib/jquery.validate.min.js"></script> <script src="lib/jquery.validate.extend.js"></script>
表單html
表單驗(yàn)證3要素中,首先需要完成html表單結(jié)構(gòu)代碼的編寫。為了讓表單結(jié)構(gòu)簡(jiǎn)單而清晰,我們將表單的每個(gè)元素都包裹在一個(gè)div結(jié)構(gòu)中:用 label標(biāo)簽用來標(biāo)記元素的名稱,接著便是表單元素本身。
【注明:
1.使用label標(biāo)簽的好處是為鼠標(biāo)用戶改進(jìn)了可用性。當(dāng)在label元素內(nèi)點(diǎn)擊文 本時(shí),瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和label相關(guān)的表單控件上。
2.每個(gè)需要校驗(yàn)的表單元素都應(yīng)該設(shè)置id和name屬性,方便在使用插件時(shí)將元素綁定校 驗(yàn)規(guī)則和校驗(yàn)信息。
】
表單實(shí)現(xiàn)代碼如下:
<form action="#" method="post" id="regForm"> <fieldset> <legend>jquery-validate表單校驗(yàn)驗(yàn)證</legend> <div class="item"> <label for="username" class="item-label">用戶名:</label> <input type="text" id="username" name="username" class="item-text" placeholder="設(shè)置用戶名" autocomplete="off" tip="請(qǐng)輸入用戶名"> </div> <div class="item"> <label for="password" class="item-label">密碼:</label> <input type="password" id="password" name="password" class="item-text" placeholder="設(shè)置密碼" tip="長(zhǎng)度為6-16個(gè)字符"> </div> <div class="item"> <label for="password" class="item-label">確認(rèn)密碼:</label> <input type="password" name="repassword" class="item-text" placeholder="設(shè)置確認(rèn)密碼"> </div> <div class="item"> <label for="amt" class="item-label">金額:</label> <input type="text" id="amt" name="amt" class="item-text" placeholder="交易金額" tip="交易金額必須大于0,且最多有兩位小數(shù)"> </div> <div class="item"> <input type="submit" value="提交" class="item-submit"> </div> </fieldset> </form>
2.2 表單驗(yàn)證js邏輯
接著我們通過js來實(shí)現(xiàn)對(duì)表單元素的校驗(yàn)。在校驗(yàn)之前,我對(duì)jquery validate插件進(jìn)行了功能擴(kuò)展,對(duì)默認(rèn)的選項(xiàng)進(jìn)行了重寫覆蓋。
jquery validate插件默認(rèn)只提供了校驗(yàn)正確及錯(cuò)誤時(shí)的提示,缺少我們常見的幫助信息提示。
為了解決這個(gè)問題,我仔細(xì)研究了插件的源碼,發(fā)現(xiàn)插件本身提供了onfocusin(校驗(yàn)元素獲得焦點(diǎn)時(shí)調(diào)用)和onfocusout(校驗(yàn)元素失去焦點(diǎn)時(shí)調(diào)用)這兩個(gè)函數(shù)。通過修改默認(rèn)參數(shù)的這兩個(gè)接口,可以實(shí)現(xiàn)黨用戶鼠標(biāo)點(diǎn)擊或選擇元素時(shí)(即元素獲得焦點(diǎn)),提示幫助信息;在用戶鼠標(biāo)離開元素時(shí)(即元素失去焦點(diǎn)),移除幫助信息。
此外,jquery validate默認(rèn)提供表單元素輸入時(shí)的實(shí)時(shí)校驗(yàn),因?yàn)槲覀円笤谳斎霑r(shí)只提示用戶幫助信息,故需要關(guān)閉輸入的實(shí)時(shí)校驗(yàn),為此我們將默認(rèn)參數(shù)中的onkeyup設(shè)置為null。
具體的擴(kuò)展改進(jìn)代碼我放到了新增js腳本jquery.validate.extend.js中,代碼如下:
/*******************************插件新功能-設(shè)置插件validator的默認(rèn)參數(shù)*****************************************/ $.validator.setDefaults({ /*關(guān)閉鍵盤輸入時(shí)的實(shí)時(shí)校驗(yàn)*/ onkeyup: null, /*添加校驗(yàn)成功后的執(zhí)行函數(shù)--修改提示內(nèi)容,并為正確提示信息添加新的樣式(默認(rèn)是valid)*/ success: function(label){ /*label的默認(rèn)正確樣式為valid,需要通過validClass來重置,否則這里添加的其他樣式不能被清除*/ label.text('').addClass('valid'); }, /*重寫校驗(yàn)元素獲得焦點(diǎn)后的執(zhí)行函數(shù)--增加[1.光標(biāo)移入元素時(shí)的幫助提示,2.校驗(yàn)元素的高亮顯示]兩個(gè)功能點(diǎn)*/ onfocusin: function( element ) { this.lastActive = element; /*1.幫助提示功能*/ this.addWrapper(this.errorsFor(element)).hide(); var tip = $(element).attr('tip'); if(tip && $(element).parent().children(".tip").length === 0){ $(element).parent().append("<label class='tip'>" + tip + "</label>"); } /*2.校驗(yàn)元素的高亮顯示*/ $(element).addClass('highlight'); // Hide error label and remove error class on focus if enabled if ( this.settings.focusCleanup ) { if ( this.settings.unhighlight ) { this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass ); } this.hideThese( this.errorsFor( element ) ); } }, /*重寫校驗(yàn)元素焦點(diǎn)離開時(shí)的執(zhí)行函數(shù)--移除[1.添加的幫助提示,2.校驗(yàn)元素的高亮顯示]*/ onfocusout: function( element ) { /*1.幫助提示信息移除*/ $(element).parent().children(".tip").remove(); /*2.校驗(yàn)元素高亮樣式移除*/ $(element).removeClass('highlight'); /*3.替換下面注釋的原始代碼,任何時(shí)候光標(biāo)離開元素都觸發(fā)校驗(yàn)功能*/ this.element( element ); /*if ( !this.checkable( element ) && ( element.name in this.submitted || !this.optional( element ) ) ) { this.element( element ); }*/ } });
完善插件的功能后,現(xiàn)在就是重頭戲——使用插件為表單元素綁定校驗(yàn)規(guī)則和校驗(yàn)信息。
jquery validate插件提供validate方法實(shí)現(xiàn)form表單的元素校驗(yàn),該方法的參數(shù)是一個(gè)包含鍵值對(duì)的對(duì)象。
其中最常用的鍵有rules(為不同元素定義校驗(yàn)規(guī)則),messages(為不同元素定義錯(cuò)誤提示信息),success(校驗(yàn)正確后的字符串或者是執(zhí)行函數(shù))。
常見的校驗(yàn)規(guī)則有:required(是否必填),minlength(最小長(zhǎng)度),maxlength(最大長(zhǎng)度),email(email格式規(guī) 則),url(url格式規(guī)則),date(date格式規(guī)則),rangelength(給定長(zhǎng)度范圍規(guī)則),equalTo(要求元素等于另一元素例 如equalsTo:"#password")。
下面的代碼呈現(xiàn)了如何對(duì)表單中的用戶名、密碼等字段綁定校驗(yàn)規(guī)則:
<script> $(document).ready(function(){ $("#regForm").validate({ rules: { username:{ required: true, minlength: 2 }, password:{ required: true, minlength: 6, maxlength: 16 }, repassword:{ required: true, equalTo: "#password" }, amt: { required: true, amtCheck: true, } }, messages:{ username:{ required: "用戶名不能為空", minlength: "用戶名的最小長(zhǎng)度為2" }, password:{ required: "密碼不能為空", minlength: "密碼長(zhǎng)度不能少于6個(gè)字符", maxlength: "密碼長(zhǎng)度不能超過16個(gè)字符" }, repassword:{ required: "確認(rèn)密碼不能為空", equalTo: "確認(rèn)密碼和密碼不一致" }, amt: { required: "金額不能為空" } } }); }); </script>
表單驗(yàn)證css樣式
最后還要為頁(yè)面元素添加css樣式。插件中有一系列默認(rèn)選項(xiàng):其中默認(rèn)錯(cuò)誤顯示標(biāo)簽為label,錯(cuò)誤樣式為label.error。
上面在 jquery.validate.extend.js文件中,有一個(gè)success函數(shù)需要說明一下。這個(gè)函數(shù)是在校驗(yàn)成功的時(shí)候執(zhí)行的,我們?cè)诤瘮?shù)中為 label提示標(biāo)簽添加了校驗(yàn)正確對(duì)應(yīng)的樣式label.valid。因此在css中如果要美化信息提示,需要對(duì)label相關(guān)樣式如 error,valid樣式進(jìn)行設(shè)計(jì)。
此外我們?cè)跀U(kuò)展插件功能中添加了一個(gè)class為tip的label標(biāo)簽,該標(biāo)簽僅在校驗(yàn)元素獲得焦點(diǎn)時(shí)生成。為 此,還需要設(shè)置label的tip樣式。
完整的樣式文件內(nèi)容具體如下:
body{ font-family: Microsoft Yahei; font-size: 15px; } fieldset{ width: 680px; } legend{ margin-left: 8px; } .item{ height: 56px; line-height: 36px; margin: 10px; } .item .item-label{ float: left; width: 80px; text-align: right; } .item-text{ float: left; width: 244px; height: 16px; padding: 9px 25px 9px 5px; margin-left: 10px; border: 1px solid #ccc; overflow: hidden; } .item-select{ float: left; height: 34px; border: 1px solid #ccc; margin-left: 10px; font-size: 14px; padding: 6px 0px; } .item-submit{ margin-left: 88px; } input.error{ border: 1px solid #E6594E; } input.highlight{ border: 1px solid #7abd54; } label.error,label.tip{ float: left; height: 32px; line-height: 32px; font-size: 14px; text-align: left; margin-left: 5px; padding-left: 20px; color: red; background: url('error.png') no-repeat left center; } label.tip{ color: #aaa; background: url('tip.png') no-repeat left center; } label.valid{ background: url('valid.png') no-repeat left center; width: 32px; }
表單驗(yàn)證效果演示
至此,表單校驗(yàn)的代碼編寫和插件的應(yīng)用已經(jīng)全部完成。
基本上滿足現(xiàn)在大多數(shù)網(wǎng)站表單驗(yàn)證的要求,如果需要增加驗(yàn)證規(guī)則,只需要在jquery.validate.extend.js中增加校驗(yàn)規(guī)則即可,例子如下:
/*******************************插件字段校驗(yàn)*****************************************/ $.validator.addMethod( "amtCheck", function(value, element){ /*var dotPos = value.indexOf('.'); return value > 0 && dotPos < 0 && (dotPos > 0 && value.substring(dotPos + 1) <= 2);*/ return value && /^\d*\.?\d{0,2}$/.test(value); }, "金額必須大于0且小數(shù)位數(shù)不超過2位" );
/*******************************插件字段校驗(yàn)*****************************************/ $.validator.addMethod( "amtCheck", function(value, element){ /*var dotPos = value.indexOf('.'); return value > 0 && dotPos < 0 && (dotPos > 0 && value.substring(dotPos + 1) <= 2);*/ return value && /^\d*\.?\d{0,2}$/.test(value); }, "金額必須大于0且小數(shù)位數(shù)不超過2位" );
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)表單驗(yàn)證
- jQuery驗(yàn)證插件validate使用方法詳解
- JQuery validate插件驗(yàn)證用戶注冊(cè)信息
- CKEditor無法驗(yàn)證的解決方案(js驗(yàn)證+jQuery Validate驗(yàn)證)
- jQuery validate+artdialog+jquery form實(shí)現(xiàn)彈出表單思路詳解
- jquery.validate提示錯(cuò)誤信息位置方法
- jQuery validate插件實(shí)現(xiàn)ajax驗(yàn)證重復(fù)的2種方法
- jQuery validate插件submitHandler提交導(dǎo)致死循環(huán)解決方法
- 深入學(xué)習(xí)jQuery Validate表單驗(yàn)證(二)
- jquery.validate[.unobtrusive]和Bootstrap實(shí)現(xiàn)tooltip錯(cuò)誤提示問題分析
相關(guān)文章
自己動(dòng)手寫的jquery分頁(yè)控件(非常簡(jiǎn)單實(shí)用)
最近接了一個(gè)項(xiàng)目,其中有需求要用到j(luò)query分頁(yè)控件,上網(wǎng)也找到了需要分頁(yè)控件,各種寫法各種用法,都是很復(fù)雜,最終決定自己動(dòng)手寫一個(gè)jquery分頁(yè)控件,全當(dāng)是練練手了2015-10-10jQuery實(shí)現(xiàn)高亮顯示網(wǎng)頁(yè)關(guān)鍵詞的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)高亮顯示網(wǎng)頁(yè)關(guān)鍵詞的方法,涉及jquery針對(duì)頁(yè)面字符串的遍歷與正則替換的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-0813 款最熱門的 jQuery 圖像 360 度旋轉(zhuǎn)插件推薦
這篇文章主要介紹了13 款最熱門的 jQuery 圖像 360 度旋轉(zhuǎn)插件,非常炫酷實(shí)用,有需要的小伙伴參考下2014-12-12jQuery formValidator表單驗(yàn)證插件開源了 含API幫助、源碼、示例
ajaxValidator函數(shù)在提交后發(fā)生錯(cuò)誤,停留在本頁(yè)面后,再次觸發(fā)校驗(yàn)會(huì)讓提示內(nèi)容一直處于onload狀態(tài)。2008-08-08基于jQuery通過jQuery.form.js插件實(shí)現(xiàn)異步上傳
這篇文章主要介紹了基于jQuery通過jQuery.form.js插件實(shí)現(xiàn)異步上傳,代碼很詳細(xì),感興趣的小伙伴們可以參考一下2015-12-12jquery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)排序Li或Table
這篇文章主要介紹了使用jquery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)排序Li或Table,需要的朋友可以參考下2014-05-05jQuery EasyUI之驗(yàn)證框validatebox實(shí)例詳解
本文通過實(shí)例代碼給大家講解了jQuery EasyUI之驗(yàn)證框validatebox知識(shí),非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-04-04Jquery對(duì)象和Dom對(duì)象的區(qū)別分析
最近有小伙伴咨詢Jquery對(duì)象和Dom對(duì)象的區(qū)別,今天我們談?wù)剛€(gè)人對(duì)于Jquery對(duì)象和Dom對(duì)象的區(qū)別的理解,如有遺漏或者錯(cuò)誤還請(qǐng)指出。2014-11-11jquery zTree異步加載簡(jiǎn)單實(shí)例講解
這篇文章主要為大家詳細(xì)介紹了jquery zTree異步加載簡(jiǎn)單實(shí)例,ztree采用了延遲加載技術(shù),上萬節(jié)點(diǎn)輕松加載,即使在 IE6 下也能基本做到秒殺,感興趣的小伙伴們可以參考一下2016-02-02