空字符串不会自动清除HTML5表单自定义校验错误状态，必须手动调用setCustomValidity('')才能恢复校验通过；若字段含required属性，则空值会触发原生校验失败，此时setCustomValidity('')无效。
在 HTML5 表单自定义校验中，空字符串本身不会自动清除错误状态或恢复表单的可提交性——关键在于**手动重置校验状态并确保 setCustomValidity('') 被正确调用**。只要字段值为空（''），且你主动清除了自定义错误信息，浏览器就会认为该字段通过校验（前提是未设置其他约束如 required）。
空值时必须调用 setCustomValidity('')
HTML5 的自定义校验依赖 setCustomValidity() 方法：传入非空字符串表示校验失败；传入空字符串（''）才表示校验通过。即使输入框内容为空，若之前设过错误信息（如 setCustomValidity('不能为空')），它仍保持无效状态，表单无法提交。
常见做法是在 input 或 blur 事件中统一处理：
- 先判断当前值是否为空或满足业务规则
- 若满足（例如：值为空、或符合格式），立即调用
inputElement.setCustomValidity('') - 若不满足，调用
inputElement.setCustomValidity('错误提示')
注意 required 属性与空值的冲突
如果元素同时设置了 required，那么空字符串会直接触发原生必填校验失败，此时 setCustomValidity('') 不起作用——浏览器优先执行 required 校验。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
解决方法有两种：
-
移除
required，完全交由 JS 控制（推荐用于复杂逻辑） -
保留
required，但仅对非空值做自定义校验：即只在校验“非空但格式错误”时调用setCustomValidity()；当值为空时，不干预（让浏览器处理），或在提交前手动跳过该字段校验
提交前主动清理并验证
用户可能跳过失焦事件（比如直接点提交），因此建议在 form.submit 或 form.addEventListener('submit', ...) 中统一重置所有自定义校验：
- 遍历表单内所有带自定义校验的字段
- 对每个字段：若值为空，调用
field.setCustomValidity('') - 再调用
form.checkValidity()判断是否整体有效 - 若无效，调用
event.preventDefault()阻止提交，并聚焦首个错误项
一个最小可用示例
<form id="myForm">
<input type="text" id="phone" placeholder="请输入手机号">
<button type="submit">提交</button>
</form>
<script>
const phone = document.getElementById('phone');
phone.addEventListener('input', () => {
const val = phone.value.trim();
if (val === '') {
phone.setCustomValidity(''); // ✅ 清空错误标记
} else if (!/^1[3-9]\d{9}$/.test(val)) {
phone.setCustomValidity('手机号格式不正确');
} else {
phone.setCustomValidity(''); // ✅ 格式正确也必须清空
}
});
document.getElementById('myForm').addEventListener('submit', (e) => {
// 提交前兜底清理（防漏）
if (phone.value.trim() === '') {
phone.setCustomValidity('');
}
if (!e.target.checkValidity()) {
e.preventDefault();
phone.focus();
}
});
</script> 
