HTML表单怎么做金额输入格式校验-html教程-PHP中文网

无法阻止粘贴非法内容（如"123.45.67"）、safari/安卓webview忽略step="0.01"、允许输入e/+/-等字符，仅适合简单数值采集，必须配合后端校验；金额等精确场景应改用type="text"+正则+事件双层过滤。

html表单怎么做金额输入格式校验

用 `input type="number"` 会踩哪些坑

直接写 <input type="number"> 看似合理，但实际无法阻止用户粘贴非法内容（比如 "123.45.67" 或 "￥100"），且在 Safari 和部分安卓 WebView 中会忽略 step="0.01" 导致小数位校验失效。更关键的是，它不拦截非数字字符的键盘输入（如 e、+、- 在某些场景下仍能输入），根本达不到“金额格式控制”的目的。

所以别依赖 type="number" 做格式校验，它只适合简单数值采集，且必须配合后端二次验证。

用 `input type="text"` + 正则 + 键盘拦截更可靠

金额输入的核心诉求是：允许最多两位小数、可选负号、禁止前导零（除 "0" 和 "0.x" 外）、实时过滤非法字符。推荐用 type="text"，配合 input 和 keydown 事件做双层防护：

keydown 拦截明显非法按键（如 q、!、Tab 在输入中不该触发格式处理）
input 事件里用正则清洗值：^(-?\d+\.?\d{0,2})$ 匹配合法结构，再额外处理 "." 开头、多个小数点、"00" 开头等情况
注意：不要在 input 里直接 value = newValue 后把光标推到末尾——用户在中间修改时体验极差；应保存并恢复 selectionStart/selectionEnd

示例关键逻辑：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

input.addEventListener('input', e => {
  let v = e.target.value;
  // 先剔除非数字、非点、非负号
  v = v.replace(/[^-\d.]/g, '');
  // 确保最多一个小数点
  const dotIndex = v.indexOf('.');
  if (dotIndex !== -1 && v.indexOf('.', dotIndex + 1) !== -1) {
    v = v.slice(0, dotIndex) + v.slice(dotIndex).replace(/\./g, '');
  }
  // 小数点后最多两位
  if (dotIndex !== -1 && v.length > dotIndex + 3) {
    v = v.slice(0, dotIndex + 3);
  }
  // 禁止 "-."、"-.1"、"00"、"-00"
  if (/^-?\./.test(v) || /^-?0\d/.test(v)) {
    v = v.replace(/^(-?)0+(\d)/, '$1$2');
  }
  e.target.value = v;
});

为什么不用 `pattern` 属性做前端校验

pattern 只在表单提交时触发，对实时输入无效，用户输完一长串非法内容（如 "12..34.5.6"）才报错，体验断裂。而且 pattern 不支持动态更新，无法根据是否允许负号、是否必填等条件灵活切换规则。更重要的是，pattern 校验失败时浏览器只显示模糊提示（如 “请匹配所要求的格式”），无法精准定位问题（比如“小数位不能超过两位”）。它适合做提交兜底，不适合做输入控制。

真正要做的，是让用户「输不进去」，而不是「输完再骂他」。

后端必须重新解析并校验字符串

前端所有拦截都可被绕过（禁用 JS、手动改 DOM、curl 提交）。后端收到的值一定是字符串，必须用服务端语言原生的数字解析函数处理，例如 Python 的 decimal.Decimal() 或 Java 的 BigDecimal，而不是 float —— 否则会出现 0.1 + 0.2 !== 0.3 这类精度灾难。同时要检查字符串是否符合正则 ^-?\d+(\.\d{1,2})?$，拒绝 "123."、"123.456"、"12e3" 等非法形式。

最易被忽略的一点：金额字段通常有业务含义（如“不得为负”、“不得为零”、“上限 99999999.99”），这些规则前端可以提示，但必须在后端强制执行，且错误信息要明确返回具体限制条件。