2016-09-0611:13:55javascript
對於初學者而言,html表單驗證是一項極其瑣碎的事情。要作好表單驗證,須要準備如下基本要素:css
1.html表單結構:包含須要校驗的表單元素;html
2.js邏輯控制:在須要校驗的表單元素上綁定事件,如點擊、獲取焦點、失去焦點等事件,並設置這些事件對應的執行函數;java
3.css樣式設置:針對須要校驗的表單元素,須要設置默認的初始樣式,以及觸發元素綁定事件後的變化樣式。jquery
這3類基本要素中,html表單結構的建立相對簡單。表單驗證的重點和難點在於如何利用js及時有效地提醒用戶有關表單操做的信息。這裏我參考了百度,163郵箱,京東等知名互聯網企業的註冊頁面,概括出表單驗證須要的主要提示信息分類以下:瀏覽器
1.表單元素獲取焦點後的幫助信息(插件中對應class名"tip");app
2.表單元素驗證經過時的成功信息(插件中對應class名"valid");ide
3.表單元素驗證失敗時的錯誤信息(插件中對應class名"error")。函數
若是不借助任何插件,咱們須要花費大量的時間去編寫不一樣類型的信息提示,考慮各類樣式間的來回切換,以及編寫一些基本的驗證規則。名言曰:"我 之因此看得更遠,是由於我站在巨人的肩膀上"。何不直接利用一些已有的成熟插件,來幫助咱們快速的編寫一個表單驗證功能,這樣既能提升效率,又能讓咱們抽 出時間專一於咱們本身的邏輯。post
在衆多表單驗證插件中,jquery validate插件是歷史最悠久的jQuery插件之一,通過了全球範圍內不一樣項目的驗證。它的特色以下:
1.內置驗證規則:擁有必填、數字、email、url和信用卡號碼等內置驗證規則;
2.自定義驗證規則:能夠很方便地自定義驗證規則(經過$.validator.addMethod(name,method,message)實現);
3.簡單強大的驗證信息提示:默認了驗證信息提示,並提供自定義覆蓋默認信息提示的功能(經過設置插件中的message參數來實現);
4.實時驗證:能夠經過keyup或blur事件觸發驗證,而不只僅在表單提交的時候驗證。
下面咱們選擇該插件,來實現一個簡單而漂亮的表單驗證例子。
在引入jquery validate插件前,須要先引入它所依賴的文件jquery.js(例子中jquery的版本爲1.9);在實現的過程當中,爲了更好地效果,我在 jquery.validate.extend.js文件中對jquery validate原有的功能進行了擴展,並修改了相關默認選項;所以在文檔頭部須要引入的文件有三個:
<script src="jquery.js"></script> <script src="lib/jquery.validate.min.js"></script> <script src="lib/jquery.validate.extend.js"></script>
表單驗證3要素中,首先須要完成html表單結構代碼的編寫。爲了讓表單結構簡單而清晰,咱們將表單的每一個元素都包裹在一個div結構中:用 label標籤用來標記元素的名稱,接着即是表單元素自己。【註明:
1.使用label標籤的好處是爲鼠標用戶改進了可用性。當在label元素內點擊文 本時,瀏覽器就會自動將焦點轉到和label相關的表單控件上。
2.每一個須要校驗的表單元素都應該設置id和name屬性,方便在使用插件時將元素綁定校 驗規則和校驗信息。
】
表單實現代碼以下:
<form action="#" method="post" id="regForm"> <fieldset> <legend>jquery-validate表單校驗驗證</legend> <div class="item"> <label for="username" class="item-label">用戶名:</label> <input type="text" id="username" name="username" class="item-text" placeholder="設置用戶名" autocomplete="off" tip="請輸入用戶名"> </div> <div class="item"> <label for="password" class="item-label">密碼:</label> <input type="password" id="password" name="password" class="item-text" placeholder="設置密碼" tip="長度爲6-16個字符"> </div> <div class="item"> <label for="password" class="item-label">確認密碼:</label> <input type="password" name="repassword" class="item-text" placeholder="設置確認密碼"> </div> <div class="item"> <label for="amt" class="item-label">金額:</label> <input type="text" id="amt" name="amt" class="item-text" placeholder="交易金額" tip="交易金額必須大於0,且最多有兩位小數"> </div> <div class="item"> <input type="submit" value="提交" class="item-submit"> </div> </fieldset> </form> |
接着咱們經過js來實現對錶單元素的校驗。在校驗以前,我對jquery validate插件進行了功能擴展,對默認的選項進行了重寫覆蓋。
jquery validate插件默認只提供了校驗正確及錯誤時的提示,缺乏咱們常見的幫助信息提示。
爲了解決這個問題,我仔細研究了插件的源碼,發現插件自己提供了onfocusin(校驗元素得到焦點時調用)和onfocusout(校驗元素失去焦點時調用)這兩個函數。經過修改默認參數的這兩個接口,能夠實現黨用戶鼠標點擊或選擇元素時(即元素得到焦點),提示幫助信息;在用戶鼠標離開元素時(即元素失去焦點),移除幫助信息。
此外,jquery validate默認提供表單元素輸入時的實時校驗,由於咱們要求在輸入時只提示用戶幫助信息,故須要關閉輸入的實時校驗,爲此咱們將默認參數中的onkeyup設置爲null。
具體的擴展改進代碼我放到了新增js腳本jquery.validate.extend.js中,代碼以下:
1 /*******************************插件新功能-設置插件validator的默認參數*****************************************/ 2 $.validator.setDefaults({ 3 /*關閉鍵盤輸入時的實時校驗*/ 4 onkeyup: null, 5 /*添加校驗成功後的執行函數--修改提示內容,併爲正確提示信息添加新的樣式(默認是valid)*/ 6 success: function(label){ 7 /*label的默認正確樣式爲valid,須要經過validClass來重置,不然這裏添加的其餘樣式不能被清除*/ 8 label.text('').addClass('valid'); 9 }, 10 /*重寫校驗元素得到焦點後的執行函數--增長[1.光標移入元素時的幫助提示,2.校驗元素的高亮顯示]兩個功能點*/ 11 onfocusin: function( element ) { 12 this.lastActive = element; 13 14 /*1.幫助提示功能*/ 15 this.addWrapper(this.errorsFor(element)).hide(); 16 var tip = $(element).attr('tip'); 17 if(tip && $(element).parent().children(".tip").length === 0){ 18 $(element).parent().append("<label class='tip'>" + tip + "</label>"); 19 } 20 21 /*2.校驗元素的高亮顯示*/ 22 $(element).addClass('highlight'); 23 24 // Hide error label and remove error class on focus if enabled 25 if ( this.settings.focusCleanup ) { 26 if ( this.settings.unhighlight ) { 27 this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass ); 28 } 29 this.hideThese( this.errorsFor( element ) ); 30 } 31 }, 32 /*重寫校驗元素焦點離開時的執行函數--移除[1.添加的幫助提示,2.校驗元素的高亮顯示]*/ 33 onfocusout: function( element ) { 34 /*1.幫助提示信息移除*/ 35 $(element).parent().children(".tip").remove(); 36 37 /*2.校驗元素高亮樣式移除*/ 38 $(element).removeClass('highlight'); 39 40 /*3.替換下面註釋的原始代碼,任什麼時候候光標離開元素都觸發校驗功能*/ 41 this.element( element ); 42 43 /*if ( !this.checkable( element ) && ( element.name in this.submitted || !this.optional( element ) ) ) { 44 this.element( element ); 45 }*/ 46 } 47 });
完善插件的功能後,如今就是重頭戲——使用插件爲表單元素綁定校驗規則和校驗信息。
jquery validate插件提供validate方法實現form表單的元素校驗,該方法的參數是一個包含鍵值對的對象。
其中最經常使用的鍵有rules(爲不一樣元素定義校驗規則),messages(爲不一樣元素定義錯誤提示信息),success(校驗正確後的字符串或者是執行函數)。
常見的校驗規則有:required(是否必填),minlength(最小長度),maxlength(最大長度),email(email格式規 則),url(url格式規則),date(date格式規則),rangelength(給定長度範圍規則),equalTo(要求元素等於另外一元素例 如equalsTo:"#password")。
下面的代碼呈現了如何對錶單中的用戶名、密碼等字段綁定校驗規則:
<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: "用戶名的最小長度爲2" }, password:{ required: "密碼不能爲空", minlength: "密碼長度不能少於6個字符", maxlength: "密碼長度不能超過16個字符" }, repassword:{ required: "確認密碼不能爲空", equalTo: "確認密碼和密碼不一致" }, amt: { required: "金額不能爲空" } } }); }); </script>
最後還要爲頁面元素添加css樣式。插件中有一系列默認選項:其中默認錯誤顯示標籤爲label,錯誤樣式爲label.error。
上面在 jquery.validate.extend.js文件中,有一個success函數須要說明一下。這個函數是在校驗成功的時候執行的,咱們在函數中爲 label提示標籤添加了校驗正確對應的樣式label.valid。所以在css中若是要美化信息提示,須要對label相關樣式如 error,valid樣式進行設計。
此外咱們在擴展插件功能中添加了一個class爲tip的label標籤,該標籤僅在校驗元素得到焦點時生成。爲 此,還須要設置label的tip樣式。
完整的樣式文件內容具體以下:
1 body{ 2 font-family: Microsoft Yahei; 3 font-size: 15px; 4 } 5 6 fieldset{ width: 680px; } 7 8 legend{ margin-left: 8px; } 9 10 .item{ 11 height: 56px; 12 line-height: 36px; 13 margin: 10px; 14 } 15 16 .item .item-label{ 17 float: left; 18 width: 80px; 19 text-align: right; 20 } 21 22 .item-text{ 23 float: left; 24 width: 244px; 25 height: 16px; 26 padding: 9px 25px 9px 5px; 27 margin-left: 10px; 28 border: 1px solid #ccc; 29 overflow: hidden; 30 } 31 32 .item-select{ 33 float: left; 34 height: 34px; 35 border: 1px solid #ccc; 36 margin-left: 10px; 37 font-size: 14px; 38 padding: 6px 0px; 39 } 40 41 .item-submit{ 42 margin-left: 88px; 43 } 44 45 input.error{ 46 border: 1px solid #E6594E; 47 } 48 49 input.highlight{ 50 border: 1px solid #7abd54; 51 } 52 53 label.error,label.tip{ 54 float: left; 55 height: 32px; 56 line-height: 32px; 57 font-size: 14px; 58 text-align: left; 59 margin-left: 5px; 60 padding-left: 20px; 61 color: red; 62 background: url('error.png') no-repeat left center; 63 } 64 65 label.tip{ 66 color: #aaa; 67 background: url('tip.png') no-repeat left center; 68 } 69 70 label.valid{ 71 background: url('valid.png') no-repeat left center; 72 width: 32px; 73 }
至此,表單校驗的代碼編寫和插件的應用已經所有完成。
基本上知足如今大多數網站表單驗證的要求,若是須要增長驗證規則,只須要在jquery.validate.extend.js中增長校驗規則便可,例子以下:
1 /*******************************插件字段校驗*****************************************/ 2 $.validator.addMethod( 3 "amtCheck", 4 function(value, element){ 5 /*var dotPos = value.indexOf('.'); 6 return value > 0 && dotPos < 0 && (dotPos > 0 && value.substring(dotPos + 1) <= 2);*/ 7 8 return value && /^\d*\.?\d{0,2}$/.test(value); 9 }, 10 "金額必須大於0且小數位數不超過2位" 11 );
對於重複的代碼能夠封裝一下;
體驗摺疊代碼的+addMethod 方法
1 addMethod(name,method,message)方法: 2 3 參數name是添加的方法的名字 4 參數method是一個函數,接收三個參數(value,element,param) 5 value是元素的值 6 element是元素自己 7 param是參數 8 9 咱們能夠用addMethod來添加除built-in Validation 10 methods以外的驗證方法 好比有一個字段,只能輸一個字母,範圍是a-f,寫法以下: 11 12 $.validator.addMethod("af", 13 function(value,element,params){ 14 if(value.length>1){ 15 return false; 16 } 17 if(value>=params[0] 18 && value<=params[1]){ 19 return true; 20 }else{ 21 return false; 22 } 23 }, 24 "必須是一個字母,且a-f"); 25 26 用的時候,好比有個表單字段的id="username",則在rules中寫 27 username:{ 28 af:["a","f"] 29 } 30 31 addMethod的第一個參數,就是添加的驗證方法的名子,這時是af 32 33 addMethod的第三個參數,就是自定義的錯誤提示,這裏的提示爲:"必須是一個字母,且a-f" 34 35 addMethod的第二個參數,是一個函數,這個比較重要,決定了用這個驗證方法時的寫法 36 37 若是隻有一個參數,直接寫,若是af:"a",那麼a就是這個惟一的參數,若是多個參數,用在[]裏,用逗號分開