min和max属性无法开箱即用，需按type分策略补漏：number类型须监听input事件+parsefloat校验+setcustomvalidity；date类型必须严格yyyy-mm-dd格式、用setattribute动态设置、服务端兜底校验。
min 和 max 属性在 HTML 中不是“开箱即用”的兼容性方案，它们的行为差异比你想象中更大——不同浏览器对输入拦截、日期格式解析、小数处理甚至 step 的联动逻辑都各不相同。光靠写对属性值远远不够，得按类型分策略补漏。
type="number" 的 min/max 在 Chrome/Firefox/Safari 表现不一致
Chrome 和 Firefox 会在点击上下箭头时严格限制范围，但 Safari（v17+）基本不限制键盘输入，粘贴 "999" 即使 max="100" 也照收；更糟的是，Safari 对 step="1" 下输入 "5.5" 不报错，而 Chrome 会自动截断为 "5" 或标红。
- 必须显式写
step="1"（整数）或step="0.01"（两位小数），不能依赖默认step="any" - 监听
input事件而非change：用户还没松手就该裁剪，change太晚 - 用
parseFloat(el.value)解析，别用Number()—— 后者对空字符串返回0，容易误判 - 处理
NaN：用户删空时parseFloat("")是NaN，需加isNaN(val)判断再跳过校验
type="date" 的 min/max 格式与时区陷阱
min="2024-3-1" 或 min="2024/03/01" 全部失效，浏览器静默忽略，控制台零提示。Safari 还会把 new Date().toISOString().slice(0,10) 返回的 UTC 时间当本地时间用，东八区用户今天调用可能拿到明天的日期。
- 日期字符串必须是严格
YYYY-MM-DD，月份和日期补零不可少：`${y}-${String(m+1).padStart(2,'0')}-${String(d).padStart(2,'0')}` - 动态设置必须用
el.setAttribute('min', '2024-01-01')，直接赋值el.min = '2024-01-01'在 Safari 中不刷新 UI - Firefox 至今（2026 年 5 月）仍完全不支持
date类型的min/max，控件显示全部日期，仅提交时校验 - 移动端安卓 WebView 对
min早于 1970 年的日期支持极差，建议服务端兜底校验起始年份
如何让 min/max 真正“生效”而不依赖浏览器？
原生 min/max 只在表单提交或调用 checkValidity() 时触发，且对非法字符（如字母）不报错——valueAsNumber 是 NaN，但 validity.rangeOverflow 仍是 false。这意味着你不能只靠 CSS 伪类 :invalid 或 reportValidity() 就认为安全了。
- 手动封装边界读取函数：
const getMin = el => el.min === '' ? -Infinity : parseFloat(el.min) - 在
blur时强制归位：输入超限后失焦，自动设为最近合法值（如min="1"+step="2"，输4应改为5而非清空） - 调用
setCustomValidity()替换默认提示，否则用户只看到模糊的“值必须不低于 X” - 服务端必须独立校验：绕过 JS、禁用前端、curl 提交任意值，
min/max完全无效
最麻烦的不是写错属性，而是以为写了就“覆盖全场景”。Chrome 上跑通的 date 限制，在 Safari 和 Firefox 里可能形同虚设；number 的实时截断逻辑，在旧版安卓 WebView 中可能引发输入卡顿或崩溃。真正落地时，得把每个浏览器当作一个独立子系统来适配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
