jquery validate 表單驗證插件

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 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>

 

表單html

  表單驗證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>

 

2.2 表單驗證js邏輯

  接着咱們經過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樣式

  最後還要爲頁面元素添加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就是這個惟一的參數,若是多個參數,用在[]裏,用逗號分開
addMethod Code
相關文章
相關標籤/搜索