JQuery 正则限制文本框(input)只能输入数字/限制输入金额为两位小数

最新推荐文章于 2023-11-23 10:25:15 发布

一勺菠萝丶

最新推荐文章于 2023-11-23 10:25:15 发布

阅读量1w

点赞数 3

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_39973810/article/details/79741297

版权

前端专栏收录该内容

15 篇文章

订阅专栏

本文介绍两种使用JavaScript限制HTML输入框中数字输入的方法：一种是仅允许输入整数，另一种是限制输入最多两位小数的金额。第一种方法利用jQuery简化实现过程，第二种则通过正则表达式实现实时和失焦时的格式调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
        /*JQuery 限制文本框只能输入数字*/
        $(".priority,.start-fee,.activity_ratio,.activity_card_money").keyup(function () {
            $(this).val($(this).val().replace(/[^0-9]/g, ''));
        }).bind("paste", function () {  //CTR+V事件处理
            $(this).val($(this).val().replace(/[^0-9]/g, ''));
        }).css("ime-mode", "disabled"); //CSS设置输入法不可用
</script>

.priority .start_fee…… 为input的class值例如

<div class="layui-form-item">
            <label class="layui-form-label">起始金额</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input start-fee" name="activity_apply_money" placeholder="请输入活动起始金额"
                       required>
            </div>
            <div class="layui-form-mid">元</div>
        </div>

方法二(场景：输入金额的时候限制最大为两位小数)

js代码

  /**
     * 实时动态强制更改用户录入
     * arg1 inputObject
     **/
    function amount(th) {
        var regStrs = [
            ['^0(\\d+)$', '$1'], //禁止录入整数部分两位以上，但首位为0
            ['[^\\d\\.]+$', ''], //禁止录入任何非数字和点
            ['\\.(\\d?)\\.+', '.$1'], //禁止录入两个以上的点
            ['^(\\d+\\.\\d{2}).+', '$1'] //禁止录入小数点后两位以上
        ];
        for (var i = 0; i < regStrs.length; i++) {
            var reg = new RegExp(regStrs[i][0]);
            th.value = th.value.replace(reg, regStrs[i][1]);
        }
    }

    /**
     * 录入完成后，输入模式失去焦点后对录入进行判断并强制更改，并对小数点进行0补全
     * arg1 inputObject
     **/
    function overFormat(th) {
        var v = th.value;
        if (v === '') {
            v = '0.00';
        } else if (v === '0') {
            v = '0.00';
        } else if (v === '0.') {
            v = '0.00';
        } else if (/^0+\d+\.?\d*.*$/.test(v)) {
            v = v.replace(/^0+(\d+\.?\d*).*$/, '$1');
            v = inp.getRightPriceFormat(v).val;
        } else if (/^0\.\d$/.test(v)) {
            v = v + '0';
        } else if (!/^\d+\.\d{2}$/.test(v)) {
            if (/^\d+\.\d{2}.+/.test(v)) {
                v = v.replace(/^(\d+\.\d{2}).*$/, '$1');
            } else if (/^\d+$/.test(v)) {
                v = v + '.00';
            } else if (/^\d+\.$/.test(v)) {
                v = v + '00';
            } else if (/^\d+\.\d$/.test(v)) {
                v = v + '0';
            } else if (/^[^\d]+\d+\.?\d*$/.test(v)) {
                v = v.replace(/^[^\d]+(\d+\.?\d*)$/, '$1');
            } else if (/\d+/.test(v)) {
                v = v.replace(/^[^\d]*(\d+\.?\d*).*$/, '$1');
                ty = false;
            } else if (/^0+\d+\.?\d*$/.test(v)) {
                v = v.replace(/^0+(\d+\.?\d*)$/, '$1');
                ty = false;
            } else {
                v = '0.00';
            }
        }
        th.value = v;
    }

使用方法是在要输入的input框中加入

onKeyUp="amount(this)"  onBlur="overFormat(this)" name="activity_card_money"

例如

 <div class="layui-form-item">
            <label class="layui-form-label">卡券价值</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input activity_card_money" onKeyUp="amount(this)"  onBlur="overFormat(this)" name="activity_card_money"
                       value="{$activity.activity_card_money/100}" placeholder="单张卡券价值" required>
            </div>
            <div class="layui-form-mid">元</div>
        </div>