min和max属性无法实时拦截键盘输入，仅在表单提交或调用checkvalidity()时校验；真正卡住越界值需用javascript监听input事件，解析valueasnumber并手动截断至边界范围。
min 和 max 属性本身不拦截键盘输入，只参与表单提交时的原生校验；想真正卡住越界值，必须用 JavaScript 监听 input 事件并手动截断。
min/max 对 type="number" 的实际约束能力
浏览器只在调用 checkValidity() 或表单提交时触发范围校验，input 元素仍允许用户输入任意数字（包括粘贴、键盘敲入超限值），甚至能输 "-999" 或 "1e10"。上下箭头会被禁用，但键盘输入完全不受控。
- min/max 值必须是字符串，如
min="0"，不能写成min=0（JSX 框架中尤其容易漏引号） - 不设
step时默认为"1"，若需小数，必须显式写step="0.01"，否则valueAsNumber可能返回NaN或被舍入 - 空字符串
value === ""时，valueAsNumber为NaN，此时validity.rangeUnderflow不触发——也就是说，删空后提交，min/max 根本不生效
如何用 JavaScript 实时卡死越界输入
核心逻辑是在 input 事件中读取 valueAsNumber，越界则直接赋值给 valueAsNumber（而非 value），确保内部状态同步。
- 用
parseFloat(el.min)解析边界，避免el.min为空或非法时出错 - 不要用
parseInt(el.value)替代el.valueAsNumber，小数会截断（如"3.14"→3） - 赋值前判断
!isNaN(val)，防止空输入或非数字字符串导致异常 - 示例代码：
const el = document.getElementById('price');
el.addEventListener('input', () => {
const min = el.min ? parseFloat(el.min) : -Infinity;
const max = el.max ? parseFloat(el.max) : Infinity;
const val = el.valueAsNumber;
if (!isNaN(val)) {
if (val max) el.valueAsNumber = max;
}
});
type="date" 的 min/max 易错点
type="date" 的 min 和 max 是字符串字典序比较，不是日期解析，格式错一点就全失效。
- 必须为
"YYYY-MM-DD"格式，"2024-1-1"或"2024/01/01"都无效 - 动态生成时别用
toISOString().split('T')[0]——它返回 UTC 时间，东八区用户可能偏差一天；稳妥做法是手动补零：`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}` - Safari 直到 v17+ 才支持日历控件禁用超限日期，旧版仅提交时校验，需 JS 回退
服务端永远要二次校验
前端所有限制都可被绕过：禁用 JS、修改 DOM、curl 提交、Postman 构造请求……min/max 是提示性护栏，不是安全边界。
- Python 后端收到数据后，必须用
float()或int()转换再比对范围，不能信任request.form.get('age')的原始字符串 - 数据库字段也应设 CHECK 约束（如 PostgreSQL 的
CHECK (age BETWEEN 1 AND 120)），形成最后一道防线 - 最常被忽略的是：前端没加
required，用户清空输入框后提交，后端收到空字符串或 null，range 校验直接跳过
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
