jQuery基礎之表單驗證

来源:https://www.cnblogs.com/xsd1/archive/2019/12/02/11970822.html

在使用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.!#$%&'*+\/=?^_`{|}~-][email protected][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*)[email protected])?(?:(?!(?: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;
},

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

907694362​jq.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();
}

 


您的分享是我們最大的動力!

更多相關文章
  • 在用Layui table 分頁顯示數據,用 type:"numbers" 進行顯示序號有以下的問題 1、表格自帶的分頁,page:true 這種分頁,在切換頁面的時候序號可以正常進行增加顯示,代碼如下: 顯示效果,第二頁的起始序號不是1 2、page組件進行分頁 這種分頁,在切換頁面的時候序號一種 ...
  • 在Canvas中進行碰撞檢測,大家往往直接採用游戲引擎(Cocos2d-JS、Egret)或物理引擎(Box2D)內置的碰撞檢測功能,好奇的你有思考過它們的內部運行機制嗎?下麵將針對基本的碰撞檢測技術進行講解: 1、基於矩形的碰撞檢測 所謂碰撞檢測就是判斷物體間是否發生重疊,這裡我們假設討論的碰撞體 ...
  • 為什麼要配置babel? 因為在webpack中,預設只能處理一部分es6的語法,一些更高級的es6和es7語法webpack不能處理,這時就需要第三方的loader即babel來幫助webpack來處理這些高級的語法 配置步驟 1、先通過兩套命令來安裝loader: npm i babel-cor ...
  • 推薦查看MDN 線上的幫助文檔 實例對象: 通過構造函數創建出來,實例化的對象 靜態對象: 不需要創建,直接就是一個對象,方法(靜態方法)直接通過這個對象名字調用 實例方法必須通過實例對象調用 靜態方法必須通過大寫的對象調用 Math.PI π Math.E 常數的底數 Math.abs(值) 絕對 ...
  • js學習中三種對象: 內置對象 js系統自帶的對象 自定義對象 自己定義的構造函數創建的對象 瀏覽器對象 BOM的時候講 內置對象: Math Date String Array Object //如何驗證變數是不是對象? console.log(Array instanceof Object); ...
  • 構建表格 表格的基本元素包括:table、tr和td。table表示HTML文檔中的表格,支持border屬性,用於定義表格邊框的寬度;tr表示表格中的行;td表示表格中的單元格,包括如下屬性:1)colspan:規定單元格可橫跨的列數;2)rowspan:規定單元格可橫跨的行數; <table> ...
  • 原始數據類型: number, string, boolean, undefined, null, object 基本類型(簡單類型), 即值類型: number, string, boolean 複雜類型(引用類型): object 空類型:undefined, null 存儲空間 值類型的值在哪 ...
  • 1. 對象: 有屬性和方法,特指的某個事物 對象: 一組無序屬性的集合的鍵值對,屬性的值可以是任意的類型 2.JSON格式的數據:一般都是成對的,是鍵值對, json也是一個對象, 數據都是成對的, 一般json格式的數據無論是鍵還是值都是用雙引號括起來的 var json = { "name": ...
一周排行
x