本文介绍一种纯前端 javascript 方案，用于实时限制用户在输入框中只能输入一个有效小数点，且小数点后最多两位数字，同时兼容数字键、粘贴操作及已有输入状态校验。
本文介绍一种纯前端 javascript 方案，用于实时限制用户在输入框中只能输入一个有效小数点，且小数点后最多两位数字，同时兼容数字键、粘贴操作及已有输入状态校验。
在开发表单金额输入场景（如价格、汇率、百分比等）时，需确保用户输入符合「整数.两位小数」格式（例如 123.45），禁止出现 12.345（超长小数）、12..34（多个小数点）或 .5（无整数位但合法）等无效形式。以下是一个健壮、可直接复用的输入验证函数：
function validate(evt) {
var theEvent = evt || window.event;
var inputField = theEvent.target || theEvent.srcElement;
// 处理粘贴事件：获取剪贴板纯文本内容
var key;
if (theEvent.type === 'paste') {
key = event.clipboardData.getData('text/plain');
} else {
// 处理按键事件：转换 keyCode 为字符
var code = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(code);
}
// 第一步：仅允许数字和小数点
var allowedRegex = /^[0-9\.]$/;
if (!allowedRegex.test(key)) {
theEvent.returnValue = false;
if (theEvent.preventDefault) theEvent.preventDefault();
return;
}
// 第二步：防止重复输入小数点（已存在则拦截）
if (key === '.' && inputField.value.includes('.')) {
theEvent.returnValue = false;
if (theEvent.preventDefault) theEvent.preventDefault();
return;
}
// 第三步：限制小数点后最多两位数字
var parts = inputField.value.split('.');
if (parts.length === 2 && parts[1].length >= 2 && key !== '.') {
theEvent.returnValue = false;
if (theEvent.preventDefault) theEvent.preventDefault();
return;
}
}
HTML 中绑定方式如下（注意：推荐使用 input 事件替代 keypress 以更好支持粘贴与 IME 输入，但本例保持兼容性）：
<input placeholder="Enter amount..." onkeypress="validate(event)" onpaste="validate(event)">
✅ 关键优化说明：
- 显式获取
inputField元素，确保逻辑作用于当前输入框； - 粘贴时完整校验整个粘贴内容是否合法（当前实现仅做基础字符过滤，如需更严格校验，建议改用
input事件 + 正则^\d*\.?\d{0,2}$全量验证）； - 对
.的拦截发生在value.includes('.')判断之后，避免误阻断首次输入； - 小数位检查基于
split('.')结果，仅当已存在小数点（parts.length === 2）且第二部分长度 ≥2 时，才拦截后续数字输入。
⚠️ 注意事项：
-
maxlength="5"在本例中可能与逻辑冲突（如1.23占4位，但123.45占6位），建议移除或动态计算最大长度； - 如需支持负数（如
-12.34），需扩展正则与逻辑（如允许开头-、排除-.等）； - 更现代的实践推荐使用
<input type="number" step="0.01">+ CSS/JS 辅助校验，但原生number类型对小数精度和国际化支持有限，生产环境仍建议结合 JS 控制。
该方案轻量、无依赖、兼容主流浏览器，可作为金额类输入的基础防护层。
