min/max 仅在提交或调用 checkvalidity() 时校验，属软约束；需配合 step 控制精度，清空时失效，必须用 parsefloat 和 valueasnumber 处理输入，并依赖后端独立验证。
min/max 属性只在提交时校验，不拦截输入
浏览器不会阻止用户手动输入或粘贴越界数字，比如 min="1" 的输入框里照样能粘贴 -5 或 1000。它只在表单提交或调用 checkValidity() 时触发原生校验，属于“软约束”。
常见错误是以为加了 min 和 max 就万事大吉，结果后端收到非法值才发现漏校验。
- 用户清空输入框后提交，
value是空字符串，min/max完全不生效——必须加required -
min="abc"或max=""会导致属性失效，值必须是合法数字字符串（如"0"、"-10.5"） - 旧版 Safari 对
step="any"支持差，小数输入建议显式写step="0.01"
必须配合 step 才能控制精度
step 决定哪些值算“合法”，不是可有可无的辅助属性。默认 step="1"，意味着只接受整数；设 min="0" max="10" 却没写 step，用户输 3.14 可能被截断成 3，或提交时直接报错。
- 要支持任意小数：用
step="any"（注意 Safari 兼容性） - 要限定两位小数：用
step="0.01"，此时min="0"实际最小值是0.00 -
step="2"搭配min="0" max="10"，只允许0, 2, 4, 6, 8, 10
实时裁剪越界值得靠 JavaScript 监听 input 事件
想让用户一输就“卡住”范围，不能等 blur 或 submit，得监听 input 事件并主动修正。关键点是别用 parseInt()，要用 parseFloat() 并处理 NaN：
- 用
el.valueAsNumber读取数值更可靠（非法时返回NaN），但注意它在清空时也返回NaN - 赋值时优先用
el.valueAsNumber = x，它会同步更新value字符串和内部状态 - 不要只做
if (val > max) el.value = max，得先判断isNaN(val)，否则空输入会被当成0处理
示例逻辑：
el.addEventListener('input', () => {
const min = parseFloat(el.min) || -Infinity;
const max = parseFloat(el.max) || Infinity;
const val = el.valueAsNumber;
if (!isNaN(val)) {
if (val max) el.valueAsNumber = max;
}
});
服务端必须独立验证，前端限制纯属体验优化
任何前端控制都可被绕过：禁用 JS、改 DOM、curl 直接发请求……后端收到字段后，必须重新解析为数字，再比对范围。
- 别信
parseInt(req.body.age)—— 它会把"10a"变成10，应先正则或parseFloat+isNaN判合法性 - 浮点精度问题要小心：
120.00000000000001可能通过 JS 校验，但业务上已越界；建议后端统一用整数（如分、厘）或 decimal 类型处理 - 动态生成的
min/max值（比如从数据库读），前端展示和后端校验必须用同一份配置，避免前后端逻辑分裂
真正卡死范围的地方永远在后端，前端所有努力只是让用户少点一次提交失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
