zoukankan      html  css  js  c++  java
  • 几段表单处理的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验证、避免重复提交等。所有代码均经过测试验证,记得要收藏啊。

  • 相关阅读:
    配置PyDev,开始eclipsePython之旅
    PyDev下PyQt 的尝试
    逻辑回归 C++
    HP Unix vsftp服务配置
    线性回归(最小二乘法、批量梯度下降法、随机梯度下降法、局部加权线性回归) C++
    批量梯度下降(Batch gradient descent) C++
    利用expect验证主机口令
    python Paramiko 模块远程管理主机
    文件系统巡检
    awk查找特定字段
  • 原文地址:https://www.cnblogs.com/acuier/p/6851778.html
Copyright © 2011-2022 走看看