• 几段表单处理的JQuery代码(转)


    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验证、避免重复提交等。所有代码均经过测试验证,记得要收藏啊。

  • 相关阅读:
    iOS 调试心得
    一步一步带你安装史上最难安装的 vim 插件
    20 行代码极速为 App 加上聊天功能
    在通知栏上玩游戏,Steve iOS 游戏实现思路
    ThinkPHP 3.2.x 集成极光推送指北
    MkDocs 文档生成逻辑浅析
    极光推送的角标问题
    聊天界面-自适应文字
    Python3.7源码包编译安装
    Navicat远程连接MySQL数据库
  • 原文地址:https://www.cnblogs.com/acuier/p/6851778.html
Copyright © 2020-2023  润新知