min 和 max 属性仅对 type="number" 或 type="date" 有效；type="text" 或缺失 type 时无效，且值须为符合格式的字符串（如 min="0" 或 min="2023-01-01"），否则校验失效、valueasnumber 返回 nan，且前端限制不可替代服务端校验。
min 和 max 属性在 input 上只有配合 type="number" 或 type="date" 才真正起作用；写成 type="text" 或漏掉 type，这两个属性就等于没写——浏览器既不校验，JS 也读不到约束逻辑。
为什么 min/max 经常“没反应”
常见错误现象包括：输入超限数字不拦截、提交时无提示、valueAsNumber 返回 NaN。根本原因不是浏览器 bug，而是这些属性只对特定类型生效：
-
type="number"：必须显式声明，不能靠默认类型或 CSS 伪装 -
min和max的值必须是字符串形式的数字（如min="0"），不能是变量、表达式或带单位（如min="0px"） - 空值或非数字输入（如
"abc"）会跳过校验，valueAsNumber直接为NaN，此时比较num 会返回 <code>false，导致逻辑失效 - 小数精度问题：设
min="0.1"，用户输入0.09，部分浏览器（尤其是 Safari）仍允许——HTML5 标准未强制实时截断
maxlength 和 minlength 的适用范围与陷阱
这两个属性和 min/max 完全不同，它们适用于 input[type="text"]、input[type="email"]、textarea 等文本类元素，但不适用于 number 类型：
-
maxlength在浏览器层直接拦截输入，用户根本输不超，不会出现“先闪再删”的闪烁问题 - 拼错成
max-length或加在div上就完全无效 -
minlength只在表单提交时触发校验，失焦或输入过程中不提示；且仅当字段有值时才比对，空值不报错 -
textarea中换行符\n算作 1 个字符，和后端常用校验逻辑一致
如何让限制在 JS 中真正可控
原生属性只是辅助，关键逻辑必须由 JS 主动接管，尤其在需要实时反馈、动态调整或兼容旧环境时：
- 监听
input事件（不是change），覆盖粘贴、拖放、语音输入等所有变更路径 - 用
element.valueAsNumber获取数值，它自动处理空值和非法输入（比parseFloat(value)更可靠） - 手动比对范围后，不要只弹 alert；建议
input.setCustomValidity("超出范围")+input.reportValidity()，和原生校验样式统一 - 重置值时慎用
input.value = ""，更稳妥的是设为边界值：input.value = input.min || "0" - 移动端注意：iOS Safari 允许手动输入超限值，仅限制增减按钮；Android WebView 某些旧版对
max > 1000000会崩溃
日期类型 type="date" 的 min/max 特别要求
日期控件对格式极其敏感，写错一个字符就彻底失效：
- 值必须是
YYYY-MM-DD格式（如min="2023-01-01"），"2023/01/01"或"2023-1-1"都无效 - Safari 直到 iOS 14.5 才支持
type="date"，旧版本会降级为text，min/max彻底丢失 - 动态设置推荐用
input.min = new Date().toISOString().split('T')[0]，避免手拼字符串出错 - 服务端永远要重新解析并校验日期范围——前端限制可被绕过，且时区差异会导致客户端时间与服务端不一致
最易被忽略的一点：所有前端限制都只是用户体验优化。攻击者删掉属性、禁用 JS、或直接发 curl 请求，就能绕过全部校验。后端必须独立实现相同逻辑，且校验时机要在业务处理前，不能只依赖数据库字段长度或类型约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
