setCustomValidity只设提示文本，不触发验证；需配合reportValidity()或表单submit才能显示。重置须传空字符串''，非null/undefined/空格。
setCustomValidity 为什么调用后没反应
常见现象是写了 input.setCustomValidity('不能为空') 却发现提交时提示还是浏览器默认文案，甚至完全没提示。根本原因：这个方法只设置“验证失败时的提示文本”，但不会自动触发验证；必须配合 checkValidity() 或表单提交事件，或手动调用 reportValidity() 才能显示。
- 只调用
setCustomValidity()不会立刻弹出提示，也不会影响validity.valid状态，除非你同时清空了错误信息（传空字符串）或设为非空字符串并触发验证 - 若之前调用过
setCustomValidity('xxx')，之后又没重置，该字段会一直视为“自定义无效”，哪怕输入合法 —— 这是最大陷阱 - 正确节奏是：
input.setCustomValidity(errorMsg)→input.reportValidity()（手动触发）或等表单 submit 时自动触发
如何正确重置自定义验证状态
很多人卡在“输对了却还显示红框和旧提示”，是因为没把自定义错误清空。关键点：传入空字符串 '' 才代表“验证通过”，传 null 或 undefined 无效，传 ' '（空格）也会被当错误处理。
- 每次输入变化后应重新评估并重置：
input.addEventListener('input', () => { if (input.value.trim() === '') { input.setCustomValidity('用户名不能为空'); } else if (input.value.length < 3) { input.setCustomValidity('至少3个字符'); } else { input.setCustomValidity(''); // ✅ 唯一正确的重置方式 } }); - 不要依赖
input.checkValidity()来清空状态 —— 它只读，不修改validationMessage - 如果用了
required属性，又手动调setCustomValidity('')，浏览器仍可能因 required 规则报错，需确保逻辑覆盖所有分支
与 reportValidity() 和 checkValidity() 的配合关系
checkValidity() 只返回布尔值，不触发 UI 提示；reportValidity() 才真正显示气泡提示（含你设的 setCustomValidity 文本），且会阻止表单提交（如果验证失败）。
- 表单提交前可主动校验并提示：
form.addEventListener('submit', (e) => { if (!input.checkValidity()) { e.preventDefault(); input.reportValidity(); // ✅ 弹出自定义提示 } }); - 单独调
input.reportValidity()会立即显示提示，适合在按钮点击等非 submit 场景使用 - 注意兼容性：
reportValidity()在 IE 中完全不支持，Safari 10.1+、Chrome 56+、Firefox 53+ 支持
中文提示在不同浏览器里显示异常怎么办
部分旧版 Chrome 或移动端 WebView 会对非 ASCII 字符做截断或乱码，不是编码问题，而是浏览器对 validationMessage 的渲染限制。
立即学习“前端免费学习笔记（深入）”；
- 避免在提示中使用 emoji、全角标点或过长句子（建议 ≤ 30 字）
- 不要用 HTML 标签（如
）——setCustomValidity()只接受纯文本，标签会被原样显示 - 若需强调关键词，只能靠文字本身，例如：‘密码必须包含数字’比‘必须包含数字’更可靠
- 真遇到奇怪换行/省略，可临时加零宽空格
\u200B干扰截断逻辑（非常规手段，慎用）
setCustomValidity 就等于白写。 
