min/max属性仅对number、date等语义化输入类型生效，type="text"时无效；必须严格匹配格式（如date需yyyy-mm-dd），且服务端必须二次校验。
min/max 属性只对 number 和 date 类型生效
很多初学者给 type="text" 或 type="string"（根本不存在）的 <input> 加 min 和 max，结果完全没效果——浏览器压根不校验。这两个属性只在 type="number"、type="date"、type="datetime-local"、type="month" 等支持范围约束的类型上起作用。
实际用法示例：
<input type="number" min="0" max="100" step="1">
-
step建议显式设置，否则默认为1，但若输入小数（如3.14）且未设step="any"，部分浏览器会标红并阻止提交 -
min/max是字符串值，但会被解析为数字或日期；比如min="2023-01-01"对type="date"有效，对type="number"则无效 - 用户仍可通过手动输入绕过限制（比如粘贴超限数字），所以服务端必须做二次校验
type="number" 的 min/max 在移动端行为不一致
Android Chrome 和 iOS Safari 对 type="number" 的原生键盘和滑动控件支持差异很大：iOS 默认弹出数字键盘但不显示增减按钮，Android 多数厂商浏览器会显示上下箭头——而这些 UI 元素是否尊重 min/max，取决于具体实现。
- 某些 Android 浏览器允许点击增减按钮越过
max（比如到max+1），再失焦时才触发校验并重置 - iOS Safari 在输入框内直接输入超限值不会实时拦截，仅在表单提交时抛
ValidityState.rangeOverflow错误 - 不要依赖 UI 行为做逻辑判断；用
input.addEventListener('input', () => { if (el.valueAsNumber > el.max) ... })主动监听更可靠
服务端必须重复校验，不能信前端 min/max
min 和 max 是纯客户端提示性约束，HTTP 请求里传什么，后端就收到什么。攻击者可轻松绕过 HTML 层面的所有限制。
- 例如，用 curl 直接 POST
score=999，哪怕前端设了max="100"，后端照样收得到 - Node.js/Express 中需检查
req.body.score >= min && req.body.score ，而不是只靠 <code>req.checkBody().isInt({ min: 0, max: 100 })这类验证中间件（它本身也得自己写逻辑） - 数据库字段也建议加 CHECK 约束，比如 PostgreSQL 的
CHECK (score BETWEEN 0 AND 100)
替代方案：用 inputmode + pattern 做轻量级文本限制
如果只是想限制输入为数字区间，又不想用 type="number"（比如因样式或兼容性问题），可以用 inputmode="numeric" 配合 pattern 和 JavaScript 监听。
-
<input inputmode="numeric" pattern="[0-9]{1,3}" title="请输入 0–100 的整数">能唤起数字键盘，但pattern只校验格式，不校验数值大小 - 真正做数值范围拦截，得靠 JS：
el.addEventListener('input', e => { const v = +e.target.value; if (v 100) e.target.value = ''; }) - 注意
+e.target.value会把空字符串转成0，所以最好先判空或用parseFloat+isNaN
min/max 是便利提示，不是安全边界。数值合法性最终只由后端逻辑和数据库约束共同定义，任何漏掉服务端校验的场景，都等于没限制。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
