溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“jQuery表單驗證的代碼怎么寫”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“jQuery表單驗證的代碼怎么寫”文章能幫助大家解決問題。
在使用jquery-validate.js插件時可以做一些初始化配置
在初始化jquery-validate.js對象的時候，將外部的一些配置和該插件內部的一些默認配置合并在一起，如果有相同的配置，前者覆蓋后者（默認）的配置
// Constructor for validator
$.validator = function( options, form ) {
this.settings = $.extend( true, {}, $.validator.defaults, options );
this.currentForm = form;
this.init();
};標準格式是 key為字符串，value為對象字面直接量
rules : {
username: {
required: true,
minlength: 2
}
}
也可以是
key為字符串，value也為特定的字符串（“required”）
ulus: {
username: "required"
}在插件中會將上面格式調整為：{required:true}的形式。從下面代碼可以看出對于usernname:”minlength”就不適用了，它會把它變成{minlength:true}這規則明顯不合適
// 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將這些規則解析后放到rules這個對象用以供校驗時訪問
在指定的元素上添加事件監聽
$( 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 )
上面的監聽事件看起來很奇怪，用空格分隔，外加命名空間，如果不了解on的這些使用方法可以參考Query.on() 函數詳解。之前focusin，focusout，keyup都是標準事件，之前一直以為focusin與focusout是自定義的事件，這里需要注意一下。
監聽函數處理
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放置了事件處理函數（settings[ eventType ].call( validator, this, event );，也就是在defaults中定義的onfocusin，onfocusout，onkeyup，onclick，highlight，unhighlight事件，因為在defaults中所以可以在外部重寫這些事件，做一些定制樣式，這點會在最后重新封裝一個適合自己的表單校驗插件）
現在仔細探究一下這些自定義事件在插件中是如何工作的
先看一下jQuery提供的一個trigger() 方法
trigger() 方法觸發被選元素的指定事件類型。
格式：$(selector).trigger(event,[param1,param2,…])
event 必需。規定指定元素要觸發的事件。可以使自定義事件（使用 bind() 函數來附加），或者任何標準事件。
[param1,param2,…] 可選。傳遞到事件處理程序的額外參數。額外的參數對自定義事件特別有用。
注意到了trigger可以觸發bind函數綁定的事件（bind現在用on取代），也就是說只要我在on中定義一些自定義的事件，都是可以通過trigger觸發
例子-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的第一個參數有兩種事件，使用space隔開（這樣兩種事件都會綁定指定的事件處理函數），第二個參數指定了可以觸發這個自定義事件的一些元素（滿足選擇器[type=’text’]，validate的元素），第三個參數是指定使用trigger觸發這些事件時執行的處理函數
在接下來執行事件的觸發，從代碼中可以看到我選擇對兩個元素觸發了不同的事件。
插件表單submit監聽
插件綁定了submit的監聽事件（.validate為命名空間），當我們通過$(“form”).submit() 或直接點擊type=“submit”(input , button可以指定type=“submit”)觸發submit事件時，會執行綁定好的處理函數
例子-綁定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() ) { //校驗表單成功
if ( validator.pendingRequest ) {
validator.formSubmitted = true;
return false;
}
return handle();
} else {
validator.focusInvalid();
return false;
}cancelSubmit
cancelSubmit 是validator對象的成員屬性，當滿足選擇器”：submit”（input，button 的type為submit或者button沒有指定類型多數瀏覽器會把button當做類型為 submit 的按鈕）的按鈕觸發點擊事件時，會查看這個按鈕上是否包含class為“cancel”或者有formnovalidate=“formnovalidate”屬性，如果按鈕存在其中一種，那么就不會進行表單校驗直接提交form表單（設置validator.cancelSubmit=true）。
validator.form()
使用validator.form()進行表單元素校驗，如果為true，判斷validator.pendingRequest是否為true，如果是則不提交form，如果false則執行handle函數（handle執行的是submitHandler（）的處理）
submitHandler
插件可以在外部配置submitHandler處理函數，它的意思就是在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隱藏域，在執行完submitHandler以后移除，沒能明白這里的意圖。 執行submitHandler后會有一個返回結果（true | false | undefined）,如果自定義的submitHandler沒有return返回則結果是undefined,這樣導致handle（）結果為false，表單不會被提交
插件表單校驗的規則
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
數字
/^\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;
},
關于“jQuery表單驗證的代碼怎么寫”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
