上面的代碼中on的第一個參數(shù)有兩種事件，使用space隔開（這樣兩種事件都會綁定指定的事件處理函數(shù)），第二個參數(shù)指定了可以觸發(fā)這個自定義事件的一些元素（滿足選擇器[type=’text’]，validate的元素），第三個參數(shù)是指定使用trigger觸發(fā)這些事件時執(zhí)行的處理函數(shù)
在接下來執(zhí)行事件的觸發(fā)，從代碼中可以看到我選擇對兩個元素觸發(fā)了不同的事件。

插件表單submit監(jiān)聽
插件綁定了submit的監(jiān)聽事件（.validate為命名空間），當我們通過$(“form”).submit() 或直接點擊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() ) {   //校驗表單成功
                    if ( validator.pendingRequest ) {
                        validator.formSubmitted = true;
                        return false;
                    }
                    return handle();
                } else {
                    validator.focusInvalid();
                    return false;
                }

cancelSubmit

cancelSubmit 是validator對象的成員屬性，當滿足選擇器”：submit”（input，button 的type為submit或者button沒有指定類型多數(shù)瀏覽器會把button當做類型為 submit 的按鈕）的按鈕觸發(fā)點擊事件時，會查看這個按鈕上是否包含class為“cancel”或者有formnovalidate=“formnovalidate”屬性，如果按鈕存在其中一種，那么就不會進行表單校驗直接提交form表單（設置validator.cancelSubmit=true）。

validator.form()
使用validator.form()進行表單元素校驗，如果為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 = $( "" )
                                .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后會有一個返回結果（true | false | undefined）,如果自定義的submitHandler沒有return返回則結果是undefined,這樣導致handle（）結果為false，表單不會被提交

插件表單校驗的規(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;
},

關于“jQuery表單驗證的代碼怎么寫”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。