如何本地化或删除AWS Amplify Vue构建的Cognito登录页必填字段提示

你遇到的「Please fill out this field.」是浏览器原生的HTML5表单必填校验提示，不属于Amplify组件的内置文本资源，因此修改Amplify I18n配置不会生效。该提示的默认语言跟随浏览器/操作系统的语言设置，不由前端业务代码的I18n直接控制。

方案1：自定义原生校验提示文案 #

通过Amplify Authenticator的字段插槽自定义输入框，绑定invalid事件手动设置校验提示文本，可配合你现有的I18n配置实现多语言适配：

<template>
  <amplify-authenticator>
    <amplify-sign-in slot="sign-in" hide-sign-up="true">
      <!-- 自定义用户名输入框 -->
      <template v-slot:username-field="{ field, validationErrors }">
        <amplify-input
          v-bind="field"
          required
          @invalid="(e) => e.target.setCustomValidity(I18n.get('请填写此字段'))"
          @input="(e) => e.target.setCustomValidity('')"
        />
        <div v-if="validationErrors.length" class="error-text">{{ validationErrors[0] }}</div>
      </template>
      <!-- 自定义密码输入框 -->
      <template v-slot:password-field="{ field, validationErrors }">
        <amplify-input
          v-bind="field"
          type="password"
          required
          @invalid="(e) => e.target.setCustomValidity(I18n.get('请填写此字段'))"
          @input="(e) => e.target.setCustomValidity('')"
        />
        <div v-if="validationErrors.length" class="error-text">{{ validationErrors[0] }}</div>
      </template>
    </amplify-sign-in>
  </amplify-authenticator>
</template>

同时在你的I18n词汇表中补充对应语言的词条即可：

export const extraVocabularies = {
  'ja-JP': {
    '请填写此字段': 'このフィールドを入力してください',
    // 其他业务词条
  },
};
I18n.putVocabularies(extraVocabularies);
I18n.setLanguage('ja-JP');

方案2：直接禁用原生必填校验 #

如果不需要原生提示，可给Amplify内部的表单添加novalidate属性彻底关闭该提示，后续可自行基于Amplify返回的校验错误做自定义提示：

// 页面mounted生命周期中添加属性
mounted() {
  const authForm = document.querySelector('amplify-authenticator form');
  authForm?.setAttribute('novalidate', true);
}

内容的提问来源于stack exchange，提问作者jpskgc