Содержание
О валидации полей форм на фреймворке Vue
Валидация полей форм - очень частая задача. При работе с валидацией элементов на фреймворке Vue у нас есть несколько вариантов:
- Разрабатывать свою систему валидации
- Воспользоваться уже готовыми библиотеками
Разрабатывать свое решение - очень не простая задача. Сама задача валидации предполагает написание большого количество логики и кода. Намного проще взять уже готовое решение и начать использовать его.
Библиотека Vee validate
Одной из таких библиотек для фреймворка Vue является библиотека Vee validate. На своей практике приходилось работать с разными инструментами для валидации Vue, но vee validate мне показалось наиболее удачным и популярным решением.
В этой серии видео мы с вами рассмотрим, как работать с этой библиотекой. Мы будем рассматривать четвертую версию vee-validate 4. Она предназначается для Vue 3. Если вы работаете с проектом на Vue 2, то можете использовать 3 или 2 версию vee-validate.
Установка
Официальный сайт библиотеки vee-validate вы можете видеть сейчас в адресной строке:
https://vee-validate.logaretm.com/v4
Для установки этой библиотеки в наш проект, мы переходим на главную страницу этого проекта, затем переходим в раздел "Get started".
Здесь есть два способа установки - через пакетный менеджер или через CDN сервер.
Давайте рассмотрим пример установки с помощью пакетного менеджера.
У меня используется пакетный менеджер npm, соответственно я копирую строку и вставляю ее в терминал:
npm i vee-validate --save
Теперь все наши библиотеки установлены, и в следующих видео мы с вами начнем работать с ними.
Что будет в этом видеокурсе
В этом видеокурсе мы рассмотрим
- Посмотрим как настраивать валидацию для основных элементов форм
- Каким образом можно выводить сообщение об ошибке
- Как указать более одного правила валидации для одного поля
- Как можно переиспользовать правила валидации в разных компонентах
- Связка с библиотекой yup
- и другие вопросы
Надеюсь этот курс для работы с библиотекой vee validate 4 окажется для вас полезным. Лично мне он экономит колоссальное количество времени. Давайте приступать
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Email - зарегистрироваться / войти