jQuery基礎之表單驗證_ZenDei技術網路在線

在使用jquery-validate.js插件時可以做一些初始化配置在初始化jquery-validate.js對象的時候，將外部的一些配置和該插件內部的一些預設配置合併在一起，如果有相同的配置，前者覆蓋後者（預設）的配置 // Constructor for validator $.validat ...

在使用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();
};

rules的格式

標準格式是 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;
},

相信很多人在剛接觸前端或者中期時候總會遇到一些問題及瓶頸期，如學了一段時間沒有方向感或者堅持不下去一個人學習枯燥乏味有問題也不知道怎麼解決，對此我整理了一些資料喜歡我的文章想與更多資深大牛一起討論和學習的話歡迎加入我的學習交流群

907694362jq.qq.com

maxlength

maxlength: function( value, element, param ) {
var length = $.isArray( value ) ? value.length : this.getLength( value, element );
return this.optional( element ) || length <= param;
}

rangelength

rangelength: function( value, element, param ) {
var length = $.isArray( value ) ? value.length : this.getLength( value, element );
return this.optional( element ) || ( length >= param[ 0 ] && length <= param[ 1 ] );
}
equalTo

equalTo: function( value, element, param ) {

// Bind to the blur event of the target in order to revalidate whenever the target field is updated
var target = $( param );
if ( this.settings.onfocusout && target.not( ".validate-equalTo-blur" ).length ) {
target.addClass( "validate-equalTo-blur" ).on( "blur.validate-equalTo", function() {
$( element ).valid();
} );
}
return value === target.val();
}