html中没有min()和max()函数，只有用于特定input类型的min/max属性；它们仅在type="number"、"range"、"date"等数值型输入中生效，type="text"时无效；dom返回字符串需parsefloat转换；服务端必须重复校验。
HTML里没有min()和max()函数，只有min/max属性
很多人搜“HTML min max函数”，结果发现怎么都用不上——因为HTML标准里压根不存在叫min()或max()的函数。真正能用的是min和max这两个**HTML属性**，只作用于特定input类型，比如type="number"、type="date"、type="range"等。
混淆常来自CSS里的min()和max()函数（如width: min(100%, 500px)），或JS里的Math.min()、Math.max()，但这些跟HTML表单约束完全无关。写成<input min="10">是对的；写成<input min="Math.max(5,10)">或<input min="min(5,10)">会直接失效——浏览器当普通字符串忽略。
type属性没设对，min/max就等于没写
min和max只在浏览器识别为“数值型输入”时才生效。如果写成<input type="text" min="1" max="100">，哪怕DOM里能看到el.min === "1"，它也不会校验、不会限制、不会触发:invalid状态。
-
type="number"：支持数字键盘、上下箭头微调，原生报错提示“值必须不低于 X” -
type="range"：滑块控件，min/max决定拖动范围，值始终是数字 -
type="date"：日历控件，min/max必须是"YYYY-MM-DD"格式字符串 -
type="text"或未声明type：属性存在但无任何行为，纯摆设
JS读取min/max时，字符串比较会出大问题
DOM属性返回的永远是字符串，不是数字。直接拿input.max > 100比较，实际执行的是字符串字典序比较："50" > "100"结果是true（因为"5" > "1"）。这会导致校验逻辑彻底翻车。
正确做法是显式转数字：
const minVal = input.min === "" ? -Infinity : parseFloat(input.min);
const maxVal = input.max === "" ? Infinity : parseFloat(input.max);
if (value maxVal) { /* 越界 */ }
注意：parseFloat()比Number()更稳妥，能处理"1.5"、"007"等；而input.min === ""表示该属性未设置，不能默认当0或undefined处理。
用户能绕过所有前端限制，服务端必须重复校验
浏览器原生min/max只是体验层辅助：用户改DOM、禁用JS、用curl发请求，都能轻松提交非法值。真正起作用的只有后端校验。
前端可加一层即时反馈，但别依赖它防数据污染：
input.addEventListener('input', () => {
const val = parseFloat(input.value);
if (isNaN(val) || val parseFloat(input.max)) {
input.setCustomValidity('超出允许范围');
} else {
input.setCustomValidity('');
}
});
最容易被忽略的是：动态设置input.min或input.max时，值必须是合法格式字符串（如"2024-01-01"或"99.99"），传2024或new Date()会静默失败，且不报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
