html5中用type="number"配合min、max、step实现数值范围控制：min/max限定合法区间，step设定增量步长，但仅前端有效，服务端必须二次校验。
HTML5 中设定数值范围，主要靠 input 元素的 type="number" 配合 min、max 和 step 属性实现。浏览器会自动校验输入值是否在范围内，并限制上下箭头可调范围——但注意：这些只是基础约束，不能替代服务端校验。
用 min 和 max 限定合法取值区间
这是最直接的方式，适用于整数或浮点数输入控件。浏览器会在用户手动输入越界值时标记为无效（:invalid），且禁用微调按钮超出边界。
-
min和max值必须是有效数字字符串，如"0"、"100.5"，不能是"0px"或空字符串 - 若只设
min不设max，则仅限制下限；反之亦然 - 当
min > max时，整个控件会被视为无效（checkValidity()返回false）
<input type="number" min="1" max="100" value="50">
step 控制可选增量步长
step 决定用户点击上下箭头或按键盘上下键时的增减单位，也影响表单验证——比如 step="0.1" 时，"1.05" 会被认为非法（因为无法被 0.1 整除）。
- 默认值是
"1"；设为"any"表示不限制小数精度（但不推荐，易引发验证歧义） -
step必须与min的差值能被其整除，否则初始值可能触发验证失败 - 例如：
min="0.1" step="0.2"是合法的，但min="0.15" step="0.2"会导致0.15不满足(value - min) % step === 0
<input type="number" min="0" max="1" step="0.01" value="0.75">
JavaScript 动态修改范围时要注意验证状态
通过 JS 修改 min/max/step 后，元素的 validity.rangeUnderflow、validity.rangeOverflow 等状态不会自动更新，需手动触发验证：
立即学习“前端免费学习笔记（深入）”；
- 调用
inputElement.checkValidity()可返回布尔结果 - 调用
inputElement.reportValidity()会显示浏览器原生提示（如果无效） - 修改后立即
inputElement.valueAsNumber可能已越界，需同步重置值，否则后续提交仍会失败
const input = document.querySelector('input[type="number"]');
input.min = '10';
input.max = '50';
input.value = Math.min(Math.max(input.valueAsNumber, 10), 50); // 安全重置
input.reportValidity();真正容易被忽略的是：所有这些属性都只作用于浏览器 UI 和前端验证，用户完全可以通过开发者工具绕过或直接 POST 越界数据。只要涉及业务逻辑（比如价格、库存、权限等级），后端必须重新解析并校验数值范围。
