validationMessage 是表单控件的只读属性，返回 checkValidity() 失败时的默认错误提示字符串；它不触发或控制浏览器原生验证气泡，该气泡由 submit 或 reportValidity() 自动触发且无法动态干预。
validationMessage 是什么，它和表单验证气泡有什么关系
validationMessage 是 HTML 表单控件（如 <input>、<select>、<textarea>）的只读属性，返回当前元素因 checkValidity() 失败而生成的默认错误提示字符串。它本身**不触发也不控制浏览器原生气泡（即 tooltip-style validation bubble）**——那个气泡由浏览器在 submit 事件或 reportValidity() 调用时自动显示，无法直接“动态控制”。想用 validationMessage 来影响气泡，本质是误用了它的定位。
为什么直接读取 validationMessage 后调用 reportValidity() 仍不显示气泡
常见错误是这样写：
const input = document.querySelector('input[required]');
console.log(input.validationMessage); // 可能为空字符串
input.reportValidity(); // 气泡没出来？
原因有三：
-
validationMessage只在checkValidity() === false时才有意义；若字段值合法（比如用户刚输完），validationMessage就是空字符串，此时reportValidity()不会触发气泡 - 气泡只在表单提交上下文（如点击
<button type="submit">）或显式调用reportValidity()且元素处于“可报告状态”时出现；如果元素被disabled、hidden或不在文档流中，气泡会被抑制 - 某些浏览器（如 Safari）对非用户交互触发的
reportValidity()（例如脚本中直接调用）会静默忽略气泡，仅返回false
真正可控的替代方案：绕过原生气泡，用自定义 UI + validationMessage 做反馈
如果你需要“动态控制气泡”（比如延迟显示、加图标、绑定到按钮旁），唯一可靠路径是禁用原生气泡，自己实现提示层。步骤如下：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 给表单加
novalidate属性：<form novalidate>，彻底关闭浏览器默认验证行为 - 监听
submit事件，手动调用每个字段的checkValidity() - 对校验失败的字段，读取其
validationMessage，然后渲染自定义气泡（例如用position: absolute的<div>贴在按钮下方） - 避免在
input事件里频繁读validationMessage——它只在校验失败时有效，且频繁调用checkValidity()可能影响输入性能
示例关键逻辑：
form.addEventListener('submit', e => {
e.preventDefault();
const input = form.querySelector('input[required]');
if (!input.checkValidity()) {
// 此时 input.validationMessage 才有值
showCustomBubble(input, input.validationMessage);
}
});
按钮旁气泡的定位难点和兼容性注意点
把提示气泡精准“锚定”在提交按钮旁，不是靠 validationMessage，而是靠 DOM 定位计算。容易出问题的地方：
- 按钮若使用
display: flex或float，其getBoundingClientRect()返回的位置可能受父容器 transform 影响，需逐级向上检查 offsetParent - 移动端 Safari 对
position: fixed气泡在键盘弹起时偏移严重，建议改用position: absolute并监听resize重算 -
validationMessage内容不可靠：不同浏览器返回值不同（Chrome 返回 "Please fill out this field."，Firefox 是 "请填写此字段。"），不能用于判断错误类型，仅适合直接展示
真正在意气泡行为细节时，validationMessage 只是个辅助文本源，控制权始终在你自己的 JS 和 CSS 手里。
