本文介绍如何使用正则表达式和事件监听实现 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）：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
<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);
}
});⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- blur 事件用于兜底校验：防止用户粘贴非法内容（如 123.45）绕过 keypress；
- lastValid 缓存合法值：避免误清空或回退到无效中间态；
- 不依赖 input 事件：因部分浏览器中 input 在 blur 后才触发，存在时序风险；
- 兼容性增强：添加 keypress 的字符白名单判断，阻止非数字/点字符直接输入；
- 若需支持负数，可扩展为 ^-?\d{0,2}(?:\.\d{0,2})?$，并额外处理 - 的位置逻辑。
该方案轻量、可靠、无第三方依赖，适用于金融、财务类场景中对精度和格式有强约束的输入控件。
