34 подписчика

Валидация форм это часть фронтенд-разработки

Ранее выходил пост про библиотеку Yup с которой делаю валидацию. Время идет, но пока использую эту библиотеку и вот несколько причин:

1. Изоляция бизнес-логики. Изолирование валидации от кода компонента - думаю это правильное решение. Если форм несколько и они разного функционала: первая форма обратной связи, а вторая фильтр каталога в интернет-магазине - то логично разбить логику по файлам, чтобы потом, если в форме добавятся/удалятся поля, то мы смогли легко это дело модернизировать

2. Объектная работа. То есть сама функция представляет из-себя форму, которую мы получаем на вход и на выход, мы отправляем ошибки, которые заметил Yup в данных. Подробный код

const signupSchema = Yup.object().shape({

nickname: Yup.string().required(t('form.errors.required')).min(3, t('form.errors.range')).max(20, t('form.errors.range')),

password: Yup.string().required(t('form.errors.required')).min(6, t('form.errors.min')),

passwordConfirm: Yup.string().required(t('form.errors.required')).oneOf([Yup.ref('password'), null], t('form.errors.passwordMustMatch')),

});

<Formik

initialValues={{ nickname: '', password: '', passwordConfirm: '' }}

onSubmit={handleFormSubmit}

validationSchema={signupSchema}

validateOnChange={false}

{({

handleSubmit, handleChange, values, errors,

}) => (

///компонент формы React, который дополнительно обрабатывается через Formik

)

</Formik>

Однако, не стоит зацикливаться на одном инструментарии. Когда форма одно или используется единый компонент во многих местах сайта, то лучше применить vee-validate

1 минута

29 августа 2024