<input type="number"> 不校验数字有效性，仅提供UI增强；需结合 required、min/max、step 及 checkValidity() 实现原生校验；JavaScript 中应 trim() + parseFloat() + isFinite() 安全取值。
input type="number" 本身不校验数字有效性
很多人以为 <input type="number"> 会自动阻止用户输入非数字内容，其实它只是提供数字键盘（移动端）和上下箭头（桌面端），并不拦截非法输入。比如用户仍可粘贴 "12.3abc"、输入 "--5" 或留空，此时 value 可能是空字符串或非法字符串，valueAsNumber 会返回 NaN。
关键点在于：type="number" 的校验能力非常有限，仅靠它无法满足表单级数字校验需求。
用 checkValidity() + 自定义约束配合 required 和 min/max
浏览器原生校验可以触发提示，但前提是设置好约束属性并主动调用验证方法。仅写 type="number" 是不够的。
-
required：防止空值（注意：空字符串不算有效数字，但用户可能输空格，需 trim） -
min/max：限定范围（注意：它们是字符串值，必须为有效数字字符串，如min="0"，不能是min="-Infinity"） -
step：控制精度（如step="0.01"表示允许两位小数；step="any"允许任意精度） - 调用
input.checkValidity()才会触发红框+提示气泡，否则不生效
示例：
立即学习“前端免费学习笔记（深入）”；
<input type="number" id="age" min="1" max="120" required step="1">
<button onclick="console.log(document.getElementById('age').checkValidity())">校验</button>
JavaScript 中安全获取数字值的正确方式
直接读 input.value 得到的是字符串，可能为 ""、"12.3.4" 或 " 42 "；读 input.valueAsNumber 在非法时返回 NaN，但不会报错——这是最常被忽略的隐患。
推荐做法：
- 先用
trim()清除首尾空格 - 再用
parseFloat()解析（比Number()更宽容，能处理"12.3px"这类开头合法的字符串） - 最后用
isFinite()判断是否为「有效数字」（排除NaN、Infinity、-Infinity）
示例：
立即学习“前端免费学习笔记（深入）”；
const input = document.getElementById('price');
const raw = input.value.trim();
const num = parseFloat(raw);
if (!isFinite(num)) {
console.error('请输入有效数字');
}
需要精确小数位时，不要依赖 valueAsNumber
valueAsNumber 在遇到 "1.00" 时返回 1，丢失精度；对 "0.1 + 0.2" 类浮点误差也无能为力。如果业务要求保留两位小数（如金额），必须用字符串解析 + 固定格式化，而不是靠输入框类型兜底。
常见错误写法：input.valueAsNumber.toFixed(2) —— 这会在 valueAsNumber 已经是 NaN 时抛错，且无法处理原始输入中的多余小数位。
更稳妥的做法：
- 监听
input事件，用正则限制用户只能输入数字和最多一个小数点（如/^\d*\.?\d{0,2}$/） - 提交前用
parseFloat()+toFixed(2)格式化，但仅用于显示或发送，不用于校验逻辑 - 后端仍需做二次校验——前端任何限制都可被绕过
真正难的不是让输入框看起来像数字框，而是确保你拿到的值在语义和精度上都符合业务预期。多数人卡在第一步：没意识到 valueAsNumber 是个“尽力而为”的只读属性，不是权威数字源。
