min 和 max 是 html 表单客户端校验的第一道防线，仅对 number、range、date、time、datetime-local、meter、progress 有效，类型匹配错误或浏览器兼容性问题会导致失效。
min 和 max 属性在 HTML 表单中不是“可选装饰”，而是客户端范围校验的第一道防线——它们直接决定浏览器是否允许用户提交超限值，且不依赖 JavaScript。
哪些元素支持 min/max？
只对特定类型的 <input> 和 <meter></meter>、<progress></progress> 有效：
-
<input type="number">、<input type="range">：完全支持，含数值校验和 UI 限制（如滑块终点） -
<input type="date">、<input type="time">、<input type="datetime-local">：支持，但 IE10 和旧版 Firefox 会忽略 -
<input type="text">或未声明type：无效，浏览器当普通文本框处理，min/max被静默丢弃 -
<meter></meter>和<progress></progress>：仅max（<meter></meter>还需配min和value）
min 和 max 的值必须严格匹配类型
类型错位会导致整个属性失效，且无控制台报错，容易误判为“浏览器不支持”：
-
type="number"必须用数字字符串：min="1"✅，min="1.0"✅，min="1px"❌（被忽略） -
type="date"必须是YYYY-MM-DD格式：max="2025-12-31"✅，max="31/12/2025"❌ -
type="time"必须是HH:MM或HH:MM:SS：min="09:00"✅，min="9am"❌ - 若同时设
min和max，必须满足min ，否则表单验证永远失败（哪怕用户输对了值）
为什么加了 min/max 却没阻止提交？
常见原因不是属性写错了，而是校验被绕过或未触发：
- 用户粘贴超限值后未失焦 —— 浏览器只在
change或提交时校验，input事件不触发内置验证 - 用了
formnovalidate或submit()JS 调用，跳过了表单级校验 - Firefox 对
date/time类型的min/max完全不支持（截至 2026 年 5 月仍如此） - 服务端未二次校验 ——
min/max纯属前端约束，HTTP 请求仍可伪造任意值
step 和 min/max 一起用时的陷阱
step 不是“步长提示”，而是硬性取值约束，与 min/max 共同构成合法值集合：
-
<input type="number" min="0" max="10" step="3">合法值只有0、3、6、9（12超max，排除） -
step="any"允许任意精度小数，但min/max仍按原始类型校验（如date不能写成2025-13-01） - 移动端软键盘可能不随
step变化（例如 iOS 数字键盘仍显示小数点），用户手动输入非法值后，提交时才报错
真正麻烦的不是写错属性，而是以为写了就“安全了”——min/max 只拦住粗心用户，拦不住有意绕过的人，也拦不住跨浏览器兼容性缺口。服务端校验和用户反馈文案（比如用 :out-of-range 配 CSS 提示）得同步跟上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
