Yup/Formik에서 기본 오류 텍스트를 변경하는 방법?

Yup/Formik에서 기본 오류 텍스트를 변경하는 방법?

전자 메일 입력 필드를 클릭하면 "전자 메일 입력" 필드가 표시됩니다.이건 제가 정해준 거예요.그러나 입력하는 동안 유효성 검사가 수행되지 않으면 '유효한 전자 메일 입력'이라고 표시됩니다. 기본값은 제가 작성한 것이 아닙니다.

비밀번호가 잘못된 경우 .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 특성에서 오류 : 필드의 오류 메시지를 포함하는 개체입니다.

저는 승인된 답변이 정확하지만 경우에 따라 불완전할 수 있다는 것을 발견했습니다.커서를 필드에 놓고 탭으로 이동하면 Yup "유형 오류"가 트리거될 수 있습니다.

기본 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')

여기 이 대답에 저를 흥분시킨 기사가 있습니다.

전자 메일 스키마에 기본 오류 문자열을 추가합니다.

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

메시지 매개 변수를 허용하지 않는 문자열 형식 오류만 처리하는 경우 구문은 다음과 같습니다.

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

사용자 지정 유효성 검사의 경우test방법:

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

  fullname: yup.string()
           .min(3)
           .required('This is rendered if you try to submit an empty email field'),
  email: yup.string()
        .email('This shows when you input an invalid email addres')
        .required('This is rendered if you try to submit an empty email field'),
  password: yup.string()
        .required('This is rendered if you try to submit an empty email field')
        .matches(
           /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/,
           "This is rendered if the password does not meet requirement"),
  confirmPassword: yup.string()
        .oneOf([yup.ref('password'), null], "Password mismatch")
        .required('This is rendered if you try to submit an empty email field')

언급URL : https://stackoverflow.com/questions/60356911/how-to-change-default-error-text-in-yup-formik