如何在 JavaScript 中实现小数点前后最多两位数字的输入限制-html教程-PHP中文网

如何在 JavaScript 中实现小数点前后最多两位数字的输入限制

本文介绍如何使用正则表达式和事件监听实现 HTML 输入框的严格数字格式校验：仅允许最多两位整数位、最多两位小数位，且小数点最多出现一次，确保输入如 12.78 合法，而 122.45 或 12.789 被实时拦截。

本文介绍如何使用正则表达式和事件监听实现 html 输入框的严格数字格式校验：仅允许最多两位整数位、最多两位小数位，且小数点最多出现一次，确保输入如 `12.78` 合法，而 `122.45` 或 `12.789` 被实时拦截。

在实际表单开发中，常需对数值型输入（如利率、百分比、单价等）施加精细的格式约束。本方案要求：

小数点前最多 2 位数字（即整数部分 ∈ [0, 99]）；
小数点后最多 2 位数字；
小数点至多出现 1 次（不可连续 ..，也不可无数字的 ., . 或 12.）；
整体长度不限制为“总共 4 位”，而是分别约束前后段——这是关键设计点（区别于常见“总长 ≤ 4”误读）。

✅ 合法示例：0, 5.5, 12.05, 99.99
❌ 非法示例：123.45（整数超 2 位）、12.345（小数超 2 位）、12..45（双小数点）、.5（缺整数位）、12.（缺小数位）

核心正则表达式为：

/^\d{0,2}(?:\.\d{0,2})?$/

^ 和 $ 确保完全匹配整个字符串；
\d{0,2} 匹配 0–2 个数字（允许空整数位，如 .5 不匹配，因后续 . 是可选组的一部分）；
(?:\.\d{0,2})? 是非捕获组，表示“可选的小数点 + 0–2 位数字”，保证小数点与数字必须成对出现；
因此 12.、.5、12..45 均不匹配，符合业务要求。

完整前端实现如下（基于 jQuery，亦可轻松迁移至原生 JS）：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

<input type="text" id="numberInput" style="width:210px; text-align:right;" placeholder="0.00">

let lastValid = '';
$('#numberInput').on('keypress keyup blur', function (event) {
    const value = $(this).val();
    // 允许删除、退格、方向键等非字符输入通过
    if (event.type === 'keypress' && !/[0-9.]/.test(String.fromCharCode(event.which))) {
        return;
    }
    if (/^\d{0,2}(?:\.\d{0,2})?$/.test(value)) {
        lastValid = value;
    } else {
        event.preventDefault();
        $(this).val(lastValid);
    }
});

⚠️ 注意事项：