required属性无法自定义校验提示文案，唯一可控方式是用setCustomValidity()替换原生提示，并需配合input/blur事件实时清空；invalid事件可拦截默认气泡，submit时应调用checkValidity()聚合校验。
required属性本身不支持自定义提示文案
浏览器对 required 的校验失败提示（如“请填写此字段”）是硬编码在用户代理中的，由系统语言、lang 属性和内部翻译表共同决定。你不能通过 title、placeholder、CSS 或 HTML 属性修改它——这些只影响 tooltip 或占位内容，和验证气泡完全无关。
常见翻车点：
- 给
<input required title="必填">加title→ 提示仍是“请填写此字段”，title只在鼠标悬停时显示 - 用
input:invalid::after伪元素插入文字 → 无法覆盖原生气泡，且页面刚加载就触发:invalid，所有必填框全红 - 在
submit事件里e.preventDefault()后没调form.checkValidity()→ 验证被静默跳过，根本不会弹任何提示
用 setCustomValidity() 替代原生提示
真正可控的方式是接管验证状态：调用 setCustomValidity() 设置错误文案，并配合输入事件实时清空。它不是“增强”，而是“替换”——一旦设了非空字符串，原生 required 提示就不再出现。
关键操作逻辑：
立即学习“前端免费学习笔记（深入）”；
-
setCustomValidity('')表示校验通过；传任意非空字符串（如'手机号不能为空'）即标记为失败 - 必须在每次
input或blur时重置：否则旧错误会残留，用户输对了也还显示上次的错文案 - 保留
required属性没问题，但初始化时就得先调一次el.setCustomValidity('')，否则和原生校验冲突 - 移动端 Safari 对
reportValidity()响应不稳定，建议统一在form.submit事件中触发校验
示例片段：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<input type="tel" id="phone" required>
<script>
const phone = document.getElementById('phone');
phone.setCustomValidity(''); // 初始化
phone.addEventListener('input', () => {
if (!/^1[3-9]\d{9}$/.test(phone.value)) {
phone.setCustomValidity('请输入正确的11位手机号');
} else {
phone.setCustomValidity(''); // 必须清空
}
});
</script>
监听 invalid 事件拦截默认气泡
invalid 事件在浏览器判定字段无效的瞬间触发，且在默认气泡弹出前——这是唯一能用 e.preventDefault() 拦住原生提示的时机。
注意边界条件：
- 它不冒泡，也不能取消已弹出的气泡（如果之前没监听到）
- 即使你用了
setCustomValidity()，只要最终状态是无效，invalid仍会触发 - 适合单字段即时反馈场景，比如把错误文案写进旁边的
<span class="error"></span> - 不适合聚合多字段错误，因为它是逐个触发的，不是提交时统一响应
典型用法：
document.getElementById('email').addEventListener('invalid', e => {
e.preventDefault();
document.querySelector('.error-email').textContent = '邮箱格式不正确';
});
表单提交时统一校验并聚合错误
用户点击提交按钮时，往往需要一次性展示所有问题字段，而不是挨个弹气泡。这时别依赖单个 invalid 事件，改用 form.checkValidity() 主动检查，再遍历 form.elements 收集错误。
实操要点：
-
form.checkValidity()只返回布尔值，不触发提示；要弹气泡得用form.reportValidity() - 若禁用原生校验（
form.noValidate = true），则required仅剩语义作用，全部逻辑靠 JS 控制 - 屏幕阅读器支持需同步设置
aria-invalid="true"和aria-describedby指向错误文案容器 - WebView（如旧版微信内置浏览器）可能直接忽略
required，必须 fallback 到手动判空
最易被忽略的是：自定义提示文案后，aria-invalid 不会自动同步更新，必须手动维护 —— 否则读屏器读不到错误状态。
