限制layui输入框只能输入整数或小数

在输入一些类似于商品件数、商品价格或其他只能为整数或者小数的信息时,虽然在后端接口上也会进行限制,但是在前端上也要进行输入限制和提示。

如果要限制下图发票金额和发票税率,我们首先要知道JS中的onkeyup方法,它的作用是在用户按下并松开键盘时执行的操作。

我们首先编写一个通用方法,限制只能输入哪些内容,这里的筛选条件是通过正则表达式控制的:

        function RegularNum(obj) {
            obj.value = obj.value.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
            obj.value = obj.value.replace(/^\./g, ""); //验证第一个字符是数字
            obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个, 清除多余的
            obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
            obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d\d).*$/, '$1$2.$3'); //只能输入三个小数
        }

调用方法如下,在输入框input标签中添加:onkeyup="RegularNum(this)",在每一次用户按下且松开键盘时获取输入内容,并通过上述方法进行处理。

         发票金额:
         <div class="layui-inline">
              <input type="number" onkeyup="RegularNum(this)" name="invoiceMoney" required lay-verify="required" placeholder="输入发票金额" autocomplete="off" class="layui-input">
         </div>
         发票税率:
         <div class="layui-inline">
              <input type="number" onkeyup="RegularNum(this)" name="taxRate" required lay-verify="required" placeholder="输入发票代码" autocomplete="off" class="layui-input">
         </div>

还有一种方法,比较简便,可以直接写在标签里,看你具体的需求选择相应的方法就行。

<input type="number" onkeyup="this.value=this.value.replace(/\D/gi,"")" name="invoiceMoney" required lay-verify="required" placeholder="输入发票金额" autocomplete="off" class="layui-input">
THE END