原生校验无法实时拦截非法字符，仅在提交或调用checkvalidity()时一次性判断，对.5、12.3.4等无效；type="number"仅触发数字键盘、提供微调按钮，min/max/step和required仅参与提交校验，pattern对number类型无效；真正拦截需监听input事件配合正则过滤并控制光标。
原生校验无法真正“检查并拦截”非法字符，它只在提交或调用校验方法时做一次性判断，且对很多常见非法输入（如 .5、12.3.4、-abc、粘贴的 ￥1,234.56）不报错或直接忽略。所以别指望仅靠 required、min/max 或 pattern 就能守住数字输入框的底线。
原生属性能做什么、不能做什么
能做的：
-
type="number"：触发数字键盘（移动端），提供上下微调按钮，语义明确 -
min/max/step：表单提交或调用checkValidity()时参与校验，浏览器可能显示提示 -
required：空值时阻止提交并提示 -
pattern：⚠️ 注意——对type="number"无效，浏览器会直接忽略它
不能做的：
- 阻止用户粘贴
abc123、1..23、.88、1e5、1,000.50 - 实时过滤中文句号
。、全角数字、负号后接字母等 - 限制小数点个数、前导零、千分位符号
- 让
input.value始终是干净的数字字符串
真正可用的原生校验触发方式
你只能在两个时机靠原生机制“发现”问题：
-
表单提交时：浏览器自动调用
checkValidity()，若失败则取消提交，并高亮字段、弹默认提示 -
手动调用校验：比如在按钮点击或离开输入框（
blur）时执行：if (!input.checkValidity()) { input.reportValidity(); }
这会强制显示浏览器原生错误气泡
但注意：此时 input.value 可能仍是 "12.3.4" 或 "-+"，input.valueAsNumber 会是 NaN，input.validity.badInput 才为 true——这是你唯一能靠原生拿到的“含非法字符”的信号。
必须搭配 JS 才算完整闭环
原生校验只是最后一道“提醒”，不是第一道“防线”。要真正保障数据干净，得立刻响应输入行为：
- 监听
input事件（不是keydown，它抓不到粘贴） - 用正则提取合法数字部分，例如：
const numStr = e.target.value.replace(/^-?\d*\.?\d*/, '');
再转成数字再转回字符串，避免浮点误差影响显示 - 控制光标位置，防止用户编辑中间时跳到末尾
- 提交前仍要用
checkValidity()+ 服务端二次校验兜底
原生校验是辅助，不是主力。想靠它拦住非法字符，等于把门锁装在门框上——看着像锁，其实一推就开。
