jQuery驗證插件

學習要點：
1.使用 validate.js 插件
2.默認驗證規則
3.validate()方法和選項
4.validate.js 其他功能

 

 

驗證插件（validate.js），是一款驗證常規表單數據合法性的插件。使用它，極大的解放了在表單上繁雜的驗證過程，並且錯誤提示顯示的完善也增加了用戶體驗。

 

一．使用 validate.js 插件
官網下載：http://bassistance.de/jquery-plugins/jquery-plugin-validation最重要的文件是validate.js，還有兩個可選的輔助文件：additional-methods.js（控件 class方式）和 message_zh.js（提示漢化）文件（實際使用，請使用 min 壓縮版） 。

第一步：引入 validate.js
<script type="text/javascript" src="js/jquery.validate.js"></script>
第二步：在 JS 文件中執行
$('#reg').validate();

二．默認驗證規則
Validate.js 的默認驗證規則的寫法有兩種形式：1.控件屬性方式；2.JS 鍵值對傳參方式。

//使用控件方式驗證“必填和不得小於兩位”

<input type="text" class="required" minlength="2" name="user" id="user" />

注意：默認規則里設置布爾值的，直接寫到 class 里即可實現。如果是數字或數組區間，直接使用屬性=值的方式即可。而對於錯誤提示，可以引入中文漢化文件，或直接替換掉即可。
//使用 JS 對象鍵值對傳參方式設置

$('#reg').validate({
rules : {
    user : {                          //只有一個規則的話，
        required : true,           　　//直接 user : 'required',
        minlength : 2,
    },
},
    messages : {
        user : {
            required : '帳號不得為空！',
            minlength : '帳號不得小於 2 位！',
        },
    }
});

 

注意：由於第一種形式不能設置指定的錯誤提示信息。我們推薦使用第二種形式，第二種形式也避免的 HTML 污染。

//所有規則演示

$('#reg').validate({
      rules : {
        email : {
            email : true,
        },
        url : {
            url : true,
        },
        date : {
            date : true,
        },
        dateIOS : {
            dateIOS : true,
        },
        number : {
            number : true,
        }
         digits : {
            digits : true,
        },
        creditcard : {
            creditcard : true,
        },
        min : {
            min : 5,
        },
        range : {
            range : [5, 10],
        },
        rangelength : {
           rangelength : [5,10],
        },
        notpass : {
            equalTo : '#pass', //這里的 To 是大寫的 T
        }
    },
})

 

 

三．validate()的方法和選項
除了默認的驗證規則外，validate.js 還提供了大量的其他屬性和方法供開發者使用。比如，調試屬性，錯誤提示位置一系列比較有用的選項。
//jQuery.format 格式化錯誤提示

$('#reg').validate({
    rules : {
        user : {
            required : true,
            minlength : 5,
            rangelength : [5,10]
        },
    },
    messages : {
        user : {
            required : '帳號不得為空！',
            minlength : jQuery.format('帳號不得小於{0}位！'),
            rangelength : jQuery.format('帳號限制在{0}-{1}位！'),
        },
    },
});

 

//開啟調試模式禁止提交
$('#reg').validate({
　　debug : true,
});

//設置調試模式為默認，可以禁止多個表單提交
$.validator.setDefaults({
　　debug : true,   //仍可以正常驗證，但是為了方便調試不會提交到指定頁面
});

//使用其他方式代替默認提交
submitHandler : function (form) {
　　//可以執行 ajax 提交，並且無須 debug:true 阻止提交了
},

//忽略某個字段驗證
ignore : '#pass',

//群組錯誤提示
groups : {
myerror : 'user pass',
},

//顯示群組的錯誤提示
focusInvalid : false,
errorPlacement : function (error, element) {
　　$.each(error, function (index, value) {
　　　　$('.myerror').html($('.myerror').html() + $(value).html());
　　})
},

//群組錯誤提示，分開
groups : {
　　error_user : 'user',
　　error_pass : 'pass'
},

//將群組的錯誤指定存放位置（推薦！！）

errorPlacement : function (error, element) {
　　error.appendTo('.myerror');
},

 

//設置錯誤提示的 class 名

errorClass : 'error_list',

//設置錯誤提示的標簽
errorElement : 'p',

PS：默認的class名稱是“error”，默認的錯誤提示標簽是label。

//統一包裹錯誤提示

(首先將錯誤信息標簽外面再包裹一層li，然后再html文件中提前設置了錯誤信息顯示元素class為error的ol，這兩行代碼就將錯誤信息形成了一個列表樣式)
errorLabelContainer : 'ol.error',
wrapper : 'li',

//設置成功后加載的 class
success : 'success',

PS:驗證成功之后會在label標簽中添加一個sucess類名，然后就可以根據這個設置成功后的的css樣式。另外注意：成功之后，對應的input元素里面的class值會有error變為valid，這樣也可以根據這個class值設置css樣式，樣成功后的提示顯示在input里面，而不是用success顯示在input外面。

 

//使用方法加載 class 並添加文本
success : function (label) {
　　label.addClass('success').text('ok');
},

//高亮顯示有錯誤的元素，變色式
highlight: function(element, errorClass) {
　　$(element).fadeOut(function() {
　　　　$(element).fadeIn()
　　})
},

 

//高亮顯示有錯誤的元素，變色式
highlight: function(element, errorClass) {
　　$(element).css('border', '1px solid red');
},

//成功的元素移出錯誤高亮
unhighlight : function (element, errorClass) {
　　$(element).css('border', '1px solid #ccc');
},

 

//表單提交時獲取信息
invalidHandler : function (event, validator) {
　　var errors = validator.numberOfInvalids();
　　if (errors) {
　　　　$('.myerror').html('您有' + errors + '個表單元素填寫非法！');
　　}
},

//獲取錯誤提示句柄，不用提交及時獲取值
showErrors : function (errorMap, errorList) {
    var errors = this.numberOfInvalids();
    if (errors) {
        $('.myerror').html('您有' + errors + '個表單元素填寫非法！');
    } else {
        $('.myerror').hide();
    }
    this.defaultShowErrors(); 　　//執行默認錯誤
},


//獲取錯誤提示句柄，errorList
showErrors : function (errorMap, errorList) {
    alert(errorList[0].message); 　　//得到錯誤信息
    alert(errorList[0].element); 　　//當前錯誤的表單元素
},

 

 

四．validate.js 其他功能
使用 remote:url，可以對表單進行 ajax 驗證，默認會提交當前驗證的值到遠程地址。如果需要提交其他的值，可以使用 data 選項。
//使用 ajax 驗證

rules : {
    user : {
        required : true,
        minlength : 2,
        remote : 'user.php',
    },
},

 

//user.php 內容

<?php
    if ($_GET['user'] == 'alex') {
        echo 'false';
    } else {
        echo 'true';
    }
?>

 

注意：遠程地址只能輸出'true'或'false'，不能輸出其他值。
//同時傳遞多個值到遠程端

pass : {
    required : true,
    minlength : 6,
    remote : {
        url : 'user.php',
        type : 'POST',
        dataType : 'json',
        data : {
            user : function () {
                return $('#user').val();
            },
        },
    },
},

 

//user.php 內容

<?php
    if ($_POST['user'] != 'alex' || $_POST['pass'] != '123456') {
        echo 'false';
    } else {
        echo 'true';
    }
?>

 

 

validate.js 提供了一些事件觸發的默認值，這些值呢，大部分建議是不用更改的。
//取消提交驗證
onsubmit : false, //默認是 true
注意： 設置為false 會導致直接傳統提交， 不會實現驗證功能， 一般是用於keyup/click/blur驗證提交。

 

//設置鼠標離開不觸發驗證
onfocusout : false, //默認為 true

//設置鍵盤按下彈起不觸發驗證
onkeyup : false, //默認為 true

注意：只要設置了，在測試的瀏覽器不管是 false 還是 true 都不觸發了。

//設置點擊 checkbox 和 radio 點擊不觸發驗證
onclick : false, //默認為 true

//設置錯誤提示后，無法獲取焦點
focusInvalid : false, //默認為 true

//提示錯誤時，隱藏錯誤提示，不能和 focusInvalid 一起用，沖突
focusCleanup : true, //默認為 false
如果表單元素設置了 title 值，且 messages 為默認，就會讀取 title 值的錯誤信息，我們可以通過 ignoreTitle : true，設置為 true，屏蔽這一個功能。

ignoreTitle : true, //默認為 false

//判斷表單所驗證的元素是否全部有效
alert($('#reg').valid()); //全部有效返回 true

Validate.js 提供了可以單獨驗證每個表單元素的 rules 方法，不但提供了 add 增加驗證，還提供了 remove 刪除驗證的功能。

//給 user 增加一個表單驗證

$('#user').rules('add', {
    required : true,
    minlength : 2,
    messages : {
        required : '帳號不得為空！',
        minlength : jQuery.format('帳號不得小於{0}位！'),
    }
});

 

//刪除 user 的所有驗證規則
$('#user').rules('remove');

//刪除 user 的指定驗證規則
$('#user').rules('remove', 'minlength min max');

 

//添加自定義驗證
$.validator.addMethod('code', function (value, element) {
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
  }, '請正確填寫您的郵政編碼');

//調用自定義驗證
rules : {
    code : {
        required : true,
        code : true,
    }
}