required属性本身不支持自定义错误提示文案，其提示由浏览器根据系统语言自动生成，无法通过html或css修改；如需自定义，须用javascript调用setcustomvalidity()并配合input事件实时清空状态。
required 属性本身不支持自定义错误提示文案，浏览器原生校验失败时显示的提示（如“请填写此字段”）由用户代理（即浏览器）控制，无法通过 HTML 或 CSS 直接修改。
为什么 required 无法直接设置错误文字
这是 HTML5 表单约束验证（Constraint Validation API）的设计决定：required 是布尔属性，仅声明“该字段必填”，不承载文案逻辑。所有校验提示均由浏览器根据当前系统语言、lang 属性和内部翻译表生成，开发者无权覆盖。
常见误解是以为加 title 或 placeholder 能影响提示，实际无效 —— 它们只影响 tooltip 或输入框占位符，与校验弹窗无关。
用 setCustomValidity() 替代原生提示
真正可控的方式是绕过原生 required 提示，改用 JavaScript 主动触发自定义校验。关键点：
-
setCustomValidity()接收字符串：传空字符串（''）表示通过校验；传非空字符串（如'手机号格式不正确'）则标记为失败，并在reportValidity()或提交时显示该文案 - 必须配合
addEventListener('input')或'blur'实时清空旧错误（否则错误状态会残留） - 若仍想保留
required的语义和基础行为，可保留该属性，但需在 JS 中调用element.setCustomValidity('')初始化，否则它会和原生校验冲突
示例：
<input type="email" id="email" required><script>
const el = document.getElementById('email');
el.addEventListener('input', () => {
if (el.value && !el.value.includes('@')) {
el.setCustomValidity('邮箱地址必须包含 @ 符号');
} else {
el.setCustomValidity(''); // 清除错误，否则后续 submit 仍失败
}
});
</script>
兼容性与体验细节
setCustomValidity() 在所有现代浏览器中可用（Chrome 10+、Firefox 4+、Safari 10.1+、Edge 12+），但要注意：
- 移动端 Safari 对
reportValidity()的调用时机较敏感，建议在form.submit事件中统一校验，而非依赖按钮 click - 如果禁用原生校验（
form.noValidate = true），则required属性仅起语义作用，完全靠 JS 控制，此时setCustomValidity()是唯一出口 - 屏幕阅读器对自定义错误的支持依赖于
aria-invalid和aria-describedby的正确配对，单纯设setCustomValidity()不足以保证无障碍
别忽略 :valid / :invalid 伪类的副作用
即使用了 setCustomValidity()，CSS 伪类仍会响应元素的校验状态。例如：
input:invalid { border-color: #f00; } —— 这个样式会在 setCustomValidity('xxx') 后立即生效，但也会在刚进入页面、字段为空且带 required 时就触发（因为此时它天然 invalid）。这常导致“未输入就红边”的误伤。
稳妥做法是加一层 JS 控制 class：
el.addEventListener('input', () => {
el.classList.toggle('touched', el.value.length > 0);
});
/* 然后 CSS 写 .touched:invalid { ... } */
否则，用户还没碰字段，就看到红色边框，体验很突兀。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
