JQuery 处理文本框整数按键验证

JS代码:

        //文本框整数按键事件
        function validNumKeyup(e) {//e默认是dom对象
            //if (e instanceof jQuery) { $this = e; }else{$this=$(e);}//判断是不是jQuery对象(不用判断,因为$(this)=$($(this))JQuery优化了
            var $this=$(e);
            var txtVal = $this.val(); //文本框原值
            var reNum = /\d+/g;
            if (reNum.test(txtVal)) {
                $this.val(txtVal.match(reNum)[0]);
            } else {
                $this.val("");
            }
        }

        //文本框整数离开事件
        function validNumBlur(e) {
            var $this = $(e);
            var txtVal = $this.val(); //文本框原值
            if (txtVal != "") {
                $this.val(parseFloat(txtVal));
            }
        }

        //文本框小数按键事件
        function validFloatKeyup(e) {
            var $this = $(e);
            var reNum = /(\d+\.?\d*)/g;//无小数或含个小数点
            var txtVal = $this.val(); //文本框原值
            if (reNum.test(txtVal)) {
                $this.val(txtVal.match(reNum)[0]);
            } else {
                $this.val("");
            }
        }

        //文本框小数离开事件
        function validFloatBlur(e) {
            var $this = $(e);
            var reNum = /(\d+(\.\d{1,2})?)/g;//默认两位小数,其他要求改这里
            var txtVal = $this.val(); //文本框原值
            if (reNum.test(txtVal)) {
                $this.val(txtVal.match(reNum)[0]);
            } else {
                $this.val("");
            }

            ////格式化,如2为2.00;   0为0.00
            //if ($this.val() != "") {
            //    $this.val(parseFloat($this.val()).toFixed(2));
            //}
        } 


如何使用

1.html标签注册事件

@Html.TextBox("QuestionQuantity", @entity.QuestionQuantity, new { @class = "form-control input-sm Amount", style = "text-align:right;", onblur = "validFloatBlur(this);", oninput = "validFloatKeyup(this);", onpropertychange = "validFloatKeyup(this);" })

2.JS注册事件

    $(function () {
            //ie9以下使用propertychange,以上使用input,所以要兼容使用以下写法
            $('.Amount').bind('input propertychange', function () {
                //文本框改变事件
                validFloatKeyup(this);
            })

            $('.Amount').bind('blur', function () {
                //文本框离开事件
                validFloatBlur(this);
            })
        })

以上两种注册方式都行,

1方法更适用于动态添加或克隆新的文本框,从而不用再动态用JQuery注册事件.

2方法更适用于文本框较多,校验较复杂的情况



阅读更多

没有更多推荐了,返回首页