原生 stepMismatch 弹窗是浏览器对 number/range 输入值不满足 min+n×step 规则时触发的 UI 提示，非 JS 错误；需用 setCustomValidity 配合防浮点误差计算定制提示。
step 属性触发的原生弹窗是啥错误
浏览器在表单提交时，若 input 的当前值不满足 min + n × step（n 为整数）规则，会触发 validity.stepMismatch === true，并显示“值必须为 X 的倍数”这类原生提示——它不是 JS 抛出的错误，而是 checkValidity() 自动触发的 UI 反馈。
这个弹窗无法用 CSS 完全定制样式，且不同浏览器文案不一致（Chrome 说“值必须为 0.1 的倍数”，Safari 可能只写“无效值”），但它是可干预的起点。
- 只有
type="number"或type="range"才会触发该校验；type="text"写step完全无效 - 弹窗只在调用
form.submit()或用户点击原生提交按钮时出现；监听click后手动submit()也会触发 - 如果
input没设min，浏览器以 0 为起点计算合法值，容易导致value="1.5"在step="0.1"下被判定非法（因 1.5 ≠ 0 + n×0.1）
怎么让原生 stepMismatch 提示更友好
直接依赖默认弹窗体验差：文案固定、无上下文、不能加图标或链接。要用 setCustomValidity() 覆盖它，但得把握时机——太早覆盖会吞掉其他校验（如 required），太晚又错过触发点。
- 在
input的change或blur事件里调用setCustomValidity("")清空旧提示，再根据逻辑重设，避免残留 - 校验逻辑别只写
(value - min) % step === 0，浮点误差会让1.3 % 0.1返回0.09999999999999998；改用Math.abs(((value - min) / step) % 1) - 把
title属性设成和自定义提示一致的内容，部分浏览器在悬停时仍会显示它，算作兜底 - 示例：强制步长为 0.5 且最小值为 0 的输入框，可这样初始化提示：
input.addEventListener("change", () => { const val = input.valueAsNumber; const isValid = Math.abs(((val - 0) / 0.5) % 1) < 1e-10; input.setCustomValidity(isValid ? "" : "请输入 0.5 的倍数，如 0.0、0.5、1.0"); });
为什么 setCustomValidity 后原生弹窗不出现了
一旦对某个 input 调用了 setCustomValidity("xxx")，无论内容是否为空字符串，该字段就进入“自定义校验模式”。此后所有原生校验（包括 required、min、stepMismatch）都会被压制，只响应你传进去的字符串。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 传空字符串
setCustomValidity("")表示“通过”，但不会恢复原生提示；它只是清空自定义错误，让字段回到“未报错”状态 - 如果想保留
required的原生提示，又覆盖stepMismatch，就得手动检查所有条件：if (!input.value) { input.setCustomValidity("此项必填"); } else if (!isStepValid) { input.setCustomValidity("步长不对"); } else { input.setCustomValidity(""); } - 别在页面加载时就调用
setCustomValidity("xxx")；初始值合法时应保持空字符串，否则一进页面就报错
移动端 Safari 的 stepMismatch 弹窗特别难搞
旧版 Safari（≤15.4）对 step="any" 直接忽略，当成 step="1" 处理；对小数 step（如 "0.01"）也容易静默截断或四舍五入。更麻烦的是，它的原生弹窗不支持 reportValidity() 主动触发，只能靠表单 submit 驱动。
- 绕过方案：统一用整数单位，比如金额存“分”，
min="0"、step="1"、value="199"，显示时再除以 100 - 必须用小数时，
min和max末尾补零，如min="0.00"、max="100.00"、step="0.01"，减少 Safari 对隐式精度的误判 - 不要依赖
input.reportValidity()在 iOS 上主动唤起弹窗；改用form.reportValidity()触发整个表单校验，兼容性更好
真正难处理的不是弹窗本身，而是 step 校验背后那套“min + n × step”的隐式数学逻辑——它不声不响地决定了哪些值算合法，而浏览器连 warning 都不给你一个。
