本文實(shí)例為大家分享了jquery.validate表單驗(yàn)證的使用方法，供大家參考，具體內(nèi)容如下

1 、表單驗(yàn)證的準(zhǔn)備工作

在開(kāi)啟長(zhǎng)篇大論之前，首先將表單驗(yàn)證的效果展示給大家。

1.點(diǎn)擊表單項(xiàng)，顯示幫助提示

2.鼠標(biāo)離開(kāi)表單項(xiàng)時(shí)，開(kāi)始校驗(yàn)元素

3.鼠標(biāo)離開(kāi)后的正確、錯(cuò)誤提示及鼠標(biāo)移入時(shí)的幫助提醒

對(duì)于初學(xué)者而言，html表單驗(yàn)證是一項(xiàng)極其瑣碎的事情。要做好表單驗(yàn)證，需要準(zhǔn)備以下基本要素：

1).html表單結(jié)構(gòu)：包含需要校驗(yàn)的表單元素；

2).js邏輯控制：在需要校驗(yàn)的表單元素上綁定事件，如點(diǎn)擊、獲取焦點(diǎn)、失去焦點(diǎn)等事件，并設(shè)置這些事件對(duì)應(yīng)的執(zhí)行函數(shù)；

3).css樣式設(shè)置：針對(duì)需要校驗(yàn)的表單元素，需要設(shè)置默認(rèn)的初始樣式，以及觸發(fā)元素綁定事件后的變化樣式。

這3類基本要素中，html表單結(jié)構(gòu)的創(chuàng)建相對(duì)簡(jiǎn)單。表單驗(yàn)證的重點(diǎn)和難點(diǎn)在于如何利用js及時(shí)有效地提醒用戶有關(guān)表單操作的信息。這里我參考了百度，163郵箱，京東等知名互聯(lián)網(wǎng)企業(yè)的注冊(cè)頁(yè)面，歸納出表單驗(yàn)證需要的主要提示信息分類如下：

1).表單元素獲取焦點(diǎn)后的幫助信息(插件中對(duì)應(yīng)class名"tip")；

2).表單元素驗(yàn)證通過(guò)時(shí)的成功信息(插件中對(duì)應(yīng)class名"valid")；

3).表單元素驗(yàn)證失敗時(shí)的錯(cuò)誤信息(插件中對(duì)應(yīng)class名"error")。

如果不借助任何插件，我們需要花費(fèi)大量的時(shí)間去編寫(xiě)不同類型的信息提示，考慮各種樣式間的來(lái)回切換，以及編寫(xiě)一些基本的驗(yàn)證規(guī)則。名言曰："我之所以看得更遠(yuǎn)，是因?yàn)槲艺驹诰奕说募绨蛏?#34;。何不直接利用一些已有的成熟插件，來(lái)幫助我們快速的編寫(xiě)一個(gè)表單驗(yàn)證功能，這樣既能提高效率，又能讓我們抽出時(shí)間專注于我們自己的邏輯。

在眾多表單驗(yàn)證插件中，jquery validate插件是歷史最悠久的jQuery插件之一，經(jīng)過(guò)了全球范圍內(nèi)不同項(xiàng)目的驗(yàn)證。它的特點(diǎn)如下：

1.內(nèi)置驗(yàn)證規(guī)則：擁有必填、數(shù)字、email、url和信用卡號(hào)碼等內(nèi)置驗(yàn)證規(guī)則；

2.自定義驗(yàn)證規(guī)則：可以很方便地自定義驗(yàn)證規(guī)則(通過(guò)$.validator.addMethod(name,method,message)實(shí)現(xiàn))；

3.簡(jiǎn)單強(qiáng)大的驗(yàn)證信息提示：默認(rèn)了驗(yàn)證信息提示，并提供自定義覆蓋默認(rèn)信息提示的功能(通過(guò)設(shè)置插件中的message參數(shù)來(lái)實(shí)現(xiàn))；

4.實(shí)時(shí)驗(yàn)證：可以通過(guò)keyup或blur事件觸發(fā)驗(yàn)證，而不僅僅在表單提交的時(shí)候驗(yàn)證。

下面我們選擇該插件，來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單而漂亮的表單驗(yàn)證例子。

2 jquery validate插件實(shí)現(xiàn)表單驗(yàn)證的小例子

在引入jquery validate插件前，需要先引入它所依賴的文件jquery.js(例子中jquery的版本為1.9)；在實(shí)現(xiàn)的過(guò)程中，為了更好地效果，我在jquery.validate.extend.js文件中對(duì)jquery validate原有的功能進(jìn)行了擴(kuò)展，并修改了相關(guān)默認(rèn)選項(xiàng)；因此在文檔頭部需要引入的文件有三個(gè)：

2.1 表單html

表單驗(yàn)證3要素中，首先需要完成html表單結(jié)構(gòu)代碼的編寫(xiě)。為了讓表單結(jié)構(gòu)簡(jiǎn)單而清晰，我們將表單的每個(gè)元素都包裹在一個(gè)div結(jié)構(gòu)中：用label標(biāo)簽用來(lái)標(biāo)記元素的名稱，接著便是表單元素本身。

【注明：1.使用label標(biāo)簽的好處是為鼠標(biāo)用戶改進(jìn)了可用性。當(dāng)在label元素內(nèi)點(diǎn)擊文本時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和label相關(guān)的表單控件上。2.每個(gè)需要校驗(yàn)的表單元素都應(yīng)該設(shè)置id和name屬性，方便在使用插件時(shí)將元素綁定校驗(yàn)規(guī)則和校驗(yàn)信息。】

表單實(shí)現(xiàn)代碼如下：

jquery-validate表單校驗(yàn)驗(yàn)證

用戶名:

autocomplete="off" tip="請(qǐng)輸入用戶名">

密碼:

tip="長(zhǎng)度為6-16個(gè)字符">

確認(rèn)密碼:

金額:

tip="交易金額必須大于0，且最多有兩位小數(shù)">

2.2 表單驗(yàn)證js邏輯

接著我們通過(guò)js來(lái)實(shí)現(xiàn)對(duì)表單元素的校驗(yàn)。在校驗(yàn)之前，我對(duì)jquery validate插件進(jìn)行了功能擴(kuò)展，對(duì)默認(rèn)的選項(xiàng)進(jìn)行了重寫(xiě)覆蓋。jquery validate插件默認(rèn)只提供了校驗(yàn)正確及錯(cuò)誤時(shí)的提示，缺少我們常見(jiàn)的幫助信息提示。為了解決這個(gè)問(wèn)題，我仔細(xì)研究了插件的源碼，發(fā)現(xiàn)插件本身提供了onfocusin(校驗(yàn)元素獲得焦點(diǎn)時(shí)調(diào)用)和onfocusout(校驗(yàn)元素失去焦點(diǎn)時(shí)調(diào)用)這兩個(gè)函數(shù)。通過(guò)修改默認(rèn)參數(shù)的這兩個(gè)接口，可以實(shí)現(xiàn)黨用戶鼠標(biāo)點(diǎn)擊或選擇元素時(shí)(即元素獲得焦點(diǎn))，提示幫助信息；在用戶鼠標(biāo)離開(kāi)元素時(shí)(即元素失去焦點(diǎn))，移除幫助信息。

此外，jquery validate默認(rèn)提供表單元素輸入時(shí)的實(shí)時(shí)校驗(yàn)，因?yàn)槲覀円笤谳斎霑r(shí)只提示用戶幫助信息，故需要關(guān)閉輸入的實(shí)時(shí)校驗(yàn)，為此我們將默認(rèn)參數(shù)中的onkeyup設(shè)置為null。

具體的擴(kuò)展改進(jìn)代碼我放到了新增js腳本jquery.validate.extend.js中，代碼如下：

/*******************************插件新功能-設(shè)置插件validator的默認(rèn)參數(shù)*****************************************/

$.validator.setDefaults({

/*關(guān)閉鍵盤(pán)輸入時(shí)的實(shí)時(shí)校驗(yàn)*/

onkeyup: null,

/*添加校驗(yàn)成功后的執(zhí)行函數(shù)--修改提示內(nèi)容，并為正確提示信息添加新的樣式(默認(rèn)是valid)*/

success: function(label){

/*label的默認(rèn)正確樣式為valid，需要通過(guò)validClass來(lái)重置，否則這里添加的其他樣式不能被清除*/

label.text('').addClass('valid');

},

/*重寫(xiě)校驗(yàn)元素獲得焦點(diǎn)后的執(zhí)行函數(shù)--增加[1.光標(biāo)移入元素時(shí)的幫助提示,2.校驗(yàn)元素的高亮顯示]兩個(gè)功能點(diǎn)*/

onfocusin: function( element ) {

this.lastActive = element;

/*1.幫助提示功能*/

this.addWrapper(this.errorsFor(element)).hide();

var tip = $(element).attr('tip');

if(tip && $(element).parent().children(".tip").length === 0){

$(element).parent().append("" + tip + "");

}

/*2.校驗(yàn)元素的高亮顯示*/

$(element).addClass('highlight');

// Hide error label and remove error class on focus if enabled

if ( this.settings.focusCleanup ) {

if ( this.settings.unhighlight ) {

this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );

}

this.hideThese( this.errorsFor( element ) );

}

},

/*重寫(xiě)校驗(yàn)元素焦點(diǎn)離開(kāi)時(shí)的執(zhí)行函數(shù)--移除[1.添加的幫助提示,2.校驗(yàn)元素的高亮顯示]*/

onfocusout: function( element ) {

/*1.幫助提示信息移除*/

$(element).parent().children(".tip").remove();

/*2.校驗(yàn)元素高亮樣式移除*/

$(element).removeClass('highlight');

/*3.替換下面注釋的原始代碼，任何時(shí)候光標(biāo)離開(kāi)元素都觸發(fā)校驗(yàn)功能*/

this.element( element );

/*if ( !this.checkable( element ) && ( element.name in this.submitted || !this.optional( element ) ) ) {

this.element( element );

}*/

}

});

完善插件的功能后，現(xiàn)在就是重頭戲——使用插件為表單元素綁定校驗(yàn)規(guī)則和校驗(yàn)信息。jquery validate插件提供validate方法實(shí)現(xiàn)form表單的元素校驗(yàn)，該方法的參數(shù)是一個(gè)包含鍵值對(duì)的對(duì)象。其中最常用的鍵有rules(為不同元素定義校驗(yàn)規(guī)則)，messages(為不同元素定義錯(cuò)誤提示信息)，success(校驗(yàn)正確后的字符串或者是執(zhí)行函數(shù))。常見(jiàn)的校驗(yàn)規(guī)則有：required(是否必填)，minlength(最小長(zhǎng)度)，maxlength(最大長(zhǎng)度)，email(email格式規(guī)則)，url(url格式規(guī)則)，date(date格式規(guī)則)，rangelength(給定長(zhǎng)度范圍規(guī)則)，equalTo(要求元素等于另一元素例如equalsTo:"#password")。下面的代碼呈現(xiàn)了如何對(duì)表單中的用戶名、密碼等字段綁定校驗(yàn)規(guī)則：

$(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: "用戶名的最小長(zhǎng)度為2"

},

password:{

required: "密碼不能為空",

minlength: "密碼長(zhǎng)度不能少于6個(gè)字符",

maxlength: "密碼長(zhǎng)度不能超過(guò)16個(gè)字符"

},

repassword:{

required: "確認(rèn)密碼不能為空",

equalTo: "確認(rèn)密碼和密碼不一致"

},

amt: {

required: "金額不能為空"

}

}

});

});

2.3 表單驗(yàn)證css樣式

最后還要為頁(yè)面元素添加css樣式。插件中有一系列默認(rèn)選項(xiàng)：其中默認(rèn)錯(cuò)誤顯示標(biāo)簽為label，錯(cuò)誤樣式為label.error。上面在jquery.validate.extend.js文件中，有一個(gè)success函數(shù)需要說(shuō)明一下。這個(gè)函數(shù)是在校驗(yàn)成功的時(shí)候執(zhí)行的，我們?cè)诤瘮?shù)中為label提示標(biāo)簽添加了校驗(yàn)正確對(duì)應(yīng)的樣式label.valid。因此在css中如果要美化信息提示，需要對(duì)label相關(guān)樣式如error,valid樣式進(jìn)行設(shè)計(jì)。此外我們?cè)跀U(kuò)展插件功能中添加了一個(gè)class為tip的label標(biāo)簽，該標(biāo)簽僅在校驗(yàn)元素獲得焦點(diǎn)時(shí)生成。為此，還需要設(shè)置label的tip樣式。

完整的樣式文件內(nèi)容具體如下：

body{

font-family: Microsoft Yahei;

font-size: 15px;

}

fieldset{ width: 680px; }

legend{ margin-left: 8px; }

.item{

height: 56px;

line-height: 36px;

margin: 10px;

}

.item .item-label{

float: left;

width: 80px;

text-align: right;

}

.item-text{

float: left;

width: 244px;

height: 16px;

padding: 9px 25px 9px 5px;

margin-left: 10px;

border: 1px solid #ccc;

overflow: hidden;

}

.item-select{

float: left;

height: 34px;

border: 1px solid #ccc;

margin-left: 10px;

font-size: 14px;

padding: 6px 0px;

}

.item-submit{

margin-left: 88px;

}

input.error{

border: 1px solid #E6594E;

}

input.highlight{

border: 1px solid #7abd54;

}

label.error,label.tip{

float: left;

height: 32px;

line-height: 32px;

font-size: 14px;

text-align: left;

margin-left: 5px;

padding-left: 20px;

color: red;

background: url('error.png') no-repeat left center;

}

label.tip{

color: #aaa;

background: url('tip.png') no-repeat left center;

}

label.valid{

background: url('valid.png') no-repeat left center;

width: 32px;

}

3 表單驗(yàn)證效果演示

至此，表單校驗(yàn)的代碼編寫(xiě)和插件的應(yīng)用已經(jīng)全部完成。在瀏覽器中運(yùn)行代碼，顯示效果如下圖：

基本上滿足現(xiàn)在大多數(shù)網(wǎng)站表單驗(yàn)證的要求，如果需要增加驗(yàn)證規(guī)則，只需要在jquery.validate.extend.js中增加校驗(yàn)規(guī)則即可，例子如下：

/*******************************插件字段校驗(yàn)*****************************************/

$.validator.addMethod(

"amtCheck",

function(value, element){

/*var dotPos = value.indexOf('.');

return value > 0 && dotPos < 0 && (dotPos > 0 && value.substring(dotPos + 1) <= 2);*/

return value && /^\d*\.?\d{0,2}$/.test(value);

},

"金額必須大于0且小數(shù)位數(shù)不超過(guò)2位"

);

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的html中表单的校验的插件,功能强大的jquery.validate表单验证插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。