html原生min/max属性可用但仅提交时校验，体验差且不触发自定义逻辑；需搭配type="number"，实时校验应监听input事件并用parsefloat解析、范围判断与lastvalid还原。
HTML原生的min/max属性能直接用吗
能，但只在提交时触发校验，且部分浏览器（如旧版Safari）不支持实时反馈。用户输入超范围值后不报错，直到点击提交才弹出提示，体验差，也不方便前端逻辑控制。
关键点：min 和 max 是HTML5表单约束，依赖浏览器实现，不触发input或change事件中的自定义校验逻辑。
- 必须同时设置
type="number"，否则min/max无效 - 允许用户临时输入超限值（比如先输“999”，再删成“9”），此时
valueAsNumber可能为NaN，需判空 - 移动端软键盘可能不显示数字键（尤其iOS Safari），建议加
inputmode="numeric"
如何用JavaScript实时校验并阻止非法输入
监听input事件，对每次输入做数值解析和范围判断，非法时还原上一有效值或清空。注意不能只靠keydown，因为粘贴、拖拽、上下箭头等操作不会触发它。
示例逻辑：
const input = document.querySelector('input[name="age"]');
let lastValid = input.value;
input.addEventListener('input', () => {
const num = parseFloat(input.value);
const min = 18;
const max = 120;
if (isNaN(num) || num max) {
input.value = lastValid; // 拒绝变更
} else {
lastValid = input.value;
}
});
-
parseFloat比parseInt更稳妥，能处理“18.0”“18.5”等浮点输入 - 不要用
valueAsNumber做判断——当输入为空或非数字时返回NaN，但不会抛错，容易漏判 - 还原
lastValid比直接setCustomValidity更直观，避免多次调用导致校验状态混乱
需要兼容非数字输入（如字母、符号）怎么办
用户可能粘贴“abc”、输入“-18”或“+25”，这些在type="number"下会被忽略，但实际DOM中仍可能残留。应主动过滤。
- 正则
/^-?\d*\.?\d*$/可匹配合法数字字符串（含负号、小数点），但要注意“.”单独出现也匹配，需额外排除 - 更稳妥做法：用
input.value.replace(/[^-\d.]/g, '')粗筛，再用parseFloat转义校验 - 若业务要求整数区间（如年龄），应在解析后用
Number.isInteger(num)补判，或直接用Math.round取整
用setCustomValidity做表单级统一提示是否可靠
可靠，但必须配合reportValidity()或原生提交触发，且要手动清除错误态。否则一旦设过setCustomValidity("xxx")，后续合法输入也不会自动恢复valid状态。
- 每次输入后都要调用
input.setCustomValidity("")清空，再根据条件重设 - 仅设
setCustomValidity不会影响input.value，需自行控制值是否保留 - 和CSS伪类
:invalid联动时，注意某些浏览器对type="number"的:invalid判定较宽松（如空值不算invalid）
selectionStart/selectionEnd，但这已超出基础校验范畴。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
