min和max属性仅对数字有效_HTML极值限制范围剖析

min/max仅对number、range、date、datetime-local、month、week、time类型生效，text等其他类型忽略；动态设置需用setAttribute，读取需parseFloat转换。

min 和 max 属性根本不是“只对数字有效”，而是只对有数值或时间语义的 type 有效——number、range、date、datetime-local、month、week、time。type="text" 加了就等于没写，浏览器直接忽略。

哪些 input type 真正识别 min/max

浏览器只在以下 type 上解析并应用 min 和 max 属性：

• type="number"：值必须是合法数字字符串，如 "10"、"-3.14"；"10.00" 在旧版 Chrome 可能被截断小数位
• type="range"：仅控制滑块范围，值始终为数字，无输入框，不校验格式
• type="date"：值必须严格为 "YYYY-MM-DD"，"2024-3-1" 或 "2024/03/01" 全部静默失效
• type="datetime-local"：格式为 "YYYY-MM-DDTHH:MM"，不带秒、不带时区，"2024-03-01T14:30:00" 会失败

其他所有类型（text、email、tel、color、file）加了 min/max 都不会触发任何校验行为，DOM 中属性存在，但 Constraint Validation API 完全不读取它们。

为什么 type="text" 的 min="5" max="5" 不报错

因为这不是 bug，是规范行为。HTML5 明确规定：min 和 max 是“数值范围约束”，不是“字符串长度约束”。浏览器不会尝试把 "5" 当作长度去比对 input.value.length。

立即学习“前端免费学习笔记（深入）”；

• 你写 <input type="text" min="5" max="5">，浏览器把它当做一个带自定义属性的普通文本框，和 data-min="5" 没区别
• 想限制客户编号为 5 位（含前导零），必须用 pattern="^.{5}$"，配合 title 提示
• 若强行用 type="number"，输入 "00123" 会被自动转成 123，前导零丢失，移动端键盘也默认弹出数字键盘而非全键盘

动态设置 min/max 容易踩的坑

JavaScript 修改时，直接赋值 input.min = "2024-03-01" 在 Safari 上常不生效，UI 不更新，日历控件范围不变。

• ✅ 正确做法：input.setAttribute('min', '2024-03-01') 或 input.setAttribute('max', '2024-12-31')
• ❌ 错误写法：input.min = new Date().toISOString()（格式非法）、input.min = 20240301（数字类型，转字符串后是 "20240301"，非合法日期）
• ⚠️ 注意空值：input.setAttribute('min', '') 会清空限制；input.min = null 或 undefined 会被忽略，不等价于移除
• 读取时务必转换：parseFloat(input.min) 才能得到数字，input.min > 100 是字符串字典序比较，结果不可靠

用户为什么还能输进非法值？

因为 min/max 只做两件事：控制日历/滑块 UI 范围 + 表单提交时触发 validity.rangeUnderflow 或 rangeOverflow。它完全不限制键盘输入、粘贴、JS 赋值。

• 用户可以在 type="date" max="2024-12-31" 里手动输入 "2025-01-01"，且无实时提示
• input.valueAsNumber 在非法日期下返回 NaN，比 new Date(input.value) 更安全（后者跨时区可能偏移一天）
• 真正兜底要靠 setCustomValidity()：比如 if (input.value > input.max) input.setCustomValidity('不能晚于' + input.max)
• 服务端永远不能信任前端的 min/max —— curl、禁用 JS、DOM 编辑都能绕过

最常被忽略的其实是 type 声明缺失和字符串未转数字这两点，一错，整个范围逻辑就失效了。