Валидация форм на веб-страницах - достаточно сложная задача, которая требует много сил и времени. 

Для сложных проверок валидации полей форм (кроме проверки обязательного поля) без Javascript не обойтись. 

Наиболее частые задачи валидации форм, с которыми могут возникнуть сложности

+ Проверки на валидность email, телефона, введенной ссылки

+ Проверка, что пользователь прикрепил файл к полю формы

+ Валидация сложных выпадающих списков с поиском или автокомплитом.

+ и.т.д.

В этой статье я бы хотел рассказать про одно из решений, которое использую сам для валидации форм на проектах написанных на Vue.js. 

Конечно, мы можем разрабатывать свои правила для валидации полей форм и писать алгоритмы с полного нуля. Но, повторюсь, валидация - это достаточно сложная задача, которая требует написания большого количества логики.

Самый простой способ, как можно упростить этот процесс валидации - использование готовых библиотек. 

Библиотека валидации данных для Vue.js

Об одной из таких библиотек мне бы и хотелось рассказать в этом материале. Библиотека называется vee-validate. Это одно из самых распространенных решений для Vue.js для валидации веб-форм.

Официальный сайт библиотеки:

https://vee-validate.logaretm.com/v4/

Мой видеокурс по работе с этой библиотекой:

https://webkyrs.info/category/vee-validate-4-validatsiia-form-vue-3

Для Vue 3 версии нужно использовать vee-validate 4.

Какие преимущества использования этого решения?

  • Благодаря этому инструменту, мы работаем с данными формы комплексно, как с единым целым.
    Есть данные и мы просто навешиваем уже готовые варианты проверок на эти данные.
    Можно валидировать как отдельные поля форм, так и рассматривать форму как единое целое и валидировать ее как отдельный объект. 
  • Для вывода ошибок, нам не нужно писать сложную логику. Достаточно просто написать несколько строк куда выводить ошибки валидации и vee validate выведет все за нас.
  • Vee validate можно интегрировать с другой популярной Javascript библиотекой для валидации данных, которая называется yup. Используя эту интеграцию, можно значительно упростить написание правил валидаций.

Если вы разрабатываете свои формы (анкеты) на фреймворке Vue.js предлагаю вам более подробно остановиться и рассмотреть эту библиотеку для валидации данных.