Я использую Formik для создания простой формы регистрации с email и password входами. Я хотел бы иметь возможность отображать пользователя в режиме реального времени, если его пароль соответствует некоторому стандартному набору правил, например
- Требуется
- Минимальная длина символа
- Должен содержать не менее 1 ди git
- Должен содержать не менее 1 специального символа
Kindof, как в этом примере:
Однако проверка через Yup и, действительно, все документы проверки Formik, кажется, заполняют объект errors prop , который показывает только одну ошибку проверки поле, а не сообщать, какая комбинация в настоящее время проходит / не проходит.
Например, объект errors {email: "Required", password: "Needs to be at least X characters"} может ссылаться на короткий пароль "abc", но также без цифр или специальных символов.
Хотя это возможно! Мы можем отправить <Formik> пользовательскую validate функцию, которая заполняет errors реквизит всеми правилами:
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validate={values => ({
email: {
required: ...,
isEmail: ...
},
password: {
required: ...,
meetsMinLength: ...,
containsDigit: ...,
containsSpecial: ...,
}
})}
validateOnChange={true}
>
{formik => (
... render form, inputs, errors, etc ...
... "formik.errors" looks like "{email: {...}, password: {...}}" ...
)}
</Formik>
Это работает, однако Мне действительно нравится, насколько декларативным является Yup , и я хотел бы продолжать его использовать. Можно ли сформулировать Yup Schema, который будет сообщать обо всех комбинациях ошибок, как эта пользовательская функция validate?