本文详解如何使用 javascript 正则表达式 + 事件监听，实现 html 输入框中“小数点前最多 2 位、小数点后最多 2 位”的严格数值格式控制，并提供可直接运行的防误输入方案。
本文详解如何使用 javascript 正则表达式 + 事件监听，实现 html 输入框中“小数点前最多 2 位、小数点后最多 2 位”的严格数值格式控制，并提供可直接运行的防误输入方案。
在金融、利率、精度敏感型表单（如年化利率、折扣率）中，常需约束用户仅能输入形如 1.05、12.78 的数值——即整数部分 ≤ 2 位、小数部分 ≤ 2 位，且整体最多含一个小数点。注意：题目中“not more than 4 digit before decimal and after decimal point”实为表述歧义，结合示例（122.45 不接受）及业务逻辑，实际需求是 小数点前最多 2 位、小数点后最多 2 位（共最多 4 位有效数字，但结构受限），而非总位数不超过 4。
✅ 合法输入示例：
- 1.05（1 位整数 + 2 位小数）
- 12.05（2 位整数 + 2 位小数）
- 12.78（2+2）
- 7 或 0.5（允许无小数点或单边存在）
❌ 非法输入示例：
- 122.45（整数部分超 2 位）
- 12.789（小数部分超 2 位）
- 122..45（双小数点，非法语法）
- .5（缺少整数位，若业务要求必须有整数位则需额外校验）
核心正则表达式：
立即学习“Java免费学习笔记（深入）”；
/^\d{0,2}(?:\.\d{0,2})?$/- ^ 和 $：确保匹配整个字符串，防止部分匹配；
- \d{0,2}：整数部分为 0–2 个数字（支持空整数位，如 .5；若需强制至少 1 位整数，改为 \d{1,2}）；
- (?:\.\d{0,2})?：非捕获组，表示「可选的小数点 + 0–2 位小数」；
- 整体含义：整数部分 0–2 位，小数部分（含小数点）0–3 字符（. + 最多 2 数字），且小数点至多出现一次。
完整实现代码（兼容 jQuery）：
<input type="text" id="numberInput" style="width:210px; text-align:right;" />
let lastValid = ''; // 缓存上次合法值
$("#numberInput").on("keypress keyup blur", function (event) {
const value = $(this).val();
// 允许删除、退格、方向键等非数字操作（避免阻断光标移动）
if (event.type === 'keypress' && !/[0-9.]/.test(String.fromCharCode(event.which))) {
event.preventDefault();
return;
}
// 主校验：匹配正则
if (/^\d{0,2}(?:\.\d{0,2})?$/.test(value)) {
lastValid = value;
} else {
event.preventDefault();
$(this).val(lastValid); // 拒绝非法输入，回滚到上一合法状态
}
});⚠️ 关键注意事项：
- blur 事件必不可少：防止用户通过粘贴（Ctrl+V）、右键菜单粘贴非法内容绕过 keypress；
- keyup 辅助校验：处理 Backspace、Delete 等键导致的即时变化；
- 避免 input 事件循环陷阱：直接修改 .val() 可能触发新一轮事件，此处因仅在非法时回滚且不主动触发，故安全；
- 国际化兼容性：该方案仅支持英文小数点 .，如需支持逗号 , 作为小数分隔符，需扩展正则并统一转换；
- 语义化增强建议：配合 <input type="number" step="0.01" min="0" max="99.99"> 提供原生约束（但无法阻止粘贴，仍需 JS 校验兜底）。
此方案兼顾用户体验与数据严谨性，在用户输入过程中实时拦截非法字符，确保后端接收到的始终是符合 XX.XX 格式的合规数值。
