必须手动调用setcustomvalidity('')才能清除错误状态，传入非空字符串（含空格）或null/undefined均无效；需在每次校验通过时显式清空，否则错误持续存在。

setCustomValidity 设置后表单一直报错不恢复

调用 setCustomValidity 后，即使用户改了输入，浏览器也不会自动清空错误状态——这是最常被忽略的点。它不会像原生校验（比如 required）那样随输入变化自动重置，必须手动干预。

• 只要 setCustomValidity 传入非空字符串（哪怕只是空格），该字段就始终处于“无效”状态，checkValidity() 返回 false，提交也会被拦截
• 清空的唯一方式是再次调用 setCustomValidity('')（注意：必须是空字符串 ''，不是 null、undefined 或空格）
• 不能依赖 input 或 change 事件自动清除——得你自己判断何时“已合法”，再主动清空

什么时候该调用 setCustomValidity('')？

不是一输入就清，也不是只在提交时清。关键看校验逻辑是否通过。常见场景：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

• 用户输入后实时校验（如邮箱格式）：在 input 事件里，先验证，通过则 inputEl.setCustomValidity('')，否则 inputEl.setCustomValidity('邮箱格式不正确')
• 失去焦点时校验（blur）：同样需在验证通过后立刻清空，否则下次聚焦再失焦仍报错
• 提交前统一校验：若某字段通过了自定义规则，必须显式设为空字符串，否则 form.reportValidity() 仍会失败

容易踩的坑：空字符串 vs 空格 vs null

只有 setCustomValidity('') 能真正恢复有效状态。其他写法都无效：

• setCustomValidity(null) → 浏览器当作字符串 'null'，字段持续 invalid
• setCustomValidity(' ')（一个空格）→ 非空字符串，依然 invalid
• delete inputEl.validationMessage → 只读属性，删不掉，也不影响状态
• 只调用 inputEl.value = '' → 不触发状态重置，错误提示还在

配合 reportValidity() 使用时的注意事项

如果表单里混用了原生校验（如 required）和 setCustomValidity，reportValidity() 会合并所有错误。但一旦某个字段被 setCustomValidity 设为非空，它就压倒原生规则——哪怕你删光了内容，只要没手动清空，它就不算“通过”。

• 推荐在 submit 事件里统一处理：对每个字段先校验逻辑，通过则 setCustomValidity('')，失败则设对应提示
• 不要在 submit 里只做校验却不调用 setCustomValidity('') —— 这会导致后续多次提交都卡在同一个旧错误上
• 调试时可临时加 console.log(inputEl.validity.valid) 和 console.log(inputEl.validationMessage) 确认状态是否真的清除了

清空这事看着简单，但实际出问题往往是因为忘了“每次通过都要显式清”，而不是“只在出错时设”。校验逻辑越复杂，越要确保每个合法分支末尾都有 setCustomValidity('')。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！