О валидации полей форм на фреймворке 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 окажется для вас полезным. Лично мне он экономит колоссальное количество времени. Давайте приступать