setCustomValidity() 仅存储错误文案而不触发提示，需配合 submit、reportValidity() 或失焦等验证时机才能显示；必须用空字符串清空状态，否则持续报错。
setCustomValidity() 本身不显示提示，只设文案；要让用户看见，必须触发验证（如点提交、调 reportValidity()）。
为什么 setCustomValidity('错误') 后没弹窗
它只是“存了个字符串”，不是“立刻报错”。浏览器只在以下时机读取这个字符串并展示：表单 submit、手动调 reportValidity()、或用户聚焦后失焦再提交。如果只写了 input.setCustomValidity('手机号格式不对') 就停手，那等于白设。
- 常见翻车：在
input事件里设了错误文案，但没绑定submit或没调reportValidity()，结果用户点了提交按钮，啥也没弹出来 - 更隐蔽的问题：表单加了
novalidate属性，或 input 被设为disabled，这时setCustomValidity()完全失效 - 检查方式：打印
input.validationMessage，它应该实时等于你传进去的字符串；如果不是，说明没生效
怎么让自定义文案真正覆盖浏览器默认提示
只要 validationMessage 非空，浏览器就放弃原生文案（比如 “Please fill in this field”），改用你设的。但注意：这个“覆盖”是抢占式，不是替换式——你得自己管好清空时机。
- 输入为空时：
input.setCustomValidity('用户名不能为空') - 输入合法时：
input.setCustomValidity('')—— 必须是空字符串''，不是null、undefined或' '（带空格） - 如果用了
required或pattern，它们仍会参与校验，但最终显示的文案只取决于最后一次setCustomValidity()的值 - 别在
submit事件里才开始设文案——此时浏览器可能已弹出默认提示；应在blur或input时就动态设置
如何同步更新页面上的 DOM 提示（不只是气泡）
浏览器气泡提示不可控，但你可以自己在输入框下方加一行红字。关键在于把 setCustomValidity() 和 DOM 更新绑在一起，并用 input.validity.customError 判断是否该显示。
立即学习“前端免费学习笔记（深入）”；
- 给每个 input 配一个
<span class="error"></span> - 在
blur事件中：input.addEventListener('blur', () => { if (!/^\d{11}$/.test(input.value)) { input.setCustomValidity('请输入11位手机号'); errorSpan.textContent = '请输入11位手机号'; errorSpan.classList.add('show'); } else { input.setCustomValidity(''); errorSpan.textContent = ''; errorSpan.classList.remove('show'); } }); - 别忘了：
input.validity.customError为true才表示当前被自定义规则拦住，可用来控制 DOM 显示逻辑
reportValidity() 和 checkValidity() 到底该用哪个
checkValidity() 只返回 true 或 false，适合做条件判断；reportValidity() 才会真正唤起带文案的气泡提示，并阻止表单提交（如果失败）。
- 想让用户立刻看到错误？必须用
input.reportValidity() - 想在提交前统一校验所有字段并高亮第一个错误？可以遍历 input，对第一个
!input.checkValidity()的调input.reportValidity() -
reportValidity()是HTMLInputElement方法，不能在div或form上直接调 - 如果用 JS 提交（如
form.requestSubmit()），它会自动触发验证；但form.submit()不会，此时得自己先form.reportValidity()
最容易被忽略的是：自定义文案一旦设过非空字符串，就会一直卡在 invalid 状态，直到你显式调一次 setCustomValidity('')。很多“输对了还报错”的问题，根子都在这里。
