min/max属性仅参与原生校验与UI裁剪，不拦截输入；需配合type、严格格式、JS监听及服务端二次验证，且动态设置须用setAttribute，日期格式须为YYYY-MM-DD，越界值需手动修正。
min 和 max 属性本身不拦截输入，只参与原生校验和 UI 状态裁剪；真正起效必须搭配正确的 type、严格格式、JavaScript 主动监听，且服务端必须二次验证。
type="number" 的 min/max 为什么输超限值不报错
浏览器只在表单提交或调用 checkValidity() 时触发 validity.rangeOverflow，键盘输入、粘贴、JS 赋值全程无拦截。常见翻车点：
-
type写成"text"或漏掉——属性被完全忽略 -
min="0.5"但没设step="0.1"，用户输0.49仍能通过（默认step="1"不影响小数输入） -
min和max值用了逗号分隔（如min="1,000"）或变量（如min={minVal}），属性静默失效 - 直接读
input.value比较：字符串比较"10" > "2"成立，应改用input.valueAsNumber
type="date" 的 min/max 必须是 YYYY-MM-DD 格式
任何偏差都会导致属性被浏览器丢弃——UI 不灰、日历照常可点、控制台无提示，但 input.checkValidity() 返回 false。实操要点：
- 动态设置必须用
input.setAttribute('min', '2026-09-04')，直接赋值input.min = '2026-09-04'在 Safari 中不刷新日历控件 - 避免手拼日期：
new Date().toISOString().slice(0, 10)可能因时区偏移出错；稳妥写法是`${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}` - 若
input.value已存在且超出新max，浏览器不会自动清空，需手动判断并重置：if (input.value && input.value > input.max) input.value = ''
如何让 min/max 在输入过程中就“卡住”越界值
靠原生属性做不到，必须监听 input 事件并主动截断。关键不是“阻止”，而是“修正”：
立即学习“前端免费学习笔记（深入）”；
- 优先用
input.valueAsNumber获取数值（非法输入或空值返回NaN，比parseFloat(input.value)更准） - 边界值用
parseFloat(input.min)和parseFloat(input.max)动态读取，避免硬编码与 HTML 不一致 - 示例逻辑：
input.addEventListener('input', () => { const num = input.valueAsNumber; if (isNaN(num)) return; if (num < parseFloat(input.min)) input.value = input.min; if (num > parseFloat(input.max)) input.value = input.max; }); - 注意：不要用
change事件——它只在失焦后触发，用户已看到错误输入
联动日期控件时 min/max 容易漏掉的清理动作
比如“结束日期不能早于开始日期”，仅设 endDate.min = startDate.value 是不够的。当用户清空开始日期，结束日期的 min 会卡死，导致无法选择任何日期：
- 必须监听
startDate的input和blur事件 - 一旦
startDate.value === ''，立刻执行endDate.removeAttribute('min') - 若
endDate.value已存在且小于新min，也得同步清空：if (endDate.value && endDate.value - 移动端 Safari 对
change触发不稳定，blur是更可靠的兜底时机
最常被忽略的是：所有这些前端限制，对 curl、Postman 或开发者工具修改 DOM 都无效；min/max 本质只是体验层提示，业务逻辑的守门人永远只能是服务端校验和数据库 CHECK 约束。
