如何更改 Yup/Formik 中的默认错误文本？答案

【问题标题】：How to Change Default Error Text in Yup/Formik?如何更改 Yup/Formik 中的默认错误文本？
【发布时间】：2020-06-06 23:04:14
【问题描述】：

如果我单击电子邮件输入字段，该字段会显示“输入您的电子邮件”。这是我设置的。但是，在我打字的过程中，当验证检查未完成时，它会说“输入有效的电子邮件”，这是默认设置，不是我写的。

如果密码错误，由于我使用的是 .matches()，我会在屏幕上打印出我想要的文本。我怎样才能对电子邮件也这样做？

这是我的 Yup 对象：

const schema = Yup.object({
  email: Yup
    .string()
    .email()
    .required('Please Enter your Email'),
  password: Yup
    .string()
    .required('Please Enter your password')
    .matches(
      /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
      "Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and one special case Character"
    )
});

这就是我的 Formik 组件的样子：

 <Formik
            initialValues={{ email: '', password: '' }}
            onSubmit={(values, actions) => {
              setTimeout(() => {
                alert(JSON.stringify(values, null, 2));
                actions.setSubmitting(false);
              }, 1000);
            }}
            validationSchema={schema}
          >
            {props => {
              const {
                values: { email, password },
                errors,
                touched,
                handleChange,
                isValid,
                setFieldTouched
              } = props;
              const change = (name: string, e: { persist: () => void; }) => {
                e.persist();
                handleChange(e);
                setFieldTouched(name, true, false);
              };
              return (
                <form style={{ width: '100%' }} onSubmit={_ => alert('Submitted!')}>
                  <TextField
                    variant="outlined"
                    margin="normal"
                    id="email"
                    fullWidth
                    name="email"
                    helperText={touched.email ? errors.email : ""}
                    error={touched.email && Boolean(errors.email)}
                    label="Email"      
                    value={email}
                    onChange={change.bind(null, "email")}
                  />
                  <TextField
                    variant="outlined"
                    margin="normal"
                    fullWidth
                    id="password"
                    name="password"
                    helperText={touched.password ? errors.password : ""}
                    error={touched.password && Boolean(errors.password)}
                    label="Password"
                    type="password"
                    value={password}
                    onChange={change.bind(null, "password")}
                  />
</Formik>

在 Formik props 中，errors : 一个包含字段错误信息的对象。

【问题讨论】：

标签： javascript reactjs typescript formik yup

【解决方案1】：

将您首选的错误字符串添加到您的电子邮件架构中：

email:  Yup
.string()
.email('this will be displayed when email is wrong')
.required('this will be displayed when empty')

codesandbox 示例：https://codesandbox.io/s/blissful-shape-lijo2

【讨论】：

【解决方案2】：

我发现接受的答案是正确的，但在某些情况下可能不完整。将光标放在一个字段中并跳出它可以触发 Yup "type error"。

默认的 Yup 类型错误是冗长且对用户不友好的事情；)

我会将 AndreasT 的答案扩展为：

email:  Yup
.string()
.email('this will be displayed when email is wrong')
.required('this will be displayed when empty')
.typeError('A number is required')

Here is the article 让我开始接受这个答案。

【讨论】：

【解决方案3】：

对于使用test 方法的自定义验证：

serialNumber: Yup.string()
  .max(19, 'invalid')
  .required('required')
  .test({
    name: 'serialNumberErr',
    message: i18next.t('serialNumberErr'),
    test: (value) => customValidator(value),
  }),

【讨论】：

【解决方案4】：

如果只处理不接受以下语法的消息参数的字符串类型错误。

signatureImage: Yup.string().required( 'Live Signature is required' ).typeError( 'Live Signature is required' ),

【讨论】：