setCustomValidity() 必须配合 reportValidity() 或表单提交才能生效，空字符串表示校验通过；title 属性仅作 tooltip 与验证无关；失焦提示需监听 blur 并调用 checkValidity() 和 reportValidity()；:user-invalid 伪类更适合视觉反馈。
input 的 setCustomValidity() 怎么用才生效
直接调用 setCustomValidity() 不会立刻显示提示，必须配合表单提交或 reportValidity() 触发校验。浏览器只在用户交互（如提交、失焦）或显式调用时渲染错误消息。
- 错误提示文字由
setCustomValidity("xxx")设置，空字符串""表示“校验通过”，此时错误状态清除 - 仅设置不触发：必须紧接着调用
reportValidity()才能强制显示提示（适合手动校验场景） - 若依赖原生提交行为，确保
input在<form>内，且没加novalidate
为什么 title 属性不起作用
title 不是自定义错误提示的正确方式——它只作为 tooltip 显示，和表单验证完全无关。浏览器忽略 title 对 setCustomValidity() 的影响，也不会在验证失败时展示它。
- 常见误区：给
input加title="请输入邮箱"，以为能替代错误文案 → 实际无效 - 真正起作用的是
setCustomValidity()设置的字符串，以及元素当前是否处于:invalid状态 -
title仅用于无障碍提示或悬停浮层，和验证逻辑无绑定
如何让错误提示在失焦时出现（非提交时）
原生行为默认只在提交时批量校验，要实现“输完就提示”，得监听 blur 并手动触发校验。
const input = document.querySelector('input[type="email"]');
input.addEventListener('blur', () => {
if (!input.checkValidity()) {
input.setCustomValidity('邮箱格式不正确');
input.reportValidity(); // 关键：主动触发显示
} else {
input.setCustomValidity(''); // 清除错误状态
}
});
-
checkValidity()返回布尔值，不显示提示；reportValidity()才真正弹出气泡 - 必须先调用
setCustomValidity()，再调用reportValidity()，顺序不能反 - 注意重复触发：如果用户反复失焦，每次都会弹提示，可加简单防抖或状态标记
样式控制与兼容性要注意什么
错误提示气泡本身无法用 CSS 定制（各浏览器实现不同），但你可以用 :invalid 和 :user-invalid 伪类控制输入框样式，辅助用户识别问题。
立即学习“前端免费学习笔记（深入）”；
-
:invalid在校验失败时始终存在，但可能在未交互前就生效（如初始为空的必填项） -
:user-invalid更精准：仅当用户已修改过该字段且当前无效时才匹配（推荐用于视觉反馈） - Safari 对
reportValidity()的气泡位置支持较弱，有时偏移或截断，避免长文本 - 移动端 Chrome / Safari 的气泡显示逻辑略有差异，建议真机测试
复杂点在于：气泡文案完全由 JavaScript 控制，但显示时机、位置、持续时间都不可编程干预。别试图用 tooltip 库覆盖原生气泡——容易和原生校验状态不同步，反而导致体验断裂。
