本文介绍如何通过正则表达式和事件监听实现html输入框的实时校验，确保用户只能输入最多两位整数位、最多两位小数位（即总长度不超过5位，含小数点），并自动拦截非法输入。
本文介绍如何通过正则表达式和事件监听实现html输入框的实时校验，确保用户只能输入最多两位整数位、最多两位小数位（即总长度不超过5位，含小数点），并自动拦截非法输入。
在金融、利率、精度敏感类表单中，常需严格约束数值格式：例如“年化利率”要求最多两位整数（如 12）加最多两位小数（如 .99），即合法范围为 0.00 至 99.99，且禁止 123.45、12.345 或 12..45 等无效格式。
核心校验逻辑基于正则表达式：
^\d{0,2}(?:\.\d{0,2})?$- ^ 和 $ 保证完整匹配整个字符串；
- \d{0,2} 匹配 0–2 位数字（支持空整数位，如 .5 不合法，但该正则本身允许纯小数？注意：实际业务中通常要求至少一位整数，见下文优化说明）；
- (?:\.\d{0,2})? 是非捕获组，表示“可选的小数部分”，即一个点加 0–2 位数字；
- 综合效果：仅接受 x、xx、x.x、xx.xx 形式（x 为数字），共 5 种合法结构。
✅ 合法示例：1.05、12.05、12.78
❌ 非法示例：122.45（整数超2位）、12.789（小数超2位）、122..45（双小数点）、.5（无整数位，若业务要求必须有整数位，需调整）
⚠️ 注意：原始正则 \d{0,2}(?:\.\d{0,2})? 允许空整数位（如 .25），但多数业务场景要求至少一位整数（即 0.25 合法，.25 不合法）。推荐强化为：
^\d{1,2}(?:\.\d{1,2})?$|^0(?:\.\d{1,2})?$或更简洁通用写法（兼顾 0.00 和 12.99）：
立即学习“Java免费学习笔记（深入）”；
^(?!0\d)\d{1,2}(?:\.\d{1,2})?$|^0(?:\.\d{1,2})?$但为简化维护，实践中常用 ^\d{1,2}(\.\d{1,2})?$ 并额外允许 0 → 0.0 → 0.00 的渐进输入，配合 input 事件 + 状态缓存更健壮。
以下是生产可用的完整实现：
<input type="text" id="numberInput"
placeholder="请输入0.00–99.99"
style="width:210px; text-align:right; padding:4px;">let lastValid = ''; // 缓存上一次合法值
$('#numberInput').on('input', function (e) {
const value = this.value.trim();
// 支持空值、纯整数、标准小数格式，且整数≤2位、小数≤2位
if (/^\d{0,2}(\.\d{0,2})?$/.test(value) && value !== '.') {
lastValid = value;
} else {
this.value = lastValid;
}
});? 关键优化说明：
- 使用 input 事件替代 keypress/keyup/blur 组合，覆盖粘贴、拖入、语音输入等所有修改途径；
- trim() 防止空格干扰；
- 显式排除孤立小数点 value !== '.'，避免中间态误判；
- lastValid 保障回退一致性，用户无法通过删除操作进入非法状态。
最后提醒：前端校验仅为用户体验增强，服务端必须重复校验（如使用后端语言的正则或数值解析+范围判断），防止绕过JS直接提交恶意数据。
