setCustomValidity 不生效的根本原因是它仅在表单提交或调用 checkValidity()/reportValidity() 时触发校验，而非设值即显；须确保控件可验证、未禁用，并用空字符串 ” 重置，配合 reportValidity() 显示提示。
setCustomValidity 不生效？检查表单控件是否在提交流程中
很多情况下 setcustomvalidity 看似调用了但没弹出提示，根本原因是：它只在表单提交（或手动触发 checkvalidity()）时才参与校验逻辑，不是“设了就立刻显示”。如果你只是赋值后没触发验证，浏览器压根不会理你。
- 必须确保目标元素是表单内可验证的控件（
<input>、<select>、<textarea>），且没有disabled或readonly - 调用
setCustomValidity('错误信息')后，得让浏览器走一次验证——比如用户点提交按钮，或代码里主动调用form.checkValidity()或input.reportValidity() - 如果控件本身有原生约束（如
required、type="email"），自定义错误会和它们共存，但只有当前控件校验失败时才会显示你设的提示
空字符串清不掉错误？记得重置为 ” 而不是 null 或 undefined
setCustomValidity 的设计很直接：只要参数是非空字符串，控件就视为无效；传入空字符串 '' 才表示“通过校验”。传 null、undefined 甚至 ' '（空格）都会被当成错误信息，导致一直报错。
- 正确重置方式：
input.setCustomValidity('') - 常见翻车写法：
input.setCustomValidity(null)→ 浏览器显示 “null” 字符串作为错误提示 - 建议在输入事件里动态清理：
input.addEventListener('input', () => input.setCustomValidity(''))，避免残留旧错误
reportValidity() 和 checkValidity() 有什么区别？选对触发方式才看得见提示
checkValidity() 只返回布尔值，不触发 UI 提示；reportValidity() 才真正唤起浏览器默认的气泡错误提示（含你用 setCustomValidity 设的文案）。很多人写了 setCustomValidity 却忘了调 reportValidity，结果验证逻辑跑通了，用户啥也看不到。
- 想单纯判断有效性（比如做条件分支）→ 用
checkValidity() - 想让用户立刻看到错误提示 → 必须用
reportValidity()，它内部会调用checkValidity()并展示 UI - 注意：
reportValidity()是HTMLInputElement方法，不能在普通div上调用
兼容性与样式限制：别指望改气泡位置或加图标
这个 API 的错误提示完全由浏览器渲染，目前所有主流浏览器都不支持自定义气泡样式、位置或内容结构。你能控制的只有那行文字内容——其余全是黑盒。
- Chrome / Edge / Safari 都支持
setCustomValidity+reportValidity()，Firefox 也早支持了，不用垫片 - 无法用 CSS 选中那个气泡，
::-webkit-validation-bubble等伪类早已被废弃且无标准 - 如果需要高度定制提示（比如带 icon、放在字段下方），就得放弃原生提示，自己实现 DOM 层面的错误展示逻辑
事情说清了就结束。最常卡住的地方其实是：设了错误信息、没触发验证、又忘了清空字符串——三步里漏一步，整个流程就静默失效。
