本文介绍一种健壮的 JavaScript 输入验证方案，用于实时限制用户在金额输入框中只能输入一个英文小数点（.），且小数点后最多允许两位数字，同时兼容键盘输入与粘贴操作。
本文介绍一种健壮的 javascript 输入验证方案，用于实时限制用户在金额输入框中只能输入一个英文小数点（`.`），且小数点后最多允许两位数字，同时兼容键盘输入与粘贴操作。
在开发表单（尤其是金额、价格类输入）时，仅用 type="number" 或 maxlength 无法满足精细的格式控制需求——例如：用户可能连续输入多个小数点（如 12..3）、或在已有小数点后键入超过两位数字（如 12.345）。此时需通过事件监听 + 字符串解析实现精准拦截。
以下是一个优化后的 validate 函数，它绑定在 onkeypress 事件上，并完整处理了三种关键场景：
- ✅ 允许输入数字（
0–9）和英文小数点（.） - ✅ 禁止重复输入小数点（若输入框已含
.，新按下的.将被阻止） - ✅ 若小数点已存在，且小数部分已达 2 位，则后续数字输入将被拦截（如
5.67后再按8→ 无效）
function validate(evt) {
const theEvent = evt || window.event;
const inputField = theEvent.target || theEvent.srcElement;
let key;
// 处理粘贴事件：获取剪贴板纯文本内容
if (theEvent.type === 'paste') {
key = event.clipboardData.getData('text/plain');
} else {
// 处理按键事件：获取实际输入字符
const keyCode = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(keyCode);
}
// 仅允许数字和小数点
const allowedRegex = /^[0-9.]$/;
if (!allowedRegex.test(key)) {
theEvent.preventDefault();
return;
}
// 阻止第二个小数点
if (key === '.' && inputField.value.includes('.')) {
theEvent.preventDefault();
return;
}
// 若已存在小数点，检查小数位数是否超限（最多2位）
const parts = inputField.value.split('.');
if (parts.length === 2 && parts[1].length >= 2 && key !== '.') {
theEvent.preventDefault();
return;
}
}HTML 中使用方式如下（注意：不要依赖 maxlength="5" 做核心限制，因其无法区分整数/小数长度，且对粘贴无效）：
<input placeholder="Enter amount..." onkeypress="validate(event)" onpaste="validate(event)" >
⚠️ 重要注意事项：
-
onkeypress无法捕获所有输入（如 IME 输入、长按粘贴、拖拽插入等），生产环境建议结合input事件做兜底校验（例如使用inputField.value = formatAmount(inputField.value)实时标准化）； - 当前逻辑未处理负号（
-），如需支持负数，需扩展正则与逻辑（例如允许首位为-，且仅出现一次）； - 对于更严格的金融场景，推荐使用受控组件（React/Vue）或专用库（如
Inputmask或numeral.js）以保障数据一致性。
该方案轻量、无依赖、即插即用，适用于原生 HTML + JS 项目，在保证用户体验的同时，从源头杜绝非法格式输入。
