9

我有这段代码。我想根据用户的语言环境添加错误消息，但是如果字段填写不正确，会抛出错误

[缺少“en.login.emailRequiredError”翻译] [缺少“en.login.passRequiredError”翻译]

const schema = yup.object().shape({
  email: yup
      .string()
      .email(i18n.t('login.emailSpellError'))
      .required(i18n.t('login.emailRequiredError')),
  password: yup
      .string()
      .matches(/^((?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,15})$/i, i18n.t('login.passSpellError'))
      .required(i18n.t('login.passRequiredError')),
});

当我将 i18n.t('login.passRequiredError') 放入渲染方法进行检查时，它工作正常，但它不适用于 yup。有什么建议么？提前致谢

4

3 回答 3

12

在您的架构中，替换：

.email(i18n.t('login.emailSpellError'))

和

.email('login.emailSpellError')

然后在您的渲染方法中：

{t(`form.errors.${form.errors.email}`)}

这假设您的翻译文件有这样的条目：

"form": { "errors": {"login": {"emailSpellError": "Your email is invalid"}}}}

这里的目标是将 t() 方法移动到您的渲染方法中，并在那里进行所有翻译。

于 2019-06-21T02:55:56.250 回答
7

是的验证方法，

// You define the key mentioned in the translation file, in my example 'Invalid email' and 'Required'  

    let ForgotPasswordSchema = yup.object().shape({
      email: yup.string().email('Invalid email').required('Required'),
    });

在渲染方法中，

// As per your definition

isInvalid={(!!errors.email) && this.context.t(!!errors.email)}
invalidText={(errors.email) && this.context.t(errors.email)}

翻译文件

export const translations = {
  "cy": {
    "Required":"Gofynnol",
    "Invalid email":"Nid yw'r cyfeiriad ebost yn ddilys",
}
 };
于 2019-07-30T09:44:15.927 回答
2

一个解决方案是创建一个返回验证模式的函数。然后在您的组件中调用该函数并记住结果。这样，您可以保证即时计算验证消息的翻译。

这里的另一个优势是您可以在消息源处进行翻译。

// Translation file
{
  "validation.invalid-email": "Email is invalid",
  "validation.field-required": "Field is required"
}


// Validation schema
const forgotPasswordSchema = () => {
  return yup.object().shape({
    email: yup
      .string()
      .email(i18n.t('validation.invalid-email'))
      .required(i18n.t('validation.field-required')),
  });
};


// Your component
const FormComponent = () => {
  const schema = useMemo(() => forgotPasswordSchema(), [i18n.language]); // NB: `[i18n.language]` is optional and `[]` will suffice depending on how you're handling language change

  return <>...</>;
}
于 2021-11-24T14:25:12.190 回答