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

Question

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

如果密码错误，由于我使用的是 .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 道具中，错误：包含字段错误消息的对象。

Answer 1

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

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

代码和盒子示例：https ://codesandbox.io/s/blissful-shape-lijo2

Answer 2

我发现接受的答案是正确的，但在某些情况下可能不完整。将光标放在一个字段中并从它跳出会触发是的“类型错误”。

默认的 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')

这是让我转向这个答案的文章。