stepmismatch校验触发条件是调用checkvalidity()或表单提交时，按(v-min)%step≈0（浮点安全比较）判断；min未设则以0为基准，且type="number"参与校验而type="range"不参与。
step 属性触发 stepMismatch 校验的条件是什么
浏览器只在调用 checkValidity() 或表单提交时检查 step 合法性，不实时拦截输入。校验逻辑是判断当前值 v 是否满足 (v - min) % step ≈ 0（浮点安全比较），而不是“v 是 step 的整数倍”。
若 min 未设置，基准默认为 0；若 min="1" 且 step="0.3"，合法值从 1.2 开始（因为 1 不满足模条件），但部分浏览器可能允许手动输入 1，点击箭头时才跳到最近合法值。
校验失败时，input.validity.stepMismatch 为 true，且 reportValidity() 会显示类似 “Please enter a valid value. The two nearest valid values are 1 and 2” 的提示。
为什么设了 step="0.1" 还会校验失败
根本原因是浮点精度问题：0.1 在二进制中无法精确表示，导致 0.3 实际存储为 0.30000000000000004，进而使 (0.3 - 0) % 0.1 !== 0。这种误差在以下场景放大：
- 用户粘贴或输入看似合法的值（如
"1.3"），但解析后因 JS 浮点行为失准 -
value初始值硬编码为"1.3"，而浏览器内部计算时已偏离格点 - 用 JS 手动做
parseFloat(val) + 0.1累加，误差逐次累积
更稳妥的做法是：金额类统一用整数单位（如“分”），设 step="1"；或所有值显式对齐，例如初始化时用 el.value = (Math.round(parseFloat(el.value) / 0.01) * 0.01).toFixed(2)。
type="number" 和 type="range" 的 step 校验差异
type="number" 的 step 参与完整约束校验：手动输入、粘贴、箭头调节、提交都会触发 stepMismatch 检查；而 type="range" 的 step **仅控制滑块停靠位置，不参与任何表单验证**——无论拖到哪，validity.stepMismatch 始终为 false，checkValidity() 总返回 true。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
这意味着：
- 对
range，必须靠 JS 主动校验（如监听input事件，用Math.abs((val - min) % step) > 1e-10判断） - 对
number，不能依赖step防非法输入，用户仍可粘贴"2.15"（step="0.1"下），只是提交时被拦 -
range的valueAsNumber始终自动对齐到最近合法格点，无需 JS 修正；number的value则可能长期处于非法状态
step="any" 和不写 step 的区别在哪
语义和验证行为完全不同：
- 不写
step：浏览器按默认值处理（number默认step="1"），所有校验照常执行，1.5在未设step时直接被拦 -
step="any"：明确告知浏览器跳过stepMismatch校验，只保留数字格式检查（如拒绝"abc"，但接受"1.23456789"）
注意：step="any" 不等于“无限制”，它仍受 min/max 约束，且 pattern 是字符串匹配，与 step="any" 并存时可能产生冲突（例如 pattern="\d+\.\d{2}" 要求两位小数，但用户输 "1.234" 仍能通过 step 校验）。服务端永远要二次校验数值范围与精度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
