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

原创 2018年04月17日 14:43:52

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方法更适用于文本框较多,校验较复杂的情况



用JQuery代码实现文本框强制验证功能

利用JQuery的全局状态参数实现字段强制验证的功能。
  • frgod
  • frgod
  • 2016-11-02 17:27:07
  • 2210

jquery 文本框校验 小例

在工作中 的校验的问题,总是达不到理想的效果,找到 jquery 方面的例子 例如 身份证校验 var regIdcard = /(^\d{15}$)|(^\d{18})|(^\d{17}...
  • w1158384189
  • w1158384189
  • 2015-12-14 15:06:08
  • 473

jquery验证文本框,以及特殊字符过滤

//用户名写入"请输入管理员用户名!"js     $("#txtName").val("请输入管理员用户名!");     //用户名写入"请输入管理员用户名!"js     //用户名输入j...
  • u013010416
  • u013010416
  • 2014-01-04 10:44:07
  • 2492

JQuery与Ajax的结合进行文本框内容验证

1.项目结构 2.ajax.html ajax.html --> 请输入用户...
  • lezizai_happy
  • lezizai_happy
  • 2015-08-30 16:21:56
  • 492

wpf 文本框只能输入小数,整数,可允许负号

  • 2015年04月28日 18:16
  • 4KB
  • 下载

js判断输入是否为数字、正整数、浮点数等的函数

js判断输入是否为数字、正整数、浮点数等的函数首先是判断是不是数字isNaN()var s = $(this).val(); if(isNaN(s)) {alert("不是数字");$(this...
  • gaogao0603
  • gaogao0603
  • 2011-01-26 17:40:00
  • 24341

jquery限定文本框只能输入数字(整数和小数)

$(function(){      //文本框只能输入数字,并屏蔽输入法和粘贴    $.fn.numeral = function() {          $(this).css("ime-m...
  • u012289774
  • u012289774
  • 2013-11-24 21:59:58
  • 654

jQuery验证文本框内容不为空

通过$.fn 扩展jQuery方法 /** * 校验文本是否为空 * tips:提示信息 * 使用方法:$("#id").validate("提示文本"); * @itmyhome *...
  • itmyhome
  • itmyhome
  • 2017-01-12 20:54:43
  • 6016

jquery实现文本框闪烁提示用户验证信息

function normal(id,times) { var obj=$("#"+id); obj.css("background-color","#FFF"...
  • z69183787
  • z69183787
  • 2012-10-24 16:35:00
  • 4238

jquery 监控文本框键盘事件(回车事件)

jquery 监控文本框键盘事件(回车事件)
  • paincupid
  • paincupid
  • 2016-03-29 10:28:54
  • 8071
收藏助手
不良信息举报
您举报文章:JQuery 处理文本框整数按键验证
举报原因:
原因补充:

(最多只允许输入30个字)