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

Question

如果我单击电子邮件输入字段，该字段显示 "Enter Your Email"。这是我设定的。然而，在我输入的过程中，当验证检查没有完成时，它会说 'enter a valid email' 一些默认的东西，不是我写的。

万一密码错误，因为我使用的是.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 中，错误：包含字段错误消息的对象。

Answer 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

Answer 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 让我对这个答案产生了兴趣。

Answer 3

如果仅处理不接受消息参数的字符串类型错误，则语法有效。

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

Answer 4

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

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

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

How to Change Default Error Text in Yup/Formik?

javascript

typescript

reactjs

yup

formik