因为浏览器仅在提交或checkvalidity()时校验，不阻止手动输入、粘贴等越界操作；需监听input事件实时截断，并服务端二次校验。
input[type="number"]的min/max为什么拦不住超限输入
因为浏览器只在表单提交或调用 checkValidity() 时触发校验，不阻止用户手动键入、粘贴或拖拽出界值。比如设了 max="10"，用户照样能输 999，直到点击提交才弹红框——这根本不是“限制”，只是“事后提醒”。
常见错误现象：input[type="number"] 在安卓 Chrome 或旧版 Safari 中，箭头增减可能失效；用户粘贴 "15.7" 进 max="10" 的框里，毫无反应；step 没配 min 时，第一档值直接跳空（如 step="2" 却从 0 开始，0 不在合法序列中）。
-
min和max值必须是字符串，如min="0"，不能写成min={0}（React 中会丢属性） - 没设
step时，max="10"允许输入10.5（默认step="any"） - 移动端数字键盘不识别
step，用户仍可输入任意小数位数
用input事件实时截断非法值的最小可行代码
核心是监听 input 事件（不是 change），在每次键入/粘贴后立刻修正。下面这段代码能覆盖空值、NaN、越界值三种典型问题：
const el = document.querySelector('input[type="number"][min][max]');
el.addEventListener('input', () => {
const val = parseFloat(el.value);
const min = parseFloat(el.min) || -Infinity;
const max = parseFloat(el.max) || Infinity;
<p>if (isNaN(val)) {
el.value = '';
return;
}
if (val max) el.value = String(max);
});
</p>
注意：别用 el.value = min（数字类型），否则某些浏览器会清空框；必须转成字符串 String(min)。
- 删光内容时
parseFloat("")返回NaN，必须显式判断并清空 - 不要在 Vue/React 中直接赋值
el.value，可能触发响应式死循环，加标记位或用nextTick防抖 - 这个逻辑不处理
step对齐，如min="1"+step="2"下输入4应修正为5，需额外计算
如何让输入值自动对齐 step 步长
仅校验范围不够，业务常要求值必须落在 min + n × step 序列上。比如库存调整步长为 5，用户输 12 得自动变成 10 或 15（通常取最近合法值）。
关键点是：先算出合法序列起点，再用模运算对齐。示例逻辑：
const step = parseFloat(el.step) || 1;
const min = parseFloat(el.min) || 0;
const val = parseFloat(el.value);
<p>if (!isNaN(val)) {
// 向下取最近合法值（如 min=1, step=2, val=4 → 3）
const aligned = Math.round((val - min) / step) * step + min;
el.value = String(Math.max(min, Math.min(parseFloat(el.max) || Infinity, aligned)));
}
</p>
- 别用
Math.floor直接向下取整，会导致偏移（如val=3.9在step=2下应为3而非1） -
step="any"时，parseFloat("any")是NaN，需兜底为1 - 对齐后仍要再过一遍
min/max边界检查，避免对齐结果越界
服务端为何必须二次校验
前端所有限制都可被绕过：禁用 JS、手动改 DOM、curl 提交、抓包重放……min/max 属性、input 事件、甚至 pattern，全在客户端跑，对恶意请求零防御力。
真正不可省的只有两件事：
- API 接口收到数字字段后，必须用服务端语言（如 Python 的
int()+ 范围判断、Java 的Integer.parseInt()+ 条件抛异常）重新解析并校验 - 数据库字段要设约束，如 PostgreSQL 的
CHECK (quantity BETWEEN 0 AND 100)，防止脏数据入库
容易被忽略的是：前端展示的 max="100" 和后端硬编码的 100 必须同步更新。一旦运营临时把库存上限提到 200，只改前端不改后端，就会静默截断或报 500 错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
