Валидация форм это часть фронтенд-разработки
Ранее выходил пост про библиотеку 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')), });
`{({ handleSubmit, handleChange, values, errors, }) => ( ///компонент формы React, который дополнительно обрабатывается через Formik )
Однако, не стоит зацикливаться на одном инструментарии. Когда форма одно или используется единый компонент во многих местах сайта, то лучше применить vee-validate``