驗證外掛（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',
//統一包裹錯誤提示
errorLabelContainer : 'ol.error',
wrapper : 'li',
//設定成功後載入的 class
success : 'success',
//使用方法載入 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'] == 'bnbbs') {
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'] != 'bnbbs' || $_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
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,
}
},
