【收藏】8段JQuery處理表單的代碼片段，很實用

zxhaaa 發布于2019-08-20 16:43 / 1281人閱讀

1 只接受數字輸入

$("#uAge").keydown(function(event) {
    // 允許退格和刪除鍵
    if ( event.keyCode == 46 || event.keyCode == 8 ) {
    }
    else {
        // 保證輸入的是數字鍵
        if (event.keyCode < 48 || event.keyCode > 57 ) {
            event.preventDefault();
        }
    }
});

2 全選

$("#checkall").click(function() {
   //固有屬性使用prop，切記 
   $("#myForm input:checkbox").prop("checked",true);
});

3 反選

$("#inverse").click(function() {
    $("#myForm input:checkbox").each(function () {
        $(this).prop("checked",!$(this).prop("checked"))
    })
});

4 單選框標簽表示

//css，隱藏radio圓形，用label表示
//實際使用中，樣式寫的好看一些
.sex input {  display: none; }
.selected {  background: red;  }
//javascript
$("input:radio").click(function () {
    $("input:radio").parent("label").removeClass("selected");
    $(this).parent("label").addClass("selected");
})

5 還可輸入多少字符提示

//第一個參數：總字符數
//第二個參數：還可輸入多少顯示區對象
$.fn.limiter = function (limit, elem) {
    $(this).on("keyup focus", function () {
        setCount(this, elem);
    });
    function setCount(src, elem) {
        var chars = src.value.length;
        if (chars > limit) {
            src.value = src.value.substr(0, limit);
            chars = limit;
        }
        elem.html(limit - chars);
    }
    setCount($(this)[0], elem);
}
$("#title").limiter(3,$("#limit"));

6 輸入域顯示缺省值

$(".default").each(function() {
    var $this = $(this);
    var defaultVal = $this.attr("title");
    if($this.val().length ==0) {
        $this.val(defaultVal);
    }
    $this.focus(function() {
        if ($this.val() === defaultVal) {
            $this.val("");
        }
    });
    $this.blur(function() {
        if ($this.val().length === 0) {
            $this.val(defaultVal);
        }
    });
});

7 Email驗證

$.fn.validateEmail = function () {
    var $this = $(this);
    $this.change(function () {
        var reg = /^([A-Za-z0-9_-.])+@([A-Za-z0-9_-.])+.([A-Za-z]{2,4})$/;
        if ($this.val() == "") {
            $this.removeClass("badEmail").removeClass("goodEmail")
        } else if (reg.test($this.val()) == false) {
            $this.removeClass("goodEmail");
            $this.addClass("badEmail");
        } else {
            $this.removeClass("badEmail");
            $this.addClass("goodEmail");
        }
    });
};

8 避免重復提交

$("form").submit(function() {
    if(typeof jQuery.data(this, "disabledOnSubmit") == "undefined") {
        jQuery.data(this, "disabledOnSubmit", { submited: true });
        $("input[type=submit], input[type=button]", this).each(function() {
            $(this).attr("disabled", "disabled");
        });
        return true;
    }
    else
    {
        return false;
    }
});

簡單列舉了幾段JQuery表單處理的代碼片段，包括只能輸入數字的文本域、checkbox全選、checkbox反選、輸入字符數量提示、Email驗證、避免重復提交等。所有代碼均經過測試驗證，記得要收藏啊。

云服務器 GPU云服務器超實用的代碼段 php實用的一些代碼代碼片段添加代碼片段

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83115.html

【實用】需要收藏備用的JQuery代碼片段

摘要：元素屏幕居中獲取頁面路徑相關參數值值值值刪除內聯樣式長度限制并截取外鏈新窗口打開測試與其它庫沖突情況測試沖突代碼避免沖突加載即使掉線加載遮罩層，點擊移除元素固頂注意調整邊界值禁止右鍵菜單對象插件模版代碼公有方法私有方法延伸閱讀處理表單的 1 元素屏幕居中 jQuery.fn.center = function () { this.css(position,absolute); ...

2json 2019-08-20 16:55 評論0 收藏0
精彩文章大合集- 收藏集 - 掘金

摘要：發布應用市場的平臺搶紅包工具紅包精靈開源啦掘金紅包精靈，如果喜歡，點個開源不易。作者將原素材文章進行了新內容的添加和重新排列，但是因為文章高效的代碼編寫技巧總結前端掘金本文總結了代碼編寫技巧，來提升你的和代碼。收藏安卓開發中非常實用優秀的庫! 有圖有真相! - Android - 掘金本來是打算收藏工具類的,但轉念一想,已經有這么多優秀的庫了,就沒必要再去重復造輪子了,便歸納工作中比...

ermaoL 2019-08-29 13:03 評論0 收藏0
javascript功能插件大集合，寫前端的親們記得收藏

摘要：一個專注于瀏覽器端和兼容的包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。完全插件化的工具，能在中識別和記錄模式。健壯的優雅且功能豐富的模板引擎。完整的經過充分測試和記錄數據結構的庫。【導讀】：GitHub 上有一個 Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發起維護的 JS 資源列表...

cfanr 2019-08-20 10:34 評論0 收藏0
【JS實用技巧】優化動態創建元素的方式，讓代碼更加優雅且利于維護

摘要：更好的方案模板分離原則模板分離原則將定義模板的那一部分，與的代碼邏輯分離開來，讓代碼更加優雅且利于維護。 showImg(https://segmentfault.com/img/bVJ73t?w=800&h=316); 引言在前端開發中，經常需要動態添加一些元素到頁面上。那么如何通過一些技巧，優化動態創建頁面元素的方式，使得代碼更加優雅，并且更易于維護呢？接下來我們通過研究一些實例...

JeOam 2019-08-20 14:46 評論0 收藏0
【JS實用技巧】優化動態創建元素的方式，讓代碼更加優雅且利于維護

摘要：更好的方案模板分離原則模板分離原則將定義模板的那一部分，與的代碼邏輯分離開來，讓代碼更加優雅且利于維護。 showImg(https://segmentfault.com/img/bVJ73t?w=800&h=316); 引言在前端開發中，經常需要動態添加一些元素到頁面上。那么如何通過一些技巧，優化動態創建頁面元素的方式，使得代碼更加優雅，并且更易于維護呢？接下來我們通過研究一些實例...

hqman 2019-08-01 16:26 評論0 收藏0