range输入框不拦截非法输入，仅在表单提交时由浏览器校验min/max/step；需用number()或valueasnumber判断越界，配合checkvalidity()和reportvalidity()实现反馈与提示。
range 输入框本身不校验，靠的是浏览器原生约束机制
HTML 的 <input type="range"> 默认不会阻止用户输入超出范围的值——它压根不接受键盘输入，只响应滑块拖动。所谓“校验”，其实是浏览器在表单提交时，对当前滑块值是否落在 min/max 范围内做的约束检查，失败时会抛出 ValidityState.rangeUnderflow 或 rangeOverflow 错误，并阻止提交。
常见误区是以为加了 min="0" max="100" 就自动拦截非法操作，其实用户仍可通过 JS 直接赋值（比如 input.value = "-10"），此时输入框视觉上可能没变化，但 checkValidity() 会返回 false。
- 必须配合
required、min、max三个属性才触发完整约束 -
step影响合法值集合：设为"1"时5.5就非法；设为"any"则跳过 step 校验 - 提交前可用
input.reportValidity()主动触发提示，避免静默失败
用 JavaScript 检查 range 值是否越界
不能只看 value 字符串，要转成数字再比对 min/max。因为 value 始终是字符串，且浏览器允许临时设为非数字（如空字符串），此时 Number(input.value) 会得 NaN，直接比较会出错。
const input = document.querySelector('input[type="range"]');
const numValue = Number(input.value);
if (isNaN(numValue) || numValue Number(input.max)) {
console.error('range 值越界');
}
- 优先用
input.validity.rangeUnderflow/rangeOverflow，它已包含类型转换和边界逻辑 - 手动判断时，务必用
Number()而非一元加号+，后者对空字符串返回0，造成误判 -
input.valueAsNumber是更安全的替代：非法值直接返回NaN，无需额外Number()包裹
监听 range 变化并实时反馈越界状态
input 事件在拖动过程中高频触发，适合做实时反馈；但要注意：滑块拖到边界时，value 会被浏览器自动吸附到 min 或 max，所以通常不会出现越界值——除非 JS 强制赋值或表单重置后手动修改。
rangeInput.addEventListener('input', () => {
if (!rangeInput.checkValidity()) {
feedbackEl.textContent = '超出允许范围';
feedbackEl.style.color = 'red';
} else {
feedbackEl.textContent = '';
}
});
- 别用
change事件：它只在松手后触发一次，无法做到拖动中实时响应 -
checkValidity()内部已处理step约束，比手动计算(value - min) % step === 0更可靠 - 如果需自定义错误文案，改写
input.setCustomValidity('...')，清空时传空字符串
兼容性与移动端特殊行为
所有现代桌面浏览器都支持 range 的约束校验，但 iOS Safari 在早期版本（≤14.5）中存在 bug：即使值越界，checkValidity() 仍返回 true。Android WebView 表现基本一致，但部分旧版 Chrome 对 step="any" 的处理不严格。
- 关键逻辑不要只依赖 HTML 属性，服务端必须二次校验
min/max/step - 移动端滑块精度低，用户可能拖不到精确值（如
step="1"却得到49.99999999999999），建议用Math.round(valueAsNumber)存储 - 无障碍场景下，屏幕阅读器依赖
aria-valuetext描述当前值，否则仅读“滑块，0%”之类模糊信息
真正容易被忽略的不是怎么写校验逻辑，而是默认状态下 range 输入框根本不会显示错误样式——它没有红色边框或气泡提示，除非你主动调用 reportValidity() 或监听 invalid 事件并添加 CSS 类。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
