setCustomValidity()仅存储错误文案，不触发校验或提示；需配合reportValidity()手动显示，且合法时必须设为空字符串''才能重置验证状态。
直接用 setCustomValidity() 就能替换默认提示，但只设不触发、不清空、不配合事件监听，它就完全没反应。
为什么 setCustomValidity() 调了却没提示
这个方法只是“存个错误文案”，不校验、不弹窗、不改样式。浏览器根本不会主动显示它，除非你手动触发验证或用户提交表单。
- 只写
input.setCustomValidity('用户名太短')→ 状态变了，但 UI 零反馈 - 必须紧接着调
input.reportValidity()才会立刻弹出自定义气泡 - 或者等表单 submit 时自动触发（前提是没加
novalidate） - 如果之前设过非空字符串，之后又没清空，哪怕输入合法，字段也一直卡在“自定义无效”状态
怎么在失去焦点时显示自定义提示
适合做即时反馈，比如邮箱输错后离开输入框就提示，而不是等提交才爆。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 监听
blur事件，不是input—— 否则每打一个字都校验，体验差 - 校验逻辑跑完后，先设文案，再调
reportValidity()强制弹出 - 别忘了在合法时传
''（空字符串），null或undefined都无效
const email = document.getElementById('email');
email.addEventListener('blur', () => {
if (!email.value) {
email.setCustomValidity('邮箱不能为空');
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)) {
email.setCustomValidity('邮箱格式不对');
} else {
email.setCustomValidity(''); // ✅ 唯一有效的重置方式
}
email.reportValidity(); // 立即显示，不管是否在 submit 中
});
提交时统一收集所有错误并自定义展示
用户点提交，你不想让它一个个弹气泡，而是把全部错误聚合到页面顶部或字段旁的 <span class="error"></span> 里。
立即学习“前端免费学习笔记（深入）”；
- 阻止默认提交：
e.preventDefault() - 用
form.checkValidity()先整体判断是否通过 - 遍历
form.elements，对每个!el.checkValidity()的元素，读取el.validationMessage（就是你设的setCustomValidity()文案） - 注意：如果某个字段没设过
setCustomValidity()，validationMessage是浏览器默认文案；设过又清空了，它就是空字符串
form.addEventListener('submit', (e) => {
if (!form.checkValidity()) {
e.preventDefault();
const errors = [];
for (const el of form.elements) {
if (el.checkValidity() === false && el.validationMessage) {
errors.push(el.name + '：' + el.validationMessage);
}
}
document.querySelector('.form-errors').textContent = errors.join('；');
}
});
容易被忽略的关键细节
setCustomValidity('') 不是“可选操作”，它是让字段回归正常验证链的唯一出口。只要设过一次非空值，后续所有原生行为（包括 required、type="email"）都会被覆盖，直到你亲手把它清掉。另外，invalid 事件虽然能 preventDefault() 拦住默认气泡，但它只在浏览器判定失败时触发一次，不会因为你改了 value 就反复来 —— 所以实时反馈必须靠 input 或 blur 主动校验，不能等它。
