JavaScript中无法通过invalid事件直接自定义浏览器默认验证气泡，但可监听它并调用preventDefault()阻止原生提示，再结合setCustomValidity()和validity对象手动显示定制化错误信息。
JavaScript 中不能直接通过 invalid 事件“自定义提示内容”，因为该事件本身不提供修改默认浏览器验证气泡（tooltip）的能力；但你可以监听它来阻止默认行为、手动显示自定义提示（如 tooltip、文字、样式），并配合 setCustomValidity() 控制验证状态。
理解 invalid 事件的触发时机和限制
invalid 事件在表单控件（如 <input>、<select>）因内置验证失败（例如 required 未填、type="email" 格式错误）且尝试提交或调用 checkValidity() 时触发。但它有关键限制：
- 它不会冒泡，只能在目标元素上监听
- 它无法阻止默认验证提示（那个黄色小气泡），除非你提前干预验证逻辑
- 它不包含错误类型信息（比如是 required 还是 pattern 不匹配），需结合
validity对象判断
用 setCustomValidity() + invalid 事件实现可控提示
核心思路：用 setCustomValidity() 清空或设置自定义错误消息，并在 invalid 事件中阻止默认行为、展示你的 UI 提示：
- 给 input 添加
oninvalid="this.setCustomValidity('请输入邮箱')"或在 JS 中统一绑定 - 监听
invalid，调用event.preventDefault()阻止原生提示弹出 - 在事件处理函数中添加 class（如
error）、插入<span class="error-msg">…</span>或调用 tooltip 库 - 注意：
setCustomValidity('')表示“有效”，setCustomValidity('xxx')表示“无效”且消息为 xxx
推荐做法：结合 input/blur 实时反馈 + submit 拦截
仅靠 invalid 事件体验不佳（只在提交或失焦校验时触发）。更实用的方式是：
立即学习“Java免费学习笔记（深入）”；
- 监听
input或blur，调用checkValidity()并根据validity属性（如validity.valueMissing、validity.typeMismatch）动态显示对应提示 - 在表单
submit事件中统一校验，event.preventDefault()并高亮所有无效字段 - 把自定义提示文案写在 data 属性里（如
data-msg-required="必填项"），便于复用和多语言
一个小而完整的例子
HTML：
<input type="email" required data-msg-required="邮箱不能为空" data-msg-type-mismatch="请输入有效的邮箱地址">
<span class="custom-error"></span>
JS：
const input = document.querySelector('input');
const errorEl = document.querySelector('.custom-error');
input.addEventListener('invalid', e => {
e.preventDefault(); // 阻止默认气泡
const validity = input.validity;
let msg = '';
if (validity.valueMissing) msg = input.dataset.msgRequired;
else if (validity.typeMismatch) msg = input.dataset.msgTypeMismatch;
errorEl.textContent = msg;
input.classList.add('has-error');
});
// 失焦时也校验，提升体验
input.addEventListener('blur', () => {
if (!input.checkValidity()) input.dispatchEvent(new Event('invalid', { cancelable: true }));
});
