setcustomvalidity('')是唯一能清除错误状态并恢复表单字段通过状态的方法；传入null、undefined、0或' '均无效。
在 HTML5 表单中，setCustomValidity() 用于设置自定义校验错误信息；当传入空字符串 '' 时，才能清除错误状态、恢复表单字段的“通过”状态，使其可正常提交。
✅ 正确清除错误状态：必须传空字符串
setCustomValidity('') 是唯一能将字段从“校验失败”切回“校验通过”的方式。传入 null、undefined、0 或空白字符串（如 ' '）均无效，仍会被视为有错误。
-
✅ 正确写法：
input.setCustomValidity(''); -
❌ 错误写法：
input.setCustomValidity(null);、input.setCustomValidity(' ')、input.setCustomValidity();
? 结合事件动态管理校验状态
通常在校验逻辑中，先调用 setCustomValidity(msg) 设置错误，再在条件满足时清空它。推荐监听 input 或 blur 事件，实时更新状态：
const input = document.querySelector('#username');
input.addEventListener('input', () => {
if (input.value.length
<h3>⚠️ 注意与其他校验 API 的配合</h3>
<p>若同时使用 <code>reportValidity()</code> 或触发表单 <code>submit</code>，需确保所有字段都已清空错误。否则即使用户已修正输入，<code>checkValidity()</code> 仍返回 <code>false</code>，<code>submit</code> 也会被阻止。</p>
- 调用
form.reportValidity()前，确保每个字段都执行过setCustomValidity('') - 手动修复后，可调用
input.checkValidity()验证当前状态是否为true
? 调试小技巧
可通过控制台快速验证字段状态：
console.log(input.validationMessage); // 查看当前错误信息（清空后为空字符串） console.log(input.checkValidity()); // true 表示校验通过
如果 validationMessage 不为空，说明 setCustomValidity('') 没有被执行或执行时机不对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
