input限制只能输入数字/银行卡号格式数字【layui】

最新推荐文章于 2024-08-19 17:20:18 发布

原创最新推荐文章于 2024-08-19 17:20:18 发布 · 2.4k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#数字校验

layui 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用layui框架限制输入框仅接受数字输入，包括普通数字限制及银行卡号格式的数字限制。通过jQuery监听input事件，实现对输入内容的实时格式化，确保输入符合预期格式。

本例适用一下场景(前端是layui框架,其他框架没测试):

文本款限制只能输入数字;
文本款限制输入数字为银行卡号格式 : 例如:4120 6666 8888 9999

限制输入数字:

<!-- 只能输入数字 -->
<input id="numberInput" name="shAdminName" class="layui-inpu" type="text">


/** 监控input改变: */
$("#numberInput").on("input",function(e){
    var oldVal = e.delegateTarget.value;
    var newVal = oldVal.replace(/\s/g,'').replace(/[^\d]/g,'');
    $("#numberInput").val(newVal);
});

限制输入银行卡号格式的数字:

<!-- 只能输入银行卡号格式的数字 -->
<input id="bankCardInput" name="shAdminName" maxlength='22' class="layui-inpu" type="text">


/** 监控input改变: */
$("#bankCardInput").on("input",function(e){
    var oldVal = e.delegateTarget.value; 
    var newVal = oldVal.replace(/\s/g,'').replace(/[^\d]/g,'').replace(/(\d{4})(?=\d)/g,'$1 ');
    $("#bankCardInput").val(newVal);
});