html5中min和max属性可原生限制number、range、date等input类型的值范围，需配合step控制精度，各浏览器校验行为不同，且必须服务端二次校验。

在HTML5中，min 和 max 属性可直接用于 input 元素（类型为 number、range、date、datetime-local、month、week 等），限制用户可输入或选择的数值范围。它们是原生、轻量且无需JavaScript即可生效的校验手段。

min与max的基本用法

对数值型输入框，只需在 input 标签中添加 min 和 max 属性，并赋予合法数字值：

• <input type="number" min="0" max="100">：只允许输入 0 到 100（含）之间的整数或小数
• <input type="range" min="10" max="50" value="30">：滑块范围限定在 10–50，初始值为 30
• <input type="date" min="2024-01-01" max="2024-12-31">：日期选择器仅显示 2024 年内的日期

注意小数精度与step配合使用

单独设 min="0" max="1" 并不能阻止用户输入 0.333 这类三位小数——浏览器默认允许任意精度。若需控制步进粒度，必须显式设置 step 属性：

• <input type="number" min="0" max="1" step="0.1">：只接受 0.0、0.1、0.2…1.0
• step="any" 表示不限制小数位数（但依然受 min/max 边界约束）
• 不写 step 时，浏览器默认为 1（对 number 类型），可能导致小数输入被自动修正或报错

浏览器兼容性与实际校验边界

所有现代浏览器均支持 min/max，但行为略有差异：

• Chrome / Edge：输入超限值后会高亮边框并阻止表单提交（触发 validity.rangeOverflow 或 rangeUnderflow）
• Safari：允许临时输入超限值，但在失去焦点或提交时才提示错误
• Firefox：对 number 输入框会自动截断超出范围的值（如输入 105 且 max=100，则变为 100）
• 重要提醒：这些属性仅提供前端提示，不能替代服务端校验。恶意用户可绕过HTML限制提交非法数据

结合JavaScript增强交互反馈

可通过监听 input 或 change 事件，实时提示或自动修正：

• 监听 invalid 事件，在输入非法时显示自定义提示
• 用 element.validity.valid 检查当前值是否合规
• 调用 element.setCustomValidity("请输入0–100之间的数字") 替换默认错误消息
• 对 range 类型，可同步更新旁边显示的数值标签：label.textContent = input.value

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！