溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“jQuery表單驗(yàn)證的代碼怎么寫”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“jQuery表單驗(yàn)證的代碼怎么寫”文章能幫助大家解決問題。
在使用jquery-validate.js插件時可以做一些初始化配置
在初始化jquery-validate.js對象的時候，將外部的一些配置和該插件內(nèi)部的一些默認(rèn)配置合并在一起，如果有相同的配置，前者覆蓋后者（默認(rèn)）的配置
// Constructor for validator
$.validator = function( options, form ) {
this.settings = $.extend( true, {}, $.validator.defaults, options );
this.currentForm = form;
this.init();
};標(biāo)準(zhǔn)格式是 key為字符串，value為對象字面直接量
rules : {
username: {
required: true,
minlength: 2
}
}
也可以是
key為字符串，value也為特定的字符串（“required”）
ulus: {
username: "required"
}在插件中會將上面格式調(diào)整為：{required:true}的形式。從下面代碼可以看出對于usernname:”minlength”就不適用了，它會把它變成{minlength:true}這規(guī)則明顯不合適
// Converts a simple string to a {string: true} rule, e.g., "required" to {required:true}
normalizeRule: function( data ) {
if ( typeof data === "string" ) {
var transformed = {};
$.each( data.split( /\s/ ), function() {
transformed[ this ] = true;
} );
data = transformed;
}
return data;
}jquery-validate.js將這些規(guī)則解析后放到rules這個對象用以供校驗(yàn)時訪問
在指定的元素上添加事件監(jiān)聽
$( this.currentForm ) .on( "focusin.validate focusout.validate keyup.validate", ":text, [type='password'], [type='file'], select, textarea, [type='number'], [type='search'], " + "[type='tel'], [type='url'], [type='email'], [type='datetime'], [type='date'], [type='month'], " + "[type='week'], [type='time'], [type='datetime-local'], [type='range'], [type='color'], " + "[type='radio'], [type='checkbox'], [contenteditable], [type='button']", delegate ) // Support: Chrome, oldIE // "select" is provided as event.target when clicking a option .on( "click.validate", "select, option, [type='radio'], [type='checkbox']", delegate )
上面的監(jiān)聽事件看起來很奇怪，用空格分隔，外加命名空間，如果不了解on的這些使用方法可以參考Query.on() 函數(shù)詳解。之前focusin，focusout，keyup都是標(biāo)準(zhǔn)事件，之前一直以為focusin與focusout是自定義的事件，這里需要注意一下。
監(jiān)聽函數(shù)處理
function delegate( event ) {
// Set form expando on contenteditable
if ( !this.form && this.hasAttribute( "contenteditable" ) ) {
this.form = $( this ).closest( "form" )[ 0 ];
}
var validator = $.data( this.form, "validator" ),
eventType = "on" + event.type.replace( /^validate/, "" ),
settings = validator.settings;
if ( settings[ eventType ] && !$( this ).is( settings.ignore ) ) {
settings[ eventType ].call( validator, this, event );
}
}在插件中的settings放置了事件處理函數(shù)（settings[ eventType ].call( validator, this, event );，也就是在defaults中定義的onfocusin，onfocusout，onkeyup，onclick，highlight，unhighlight事件，因?yàn)樵赿efaults中所以可以在外部重寫這些事件，做一些定制樣式，這點(diǎn)會在最后重新封裝一個適合自己的表單校驗(yàn)插件）
現(xiàn)在仔細(xì)探究一下這些自定義事件在插件中是如何工作的
先看一下jQuery提供的一個trigger() 方法
trigger() 方法觸發(fā)被選元素的指定事件類型。
格式：$(selector).trigger(event,[param1,param2,…])
event 必需。規(guī)定指定元素要觸發(fā)的事件?？梢允棺远x事件（使用 bind() 函數(shù)來附加），或者任何標(biāo)準(zhǔn)事件。
[param1,param2,…] 可選。傳遞到事件處理程序的額外參數(shù)。額外的參數(shù)對自定義事件特別有用。
注意到了trigger可以觸發(fā)bind函數(shù)綁定的事件（bind現(xiàn)在用on取代），也就是說只要我在on中定義一些自定義的事件，都是可以通過trigger觸發(fā)
例子-trigger
<!DOCTYPE html> <html> <head> <title>JQuery-validation demo | Bootstrap</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script> </head> <body> <div class="listener"> <input type="text" /> <p class="validate"></p> </div> <script type="text/javascript"> $(".listener").on("customizeEvent otherEvent",".validate,[type='text']",function() { alert("complete some logical codes here"); }) $(".validate").trigger("customizeEvent"); $("[type='text']").trigger("customizeEvent"); $("[type='text']").trigger("otherEvent"); </script> </body> </html>
上面的代碼中on的第一個參數(shù)有兩種事件，使用space隔開（這樣兩種事件都會綁定指定的事件處理函數(shù)），第二個參數(shù)指定了可以觸發(fā)這個自定義事件的一些元素（滿足選擇器[type=’text’]，validate的元素），第三個參數(shù)是指定使用trigger觸發(fā)這些事件時執(zhí)行的處理函數(shù)
在接下來執(zhí)行事件的觸發(fā)，從代碼中可以看到我選擇對兩個元素觸發(fā)了不同的事件。
插件表單submit監(jiān)聽
插件綁定了submit的監(jiān)聽事件（.validate為命名空間），當(dāng)我們通過$(“form”).submit() 或直接點(diǎn)擊type=“submit”(input , button可以指定type=“submit”)觸發(fā)submit事件時，會執(zhí)行綁定好的處理函數(shù)
例子-綁定submit
this.on( "submit.validate", function( event )
// Prevent submit for invalid forms or custom submit handlers
if ( validator.cancelSubmit ) {
validator.cancelSubmit = false;
return handle();
}
if ( validator.form() ) { //校驗(yàn)表單成功
if ( validator.pendingRequest ) {
validator.formSubmitted = true;
return false;
}
return handle();
} else {
validator.focusInvalid();
return false;
}cancelSubmit
cancelSubmit 是validator對象的成員屬性，當(dāng)滿足選擇器”：submit”（input，button 的type為submit或者button沒有指定類型多數(shù)瀏覽器會把button當(dāng)做類型為 submit 的按鈕）的按鈕觸發(fā)點(diǎn)擊事件時，會查看這個按鈕上是否包含class為“cancel”或者有formnovalidate=“formnovalidate”屬性，如果按鈕存在其中一種，那么就不會進(jìn)行表單校驗(yàn)直接提交form表單（設(shè)置validator.cancelSubmit=true）。
validator.form()
使用validator.form()進(jìn)行表單元素校驗(yàn)，如果為true，判斷validator.pendingRequest是否為true，如果是則不提交form，如果false則執(zhí)行handle函數(shù)（handle執(zhí)行的是submitHandler（）的處理）
submitHandler
插件可以在外部配置submitHandler處理函數(shù)，它的意思就是在form表單提交時可以做一些額外的處理，并通過返回true，false來決定表單是否提交。
function handle() { //提交表單
var hidden, result;
if ( validator.settings.submitHandler ) {
if ( validator.submitButton ) {
// Insert a hidden input as a replacement for the missing submit button
hidden = $( "<input type='hidden'/>" )
.attr( "name", validator.submitButton.name )
.val( $( validator.submitButton ).val() )
.appendTo( validator.currentForm );
}
result = validator.settings.submitHandler.call( validator, validator.currentForm, event );
if ( validator.submitButton ) {
// And clean up afterwards; thanks to no-block-scope, hidden can be referenced
hidden.remove();
}
if ( result !== undefined ) {
return result;
}
return false;
}
return true;
}生成一個hidden的input隱藏域，在執(zhí)行完submitHandler以后移除，沒能明白這里的意圖。 執(zhí)行submitHandler后會有一個返回結(jié)果（true | false | undefined）,如果自定義的submitHandler沒有return返回則結(jié)果是undefined,這樣導(dǎo)致handle（）結(jié)果為false，表單不會被提交
插件表單校驗(yàn)的規(guī)則
email
/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
1
url
/^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i
1
時間
!/Invalid|NaN/.test( new Date( value ).toString()
1
電話號碼
/^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test( value );
1
數(shù)字
/^\d+$/.test( value )
1
minlength
minlength: function( value, element, param ) {
var length = $.isArray( value ) ? value.length : this.getLength( value, element );
return this.optional( element ) || length >= param;
},
關(guān)于“jQuery表單驗(yàn)證的代碼怎么寫”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼