input[type="number"]需配合min/max/step/required属性实现基础校验，JavaScript须先判空再验数字类型及范围，服务端必须重复校验以确保安全。
用 input[type="number"] 做基础范围限制最直接
浏览器原生支持 min 和 max 属性，能阻止用户输入超限数字，也能在移动端唤起数字键盘。但注意：它只校验输入值是否在范围内，不阻止用户留空或输入非数字字符（如字母），且部分老浏览器会忽略这些属性。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须同时设置
min="0"和max="120"（按业务调整），仅设一个无效 - 加上
required防止空提交，否则用户删光内容后仍可通过校验 - 配合
step="1"禁止小数（避免出现25.5这类非整数年龄） - 示例：
<input type="number" name="age" min="0" max="120" step="1" required>
JavaScript 补充校验时别只依赖 valueAsNumber
valueAsNumber 在输入为空或非法时返回 NaN，直接比较 >= 0 会得到 false，但这个 false 可能掩盖“空值”和“超限”两种不同问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先用
input.value.trim() === ""单独判断空值 - 再用
!isNaN(input.valueAsNumber)确认是有效数字 - 最后才检查范围：
input.valueAsNumber >= 0 && input.valueAsNumber <= 120 - 不要用
parseInt()替代valueAsNumber，它会把"18abc"转成18，造成误判
表单提交前校验失败要明确提示具体原因
用户看到“年龄不合法”这种提示毫无意义——不知道是空了、超了，还是填了文字。浏览器默认的 setCustomValidity() 错误消息如果没及时清除，会导致后续合法输入仍报错。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
submit事件里统一校验，而非每个input的change或blur - 对不同错误分别调用
input.setCustomValidity("请输入0到120之间的整数")或input.setCustomValidity("")清空 - 触发
input.reportValidity()主动显示原生气泡提示，比自己弹alert更一致
服务端必须重复校验，前端限制纯属“用户体验优化”
任何前端校验都可被绕过：禁用 JS、手动修改 HTML、用 curl 直接发请求……min/max 和 JavaScript 都不构成安全边界。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 后端收到
age字段后，必须重新解析为整数，并检查是否在 [0, 120] 区间内 - 不能只信任
Content-Type: application/json里的字段类型，JSON 中的"age": "30"是字符串，"age": null也可能出现 - 若校验失败，返回 HTTP 400 + 明确错误字段（如
{"error": "age must be an integer between 0 and 120"}）
input[type="number"] 当作“已校验”，结果用户粘贴进 "25 years" 后，valueAsNumber 是 NaN，而你只检查了范围，没处理非数字场景。 
