html表单国际化必须显式标记所有可读文本节点，包括label文字、input placeholder、title、alt、select的每个option、button和submit按钮的textcontent与value、svg text及aria-label等，禁用原生验证并接管错误提示，切换语言时只更新文本属性、保留表单状态，语言包需扁平结构、加载失败须降级，服务端下拉数据应按accept-language返回。
HTML表单国际化不是加个 lang 属性就完事——它必须覆盖标签、占位符、验证消息、下拉选项、日期/数字格式，且不能丢表单状态或触发 XSS。
data-i18n 怎么打才不漏字段
所有可读文本节点都得显式标记，不能靠父容器继承。常见漏点包括：
-
label的文字、input的placeholder、title、alt都要单独加data-i18n或带后缀的属性（如data-i18n-placeholder） -
select的每个option必须遍历设置，不能只给select加一个data-i18n就指望自动翻译子项 -
button和input[type="submit"]要同时处理textContent和value属性（有些老浏览器用value渲染按钮文字） -
svg <text></text>、aria-label、aria-placeholder这类辅助属性也得配data-i18n-aria-label等专用属性 - 别在
<script></script>或<pre class="brush:php;toolbar:false;"></pre>里加data-i18n——这些内容不参与渲染，加了无效
表单验证消息怎么同步多语言
原生 required、pattern 错误提示是浏览器内置的，无法直接替换；必须禁用并接管验证逻辑。
- 用
setCustomValidity()+reportValidity()手动触发错误，传入t('form.email_invalid')这样的翻译函数结果 - 第三方库如
Yup或VeeValidate支持传入翻译函数，但注意：验证规则定义和错误消息模板必须分离，不能把中文文案硬写进 schema - 避免用
innerHTML注入错误提示——若翻译值含用户输入内容，可能引发 XSS；优先用textContent+ 安全插值（如t('form.max_length', { max: 50 })） - 表单提交前统一校验时，错误信息容器（如
<div class="error">）也要带 <code>data-i18n，否则切换语言后旧错误仍显示英文切换语言时表单状态怎么保住
重载页面最省事，但用户体验断层；局部刷新又容易丢数据或格式错乱。
- 绝对不要调用
window.location.reload()——会清空所有输入、滚动位置、已选文件、富文本编辑器内容 - 只更新文本类属性：
textContent、placeholder、title、aria-label；跳过value（保留用户输入）、checked、selected等状态属性 - 动态生成的内容（如 JS 弹出的
alert()、Toast）需封装统一的t()函数，内部查当前激活语言包，而非依赖 DOM 属性 - 日期/数字字段（如
input[type="date"]、Intl.NumberFormat实例）必须重建：切换后调用new Intl.DateTimeFormat(lang)，旧实例不会自动更新 - 如果用了
moment.js，记得同步执行moment.locale(lang)；纯原生Intl则需缓存并替换所有已创建的格式化器
语言包加载失败或键缺失怎么办
网络抖动、路径写错、键名不一致都会导致文案空白，这是线上最常被忽略的致命问题。
-
fetch('./locales/en.json')失败时，必须有降级逻辑：先 try/catch 捕获网络错误，再检查response.ok，最后 fallback 到内置默认语言对象（非空字符串） - 语言包结构必须扁平，键名严格对齐：
zh.json里有"form.submit"，en.json里也得有同名键，哪怕值为空字符串，否则t('form.submit')返回undefined - 首次加载语言时，优先顺序应为：
URL 参数 ?lang=ja→localStorage.getItem('preferred-lang')→navigator.language（注意截取主语言码，'zh-CN'→'zh'）→ 最终 fallback 到'en' - 不要把语言包全量预加载（如一次性 fetch 所有 JSON），首屏体积暴涨；按需加载即可，但得确保关键表单字段的语言资源在初始化时已就绪
最容易被绕过的点是：服务端返回的下拉选项数据（比如国家列表）没做语言适配，前端却在渲染时强行翻译键名，结果出现 “options_country_us” 这种裸键；前后端必须约定好，选项文案由后端按
Accept-Language返回，前端只做透传渲染。 - 绝对不要调用
