chrome/firefox 中 input[type="date"] 的校验提示总是英文，因浏览器原生提示由 ui 层硬编码，不随页面 lang 或系统语言切换，且 html 标准未定义本地化接口。
Chrome/Firefox 中 input[type="date"] 的校验提示为什么总是英文？
因为浏览器原生校验提示（如 “Please enter a date.” 或 “The specified value does not conform to the required format.”）由浏览器 UI 层硬编码，**不随页面 lang 属性或系统语言自动切换**，也无法通过 JS 修改提示文案本身。这不是 bug，是规范行为 —— HTML 标准未定义校验消息的本地化接口。
绕过原生校验、用 JS 自定义提示的最小可行方案
核心思路：禁用原生校验（novalidate 或 setCustomValidity("")），改用 JS 拦截提交并手动校验。关键点在于兼容不同浏览器对 input.valueAsNumber 和 input.valueAsDate 的支持差异：
-
input.value始终返回 ISO 格式字符串（如"2024-03-15"），这是最稳定字段，应优先校验它是否符合YYYY-MM-DD格式且为有效日期 -
input.valueAsDate在 Chrome/Edge 中可靠，在 Firefox 旧版本可能返回null即使输入合法，不建议作为唯一判断依据 - 校验失败时调用
input.setCustomValidity("请输入有效的日期")，再触发input.reportValidity()—— 此时提示即为你指定的中文文案
保留原生 UI 但隐藏默认提示的 CSS 折中法
某些场景下仍想用原生日期选择器 UI，又不愿看到英文提示。可尝试用 CSS 隐藏默认气泡（仅限部分浏览器）：
input:invalid::-webkit-validation-bubble { display: none; }
input:invalid::-webkit-validation-bubble-arrow { display: none; }
但注意：
• 这仅对 WebKit 内核（Chrome/Safari）生效，Firefox 完全不支持
• 隐藏后用户失去任何视觉反馈，必须配合 JS 校验补足提示
• ::-webkit-validation-bubble 是非标准伪元素，未来可能被移除
服务端校验不可省略，前端提示只是体验优化
无论前端怎么处理国际化提示，input[type="date"] 的值始终可被绕过（如直接修改 DOM、curl 提交）。所以：
- 后端必须独立校验日期格式与逻辑有效性（例如检查是否在允许范围内、是否为工作日等）
- 服务端返回的错误响应应明确标注字段（如
{"field": "birth_date", "message": "出生日期必须为过去的有效日期"}），前端据此更新对应 input 的setCustomValidity - 不要依赖
required或min/max属性做业务规则判断，它们仅作基础约束
真正麻烦的不是提示文案翻译，而是不同浏览器对 valueAsDate 的实现差异和移动端原生 picker 的不可控性 —— 这些地方没标准，只能靠实测加降级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
