novalidate仅禁用浏览器原生表单验证提示，不影响submit事件和JS的checkValidity()/reportValidity()调用；自定义提示需配合e.preventDefault()、手动校验及DOM操作实现。
novalidate 属性到底禁用了什么
novalidate 只是让浏览器跳过原生表单验证（比如 required、type="email"、pattern 等触发的红框 + 气泡提示），它不会阻止 submit 事件，也不会影响 JS 手动调用 checkValidity() 或 reportValidity()。很多人误以为加了 novalidate 就“彻底关掉验证”，结果 JS 里调 reportValidity() 还是弹原生气泡——因为这个方法本身不依赖表单是否带 novalidate，它只看约束状态。
想用 JS 控制气泡提示，得绕开 reportValidity()
浏览器原生气泡（HTML5 validation bubble）无法样式化、无法定位、无法延迟或取消，reportValidity() 是唯一能主动触发它的 API，但一旦触发就不可控。所以真要自定义气泡（比如 tooltip 形式、放在 input 旁边、带图标、可关闭），必须：
- 始终设
novalidate，确保用户点击提交时不会意外弹出原生气泡 - 监听
submit事件，e.preventDefault()阻止默认提交 - 手动检查每个字段（用
input.checkValidity()或正则/业务逻辑） - 自己创建 DOM 元素做提示，比如在
input旁插入<div class="tooltip">邮箱格式不对</div>
别试图用 setCustomValidity('') → setCustomValidity('错误信息') → reportValidity() 组合来“骗”出可控气泡——这只会触发原生气泡，且多次调用可能卡住。
customValidity 和 setCustomValidity 的真实作用
setCustomValidity() 不是用来显示提示的，它是给 checkValidity() 提供判断依据：当值为非空字符串时，checkValidity() 返回 false；为空字符串时返回 true。它只是“标记无效”，不是“显示提示”。常见误用：
立即学习“前端免费学习笔记（深入）”；
- 在
input的blur里调setCustomValidity('太短')—— 这会让后续checkValidity()失败，但用户看不到任何提示 - 以为调了
setCustomValidity()就自动弹窗 —— 实际不会，必须配reportValidity()才会弹，而那是原生气泡 - 提交前清空再设错：先
input.setCustomValidity('')，再input.setCustomValidity('密码需8位')，最后form.reportValidity()—— 结果还是原生气泡，位置固定在 input 底部
一个轻量自定义提示的实操写法
不用框架，纯 JS 做个贴近输入框的红色提示气泡：
function showFieldError(input, message) {
// 清除旧提示
const oldTip = input.parentNode.querySelector('.field-tip');
if (oldTip) oldTip.remove();
// 创建新提示
const tip = document.createElement('div');
tip.className = 'field-tip';
tip.textContent = message;
input.parentNode.appendChild(tip);
// 简单定位：紧贴 input 下方，左对齐
tip.style.cssText = `
position: absolute;
top: calc(100% + 4px);
left: 0;
background: #f44;
color: white;
padding: 4px 8px;
font-size: 12px;
border-radius: 2px;
`;
}
// 提交时
form.addEventListener('submit', e => {
e.preventDefault();
const email = form.querySelector('[name="email"]');
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)) {
showFieldError(email, '请输入有效邮箱');
email.focus();
}
});
注意：这种提示需要自己管理显隐，比如在 input 获得焦点或输入时删掉对应提示，否则容易残留。真正的难点不在“怎么弹”，而在“什么时候收”和“多个字段怎么不打架”。
