min和max无效是因为浏览器仅对type="number"等显式声明的元素启用原生校验；若type缺失、为"text"或属性值非字符串字面量（如min={0}），校验逻辑不触发，需严格使用<input type="number" min="0" max="100">。
为什么 min 和 max 有时完全没反应
因为浏览器只对显式声明 type="number"（或 type="date" 等）的元素启用原生范围校验；如果漏写 type、写成 type="text"，或者属性值不是字符串（如 min={0}），这些属性就形同虚设——DOM 中能读到，但校验逻辑压根不启动。
常见错误现象包括：input.valueAsNumber 返回 NaN、粘贴超限数字无提示、点击提交按钮后才弹校验气泡（甚至不弹）。
- 必须写
<input type="number" min="0" max="100">，不能省略引号，也不能用 JS 表达式 -
min和max的值必须是字符串字面量，如"0"、"2024-01-01" - 空值或非数字输入时，浏览器跳过校验——所以用户清空再输入
-5，min="0"不会拦截
input 事件里怎么实时截断越界值
靠原生 min/max 无法阻止键盘输入或粘贴，得用 input 事件监听并主动修正。注意别用 keydown 拦截，否则退格、小数点、负号全被干掉。
关键点是用 parseFloat(input.value) 转数值（它能安全处理空串和非法字符），再对比边界：
立即学习“前端免费学习笔记（深入）”；
const input = document.querySelector('input[type="number"]');
input.addEventListener('input', () => {
const num = parseFloat(input.value);
if (!isNaN(num)) {
if (num < parseFloat(input.min)) input.value = input.min;
if (num > parseFloat(input.max)) input.value = input.max;
}
});
- 用
input而非change：后者只在失焦时触发，太晚 - 避免直接比较字符串：
"10" > "2"是true，但数值上显然不对 - 移动端粘贴后可能触发多次
input，这段逻辑天然兼容
type="date" 的 min/max 格式踩坑点
type="date" 只认 YYYY-MM-DD 格式字符串，比如 "2026-09-21"。用 new Date().toISOString().split('T')[0] 看似方便，但 toISOString() 返回 UTC 时间，东八区用户调用可能偏差一天。
稳妥做法是手动拼接：
const d = new Date();
const isoDate = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
// 然后赋给 input.min 或 input.max
- 写成
"2026/09/21"或"21-09-2026"—— 属性存在，但浏览器直接忽略 - Safari 目前仍不灰掉超限日期，仅提交时校验；Chrome/Firefox 会禁用日历控件里的超限项
- 日期范围校验是字典序比对，不是时间戳，所以
min="2026-09-21"能拦住"2026-09-20"，但拦不住"2026-09-21a"（不过用户输不出这个）
为什么服务端校验不可跳过
前端所有限制都可被绕过：禁用 JS、改 DOM、curl 直传、抓包重放……min/max 本质是体验层辅助，不是安全边界。
后端收到数据后，必须独立解析并校验范围，且不能依赖前端传来的原始字符串：
- Python 示例：
if not (40 <= float(value) <= 270): raise ValueError("超出允许范围") - 不要信任
value字符串长度或正则匹配，要真正转成数值再比 - 尤其注意浮点精度问题：前端设
step="0.01"，后端仍要接受0.015并四舍五入或拒绝
最易被忽略的是：前端用 input.valueAsNumber 获取的值，在某些旧浏览器或特殊输入下可能是 NaN，而服务端若没做容错，就会炸。
