軟件介紹

jQuery Validate是一款基于jQuery的輕量級驗證插件，我們可以通過jQuery Validate插件來進行前端數據的驗證工作。這款軟件內置了各種驗證規則和自定義規則接口，從而讓你能夠通過向后臺提交數據來完成驗證操作，非常適合專業的開發人員使用。

軟件簡介

jQuery.validate是非常靈活的JavaScript校驗框架，該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。所有的捆綁方法默認使用英語作為錯誤信息，且已翻譯成其他 37 種語言。我們這里提供的是jQuery.validate.js驗證控件下載，還附帶了API中文手冊，文件有：additional-methods.js，additional-methods.min.js，jquery.validate.js，jquery.validate.min.js和jQuery.validate.js+API中文.pdf。

jQuery Validate軟件特色

1、內置驗證規則：擁有必填、數字、E-Mail、URL和信用卡號等19類內置驗證規則

2、自定義驗證規則：可以很方便地自定義驗證規則

3、簡單強大的驗證信息提示：默認了驗證信息提示，并提供自定義覆蓋默認提示信息的功能

4、實時驗證：可以通過keyup或blur事件觸發驗證

jQuery Validate校檢規則

required：true必須輸入的字段

remote："check.php"使用 ajax 方法調用 check.php 驗證輸入值

email：true必須輸入正確格式的電子郵件

url：true必須輸入正確格式的網址

date：true必須輸入正確格式的日期，內部調用Date.parse()方法進行校驗

dateISO：true必須輸入正確格式的日期(ISO)，如：2009-06-23，1998/01/22

number：true必須輸入合法的數字(負數，小數)

digits：true必須輸入整數

creditcard：必須輸入合法的信用卡號

equalTo："#field"輸入值必須和 #field 相同

accept： 輸入擁有合法后綴名的字符串(上傳文件的后綴)

maxlength：5輸入長度最多是 5 的字符串(漢字算一個字符)

minlength：10輸入長度最小是 10 的字符串(漢字算一個字符)

rangelength：[5,10]輸入長度必須介于 5 和 10 之間的字符串(漢字算一個字符)

range：[5,10]輸入值必須介于 5 和 10 之間

max：5輸入值不能大于 5

min：10輸入值不能小于 10

jQuery Validate使用說明

通過一段時間的使用，感覺用起來還是非常簡單的。這里做一下使用方法的簡單介紹，而后會介紹一個我自己擴展的一種錯誤提示方式（感覺默認的信息提示的方式比較一般實在不怎么好看）。

閑話少說，先說下用法：

先導入必要的兩個js文件

XML/HTML代碼

另外還有一段css，用來突出顯示出錯的表單控件和錯誤信息的顯示樣式:

CSS代碼

input.error { border: 1px dotted red; }

label.error {

color: red;display: none;

}

label.error 的display: none是為了讓我們可以在頁面上任意位置放置顯示錯誤的label以及上面的內容，并在沒有進行校驗時不顯示出來。

需要的東西都齊了，我們可以為我們的表單元素添加校驗了。添加校驗的方法總的說有兩種：一種寫在控件的標簽上；另一種寫在js腳本中。并且兩種方法可混合使用。

第一種寫在標簽中的如下：

XML/HTML代碼

class="required number" 表示必須字段且為數值型，max="10" 表示最大值為10。

另一種使用JavaScript腳本的寫法如下:

XML/HTML代碼

其中test_form是表單form的id，t2是需要校驗的控件的名字。rules后面的json描述的是校驗規則，messages是自定義的錯誤信息。順便說一句，有時候我們form中控件的name中是帶“.”的，比如：user.name,這時候用js腳本定義校驗規則時，需要加上引號：”user.name”。

這兩種寫法各有利弊，直接寫在控件標簽上的比較簡單直觀，相對來說js的寫法過于復雜，可靈活性更強。而且有時候我們可能沒機會在控件的標簽上寫規則，假如我們用了標簽庫，如struts標簽庫，有些標簽我們寫上max=“10”這樣的東西，標簽庫將無法解析直接報錯。總之，這兩種寫法jQuery.validate都認識，我們在合適的場景選擇合適的方式就可以了。

另外，如果你想把規則寫在控件的標簽上，僅僅寫上規則是不行的，還需要在頁面加載完的時候調用一下$('#test_form').validate();為form添加校驗，這樣在你點提交按鈕的時候就會自動校驗了。

說了這么多，該上個圖了，看看校驗的效果：

成功了，校驗的效果有了，表單也不會被提交。可能有的同學要說了，“要不要這么難看啊？”。這正是我下面要解決的問題。

我們來自定義一個錯誤顯示的方式，效果如下：

錯誤控件突出顯示的方式沒有改，為了兼容有些瀏覽器有些控件比如火狐中單選按鈕沒法標注紅框的問題，在每個錯誤的控件后面放了一個紅色的小叉號，另外當鼠標移動到錯誤控件或者小叉號上時顯示錯誤的信息。

實現這個效果的主要js代碼如下：

JavaScript代碼

function showErrors(){

var t = this;

for ( var i = 0; this.errorList[i]; i++ ) {

var error = this.errorList[i];

this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );

var elename = this.idOrName(error.element);

// 錯誤信息div

var errdiv = $('div[htmlfor='+ elename + ']');

var errimg = $('img[htmlfor='+ elename + ']');

if(errdiv.length == 0){ // 沒有div則創建

// 純css不用圖片的圓角div，存在在IE6下顯示過長的問題

// errdiv = $('

'

// + ''

// + ' '

// + ' '

// + '

');

// 帶圖片的圓角div在所有瀏覽器兼容

errdiv = $('

'

+ ''

+ '

'

+ ''

+ '

');

errdiv.attr({"for": this.idOrName(error.element), generated: true})

.addClass(this.settings.errorClass);

// errdiv.css({left : $.getLeft(error.element) + 'px',top : $.getTop(error.element) + 'px'}); // 顯示在控件的下面

errdiv.appendTo($('body'));

}

if(errimg.length == 0){ // 沒有img則創建

errimg.attr({"for": this.idOrName(error.element), generated: true});

errimg.insertAfter(error.element);

}

errimg.show();

errdiv.find(".errmsg").html(error.message || "");

// 鼠標放到圖片顯示錯誤

$(errimg).hover(function(e){

$('div[htmlfor="'+ $(this).attr('htmlfor') + '"]').css({left : (e.pageX+20) + 'px',top : (e.pageY+20) + 'px'}); // 顯示在鼠標位置偏移20的位置

$('div[htmlfor="'+ $(this).attr('htmlfor') + '"]').fadeIn(200);

},

function(){

$('div[htmlfor="'+ $(this).attr('htmlfor') + '"]').fadeOut(200);

});

// 鼠標放到控件上顯示錯誤

$(error.element).hover(function(e){

$('div[htmlfor="'+ t.idOrName(this) + '"]').css({left : (e.pageX+20) + 'px',top : (e.pageY+20) + 'px'}); // 顯示在鼠標位置偏移20的位置

$('div[htmlfor="'+ t.idOrName(this) + '"]').fadeIn(200);

},

function(){

$('div[htmlfor="'+ t.idOrName(this) + '"]').fadeOut(200);

});

}

// 校驗成功的去掉錯誤提示

for ( var i = 0; this.successList[i]; i++ ) {

$('div[htmlfor="'+ this.idOrName(this.successList[i]) + '"]').remove();

$('img[htmlfor='+ this.idOrName(this.successList[i]) + ']').hide();

}

// 自定義高亮

if (this.settings.unhighlight) {

for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {

this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );

}

}

}

$.extend({

getLeft : function(object) {

var go = object;

var oParent, oLeft = go.offsetLeft;

while (go.offsetParent != null) {

oParent = go.offsetParent;

oLeft += oParent.offsetLeft;

go = oParent;

}

return oLeft;

},

getTop : function(object) {

var go = object;

var goHeight = go.height;

var oParent, oTop = go.offsetTop;

while (go.offsetParent != null) {

oParent = go.offsetParent;

oTop += oParent.offsetTop;

go = oParent;

}

return oTop + 22;// 之所以加22不加控件高度,為了兼容ie6.

}

});

// 本地語言

jQuery.extend(jQuery.validator.messages, {

required: "必選字段",

remote: "請修正該字段",

email: "請輸入正確格式的電子郵件",

url: "請輸入合法的網址",

date: "請輸入合法的日期",

dateISO: "請輸入合法的日期 (ISO).",

number: "請輸入合法的數字",

digits: "只能輸入整數",

creditcard: "請輸入合法的信用卡號",

equalTo: "請再次輸入相同的值",

accept: "請輸入擁有合法后綴名的字符串",

maxlength: jQuery.validator.format("請輸入一個長度最多是 {0} 的字符串"),

minlength: jQuery.validator.format("請輸入一個長度最少是 {0} 的字符串"),

rangelength: jQuery.validator.format("請輸入一個長度介于 {0} 和 {1} 之間的字符串"),

range: jQuery.validator.format("請輸入一個介于 {0} 和 {1} 之間的值"),

max: jQuery.validator.format("請輸入一個最大為 {0} 的值"),

min: jQuery.validator.format("請輸入一個最小為 {0} 的值")

});

自定義一個showErrors的方法，然后在為表單添加校驗時，指定使用這個方法顯示錯誤信息。

JavaScript代碼

$('#test_form').validate({

rules:{

t2 : {required:true,number:true}

},

messages:{t2:{required :"這個字段你必須填~~！",number:"這個字段真的可以是數字"}},

showErrors: showErrors //使用自定義的錯誤顯示方法

});

這樣子我們想要的效果就實現了，是不是感覺比原來的樣子好多了呢？