type="number"的min/max校验需提交或调用checkvalidity()才触发，step影响有效性，range的value为字符串须转数字，setcustomvalidity会屏蔽原生提示，服务端初始值超限时需主动reportvalidity。
input type="number" 的校验边界容易被忽略
浏览器对 type="number 的原生校验只检查输入是否为有效数字格式，不自动触发 min/max 范围验证——除非用户提交表单或显式调用 checkValidity()。这意味着用户可以输入 999999999999，即使 max="100"，只要没提交或没聚焦失焦，表单不会报错。
常见错误现象：用户输入超限值后直接点提交，部分浏览器（如 Safari）可能静默截断，Chrome 则会高亮并阻止提交，但控制台无提示，开发者误以为“没生效”。
- 必须设置
min和max属性才启用范围校验；仅靠 JS 监听input事件无法替代原生约束 -
step默认为 1，若设为step="0.1"，则 1.05 会被视为无效（需精确匹配步进），这是最容易踩的坑 - 移动端软键盘行为受
inputmode="decimal"影响更大，但该属性不参与校验逻辑
range 类型滑块的 value 值始终是字符串
type="range" 的 value 属性永远返回字符串，哪怕你设置了 min="0"、max="100"。直接拿它和数字比较（如 if (el.value > 50)）会触发字符串字典序比较，导致 "100" > "50" 为 false。
使用场景：实时显示滑块数值、联动其他控件、条件禁用按钮等，都依赖准确的数值判断。
- 务必用
Number(el.value)或parseFloat(el.value)转换，避免隐式转换陷阱 -
range元素没有required属性意义——它总有默认值（value或min），所以无法用原生必填校验 - 改变
value后需手动触发input事件，否则监听器收不到更新（例如通过 JS 设置el.value = "75"后，需el.dispatchEvent(new Event('input'))）
自定义校验提示覆盖浏览器默认消息
原生 setCustomValidity() 一旦设为空字符串以外的值，就会屏蔽所有内置校验提示（包括 min/max 错误），且只有在调用 reportValidity() 或表单提交时才显示。
性能影响小，但逻辑易混乱：比如先调用 el.setCustomValidity("不能小于0")，再调用 el.setCustomValidity("")，才能恢复原生校验；漏掉后者会导致后续所有校验失效。
- 建议统一用
el.validationMessage读取当前错误信息，而不是自己拼接提示 - 在
input事件中调用setCustomValidity需谨慎——高频输入下反复设置会影响响应速度，更适合放在blur或submit时做终验 - 若同时用了
pattern和min，自定义错误会完全接管，原生范围提示不再出现
JavaScript 校验与 HTML 属性的协同关系
HTML 属性（min/max/step）和 JS 的 checkValidity() 是绑定的：修改属性值后，无需重新绑定事件，checkValidity() 会立即反映新规则。但 JS 手动赋值 value 不会触发属性校验重算——必须由用户交互或显式调用。
容易被忽略的细节：当服务端返回的初始值超出前端 min/max 时，元素渲染后 validity.rangeOverflow 或 validity.rangeUnderflow 已为 true，但页面无视觉反馈，直到用户操作或 JS 主动检查。
- 初始化后建议立即执行
el.reportValidity()检查服务端数据合法性，尤其用于编辑表单 -
step为"any"时，validity.stepMismatch永远为 false，但此时type="number"失去精度控制能力 - 不要依赖
change事件做实时校验——它只在失焦时触发，应优先用input+blur组合
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
