如何用JQuery实现仅允许两位整数位且支持小数的数字输入验证？

原代码核心问题 #

• 事件绑定目标不匹配：你的输入框id属性为name，但jQuery选择器写的是#number，导致输入事件根本没有触发
• 校验逻辑错误：直接按总长度截断输入内容，没有区分整数、小数部分，自然会拦截合法的小数输入

可行实现方案 #

实时输入拦截方案 #

输入过程中自动修正非法内容，保证整数部分最多2位，小数部分不限制：

<!DOCTYPE html>
<html>
<body>
<form id="submit_form" method="post">
<!-- 修正id为number，和选择器对应，改用text类型避免原生number输入框吞掉末尾小数点 -->
<input type='text' id="number" name='number' min="0" required><br>    
 <input type="submit" text="Submit" >
</form>
     

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>
<script>
    $(document).on('input', "#number", function () {
        let val = $(this).val();
        // 第一步：过滤非法字符，仅保留数字和小数点
        val = val.replace(/[^\d.]/g, '');
        // 第二步：处理多个小数点的情况，仅保留第一个小数点
        const dotIndex = val.indexOf('.');
        if (dotIndex !== -1) {
            // 拆分整数和小数部分
            let intPart = val.slice(0, dotIndex);
            const decimalPart = val.slice(dotIndex + 1);
            // 整数部分最多保留2位
            intPart = intPart.slice(0,2);
            // 重新拼接内容
            val = intPart + '.' + decimalPart;
        } else {
            // 无小数点的场景，最多保留2位整数
            val = val.slice(0,2);
        }
        // 把处理后的合法值写回输入框
        $(this).val(val);
    });
    
    // 提交阶段二次校验（可选，配合你引入的jquery validate使用）
    $.validator.addMethod("validNumber", function(value, element) {
        return this.optional(element) || /^\d{1,2}(\.\d*)?$/.test(value);
    }, "整数部分只能是0-99的1-2位数字，可带任意长度小数");
    
    $('#submit_form').validate({
        rules: {
            number: {
                required: true,
                validNumber: true
            }
        }
    });
</script>
</body>
</html>

规则说明 #

• 实时输入逻辑会自动过滤字母、特殊符号等非法内容，不会打断用户输入小数的流程
• 校验正则/^\d{1,2}(\.\d*)?$/完全匹配需求：开头为1-2位数字，后面可选跟随小数点和任意长度的小数
• 支持用户输入0.、12.这类输入过程中的临时值，不会强制清空小数点

内容的提问来源于stack exchange，提问作者JessciaLau