不能直接修改required的原生提示；浏览器对文案、样式、时机、位置均不可控，且setCustomValidity需配合reportValidity或submit事件才能生效，清空状态必须用严格空字符串''。
required的原生提示能直接改吗
不能。浏览器对 required 触发的默认提示（比如 Chrome 的“请填写此字段”、Safari 的“Field is required”）文案、样式、弹出时机、位置全部不可控，且不同浏览器差异明显。你没法用 CSS 覆盖，也不能通过属性赋值修改——required="false" 这类写法反而会让它继续生效。
setCustomValidity 为什么设了没反应
因为它只存字符串，不触发提示。常见翻车点：
-
setCustomValidity()调用后没配合reportValidity()或表单submit事件，等于白设 - 清空时用了
null、undefined或' '（空格），结果控件持续报错——必须是严格空字符串'' - 元素被设为
disabled或不在<form>内，setCustomValidity完全失效 - 同时保留
required属性，但 JS 没覆盖所有校验分支（比如用户删光内容后没重设状态），浏览器可能先走原生逻辑，跳过你的自定义文案
怎么让自定义提示真正生效
推荐做法：移除 required，完全由 JS 控制。关键动作要连贯：
- 在
blur或input事件里做校验，先调input.setCustomValidity('')清空旧状态 - 再根据逻辑设新文案，比如
input.setCustomValidity('邮箱不能为空') - 需要立即反馈时，紧跟一句
input.reportValidity()（注意：它会阻断提交并弹气泡） - 表单
submit事件中，用form.checkValidity()判断，失败则e.preventDefault()+form.reportValidity()
示例片段：
立即学习“前端免费学习笔记（深入）”；
const emailInput = document.querySelector('#email');
emailInput.addEventListener('blur', () => {
if (!emailInput.value.trim()) {
emailInput.setCustomValidity('邮箱不能为空');
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput.value)) {
emailInput.setCustomValidity('请输入有效的邮箱格式');
} else {
emailInput.setCustomValidity(''); // ✅ 必须是 ''
}
});
移动端 iOS Safari 的特殊处理
键盘「完成」按钮点击后不触发 blur，导致提示卡住。解决方法：
- 监听
input和change事件，而非只靠blur - 在
focusout或touchend后手动补调input.reportValidity() - 避免依赖「失焦即校验」的单一路径，提交前务必再做一次
checkValidity()确保兜底
最易被忽略的是：清空状态那句 setCustomValidity('') 必须出现在每次合法输入之后，哪怕只是空格或换行——浏览器不会帮你自动识别“用户已填”，它只认你最后一次传进去的字符串。
