用 setCustomValidity() 可覆盖浏览器默认验证提示：传非空字符串触发自定义错误，传空字符串 '' 表示有效；需配合 checkValidity() 或 reportValidity() 重新校验，并监听 invalid 事件 preventDefault() 阻止原生提示，再写入自定义文案。
怎么用 setCustomValidity() 覆盖浏览器默认提示
HTML5 表单原生验证（如 required、type="email"）触发后，浏览器会弹出英文或系统语言的默认提示，无法直接修改文案。关键突破口是 setCustomValidity() —— 它能清空或覆盖验证状态和错误消息，但必须配合 checkValidity() 或事件手动触发。
注意：只要传入非空字符串，元素就视为“无效”；传入空字符串 '' 才表示“有效”，这是最容易卡住的点。
-
setCustomValidity('邮箱格式不对')→ 触发验证失败，显示该文字 -
setCustomValidity('')→ 清除自定义错误，恢复为“通过”状态（即使其他规则未满足，也要靠后续逻辑判断） - 不能只调用
setCustomValidity()就完事，必须让浏览器重新校验，比如监听input或blur后调用reportValidity()或提交时检查
监听 invalid 事件拦截默认气泡提示
invalid 是表单控件验证失败时**立即触发**的事件（在默认提示弹出前），可用 preventDefault() 阻止它，再执行自己的提示逻辑。但它不冒泡，也不能取消已弹出的原生提示（如果之前没阻止）。
典型场景：用户离开邮箱输入框时发现格式错，你不想让它弹系统提示，而是把文字写进旁边 里。
立即学习“前端免费学习笔记（深入）”；
document.getElementById('email').addEventListener('invalid', function(e) {
e.preventDefault();
document.querySelector('.error-email').textContent = '请填写正确的邮箱地址';
});
- 这个事件只在浏览器判定“无效”时触发，不会在你手动调用
setCustomValidity()后自动再发一次 - 如果你同时用了
setCustomValidity()，那invalid事件仍会触发（只要最终状态是无效），所以两个机制可以共存 - 别忘了在输入内容变合法时，主动清空错误提示并重置验证状态：
e.target.setCustomValidity('')
提交时统一校验 + 自定义提示聚合
用户点提交按钮时，往往需要一次性展示所有字段问题，而不是逐个触发气泡。这时不要依赖单个 invalid 事件，改用 form.checkValidity() 主动检查，并遍历所有 elements 收集错误。
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
const form = this;
const fields = form.querySelectorAll('input[required], input[type="email"]');
let hasError = false;
fields.forEach(field => {
if (!field.checkValidity()) {
hasError = true;
// 清除旧提示
field.nextElementSibling?.classList.remove('show');
// 写入新提示
const msg = field.validationMessage || '此项必填';
field.nextElementSibling?.textContent = msg;
field.nextElementSibling?.classList.add('show');
// 强制显示自定义错误（绕过原生）
field.setCustomValidity(msg);
} else {
field.setCustomValidity('');
}
});
if (hasError) return;
form.submit();
});
-
field.validationMessage是浏览器当前计算出的默认提示（如 “Please fill in this field”），可读但不可写，适合做兜底文案 - 务必在每次提交检查中重置所有字段的
setCustomValidity('')，否则上次留下的错误会持续干扰 - 移动端 Safari 对
reportValidity()支持不稳定，推荐用checkValidity()+ 手动控制更稳妥
为什么 reportValidity() 有时不生效
reportValidity() 本意是“触发校验并显示默认提示”，但它受两个隐藏条件制约：一是元素必须在 DOM 中且未被 display: none；二是部分浏览器（尤其是 iOS Safari）对动态插入的表单控件或 contenteditable 混用时会静默失败。
- 调用后没反应？先确认元素是否
disabled或hidden属性为真 - 想强制显示提示又不想用原生气泡？别依赖
reportValidity()，改用setCustomValidity('xxx')+checkValidity()组合 - 在 Vue/React 等框架中，确保调用时机在 DOM 更新完成之后（如 Vue 的
nextTick，React 的useEffect回调）
真正难的不是写出提示，而是让各种状态（输入中、失焦、提交）下验证逻辑不打架、提示不残留、用户体验不中断。多测几遍 iOS 和 Android 原生浏览器，比看文档管用。
