Как быстро валидировать формы во Vue? 20 минутный пошаговый план.

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

Итак, погнали!

В этой статье вы узнаете:

1. Что такое валидация форм;
2. Виды валидации форм;
3. Как валидировать формы во Vue.

Что такое валидация форм?

Валидация — это подтверждение указанных требований.

Если говорить проще, то это инструкция, которой должен придерживаться пользователь при заполнении формы. Она позволит защитить ваше приложение от неожиданных или даже вредоносных данных. То есть, вы будете уверенны, что юзер отправит валидную почту вместо набора символов или валидный номер телефона вместо имени и тд.

Типы и виды валидации форм

Давайте начнём с типов валидации. Существует их всего два:

• Проверка на стороне клиента — это проверка, которая происходит в браузере, прежде чем данные будут отправлены на сервер. Это удобнее, чем проверка на стороне сервера, так как даёт мгновенный ответ. Её можно разделить на:
  JavaScript проверку, которая выполняется с использованием JavaScript. Полностью настраиваемая.
  Встроенная проверка формы, используя функции проверки формы HTML5. Для этого обычно не требуется JavaScript. Встроенная проверка формы имеет лучшую производительность, но она не такая настраиваемая, как с использованием JavaScript.
• Проверка на стороне сервера — это проверка, которая возникает на сервере после отправки данных. Серверный код используется для проверки данных перед их сохранением в базе данных. Если данные не проходят проверку валидности, ответ отправляется обратно клиенту, чтобы сообщить пользователю, какие исправления должны быть сделаны. Проверка на стороне сервера не такая удобная, как проверка на стороне клиента, поскольку она не выдаёт ошибок до тех пор, пока не будет отправлена вся форма. Тем не менее, проверка на стороне сервера — это последняя линия защиты вашего приложения от неправильных или даже вредоносных данных. Все популярные серверные фреймворки имеют функции для проверки и очистки данных (что делает их безопасными).

В реальном мире разработчики склонны использовать комбинацию проверки на стороне клиента и сервера.

Проверка на стороне клиента

Продолжив тему валидации на стороне клиента, можно отметить три вида: мгновенная, по потере фокуса и по отправке формы.

• Мгновенная — срабатывает в том момент, когда пользователь вводит данные. Проверка запускается на каждый введенный символ.
• При потере фокуса — как только поле теряет фокус, например, если пользователь выбрал другое поле, запускается валидация.
• При отправке формы — валидация срабатывается в том момент, когда происходит отправка данных на сервер, то есть по нажатию на кнопку.

Конечно, предпочтительнее использовать Мгновенную валидацию, так как она сразу будет сообщать юзеру, что что-то пошло ни так. Чем раньше интерфейс сообщает об ошибке, тем лучше — пользователю проще вернуться и исправить ошибку.

Как валидировать формы с помощью Vee-Validate?

На сегодняшний день, лучшим валидатором форм для vue, как мне кажется, является Vee-Validate.

Он позиционирует себя как фреймворм с кучей фичей:

• Поддержка vue 3
• Поддержка SSR
• Валидация на основе шаблонов, привычная и простая в настройке.
• 🌍 Поддержка i18n с уже переведенными ошибками на 40+ языков.
• 💫 Поддержка асинхронных и пользовательских правил.
• 💪 Написан на TypeScript.
• Не имеет зависимостей в виде сторонних библиотек.

Скажу сразу, будем работать с vue второй версии. Конечно, хотелось бы показать на примере vue 3, но я думаю, что еще мало кто успел мигрировать на эту версию.

Итак, давайте потихоньку переключимся на написание кода. И поступим вот как:

• Склонируйте себе пример проекта.

git clone https://github.com/denisoed/how-to-validate-form-in-vue.git

• Гляньте код, чтобы частично понимать о чём будет идти речь.
• А дальше я расскажу всё, что там написал.

Показывать буду на примере Nuxt.js. Если вы еще не знакомы с ним, предлагаю почитать мою предыдущую статью https://maddevs.io/blog/how-to-configure-ssg-and-ssr-on-nuxt

Как мы помним, все плагины в nuxt должны храниться в папке /plugins, в корне проекте. Зайдите в эту папку и откройте файл vee-validate.js.

import Vue from 'vue';
import {
  ValidationObserver,
  ValidationProvider,
  extend,
  configure
} from 'vee-validate';
import {
  required,
  email,
  confirmed
} from 'vee-validate/dist/rules';
extend('required', required);
extend('email', email);
extend('confirmed', {
  ...confirmed,
  message: 'Passwords Don`t Match.'
});
configure({
  classes: {
    invalid: 'is-invalid'
  }
});
Vue.component('ValidationObserver', ValidationObserver);
Vue.component('ValidationProvider', ValidationProvider);

В этом файле будут располагаться все правила и настройки. Vee-validate предлагает более 25ти готовых правил. В этот список входит: валидация пароля, почты, числовых значений, изображений и тд. Вы так же можете добавлять и свои, кастомные правила, что мы сейчас и попробуем сделать.

Кастомный валидатор

На самом деле добавить собственное правило не сложно. Давайте напишем валидатор для телефона, который будет выводить ошибку “The Phone field must contain only numbers and dashes.” если в поле ввести любые другие символы кроме цифр и тире.

extend('phone', {
  validate: value => {
    if (!value) return true
    const regex = /^[0-9\s- +]*$/g
    return Boolean(value.match(regex))
  },
  message: 'The Phone field must contain only numbers and dashes.'
});

Давайте разбираться с кодом выше.

Чтобы добавить кастомный валидатор, нужно воспользоваться функцией extend. Первым её параметром будет название вашего правила, в нашем случае — это phone, вторым параметром будет объект, в котором располагаются два метода:

1. Validator — в нем будет происходить обработка введенного значения пользователем.
2. Message — метод, который вернет подготовленное сообщение в случае возникновения ошибки.

Ну и собственно всё. Этого достаточно чтобы заработало наше кастомное правило.

Вставьте этот код в любое место в файл vee-validate.js и теперь новое правило доступно глобально и может использоваться в любом компоненте.

Тестируем наш новый валидатор

Самое время проверить всё, что у нас получилось. Откройте файл index.vue в папке pages, создайте там новое поле вот с такими параметрами и не забудьте добавить в data переменную phone.

<!-- Phone -->
<ValidationProvider name="Phone" rules="required|phone" v-slot="{ errors }">
  <input v-model="phone" type="text" placeholder="Phone">
  <span class="error">{{ errors[0] }}</span>
</ValidationProvider>

В атрибут rules, который хранит список правил для поля, был добавлен наш кастомный валидатор. Через символ | вы можете добавлять хоть сколько правил.

Запустите проект командой:

npm i && npm run dev

После запуска, в списке полей должно появится поле для телефона.

Если попробовать ввести в нём буквы, появится сообщение об ошибке. Если же ввести цифры, то сообщение пропадёт.

Ура, наше кастомное правило работает.

Таким образом, вы можете писать любые валидаторы, но при этом не забывайте про встроенные, их там более 25ти штук.

Компоненты ValidationObserver и ValidationProvider

Оберткой для компонента ValidationProvider является ValidationObserver. Он поможет отслеживать состояние всех полей и в случае каких либо ошибок вернет соответствующий статус. Например, параметр invalid вернёт false если все поля валидные, либо же true если одно из полей не валидное.

Перечислять и описывать все параметры и атрибуты компонента ValidationObserver не буду, более детально можно почитать по этой ссылке. Тоже самое могу сказать и о ValidationProvider. Читаем тут.

Локализация сообщений об ошибках

Наверное у вас возник вопрос: А как перевести сообщение об ошибке на другой язык?

В первую очередь нужно импортировать нужные локали в файл настроек vee-validate.js

import en from 'vee-validate/dist/locale/en.json';
import ru from 'vee-validate/dist/locale/ru.json';

Далее инициализировать их в методе localize

localize({ en, ru });

Теперь перейдем в файл index.vue и добавим там пару изменений.

Нам нужна новая функция, которая будет менять сообщения об ошибках на разные языки. Для этого импортируем всё тот же медот localize

...
<script>
import { localize } from 'vee-validate';
export default {
...

В хук methods добавляем добавляет новый метод switchLocale

switchLocale() {
  this.locale = this.locale === 'en' ? 'ru' : 'en';
  // switch the locale.
  localize(this.locale);
}

Ну и последним нужно добавить кнопку переключения языков. Можно разместить её под заголовком, например:

<button
  class="switch-local"
  @click="switchLocale"
>
  Switch Locale
</button>

Этого достаточно. И если открывать страницу, ввести некорректные данные в поле Email и нажать на кнопку смены языков, сообщение об ошибке поменяется на другой язык.

Теперь давайте попробуем перевести сообщение для кастомного валидатора phone

Снова зайдём в файл настроек vee-validate.js и поменяем код в методе localize таким образом

localize({
  en: {
    messages: {
      ...en.messages,
      phone: 'The Phone field must contain only numbers and dashes.'
    }
  },
  ru: {
    messages: {
      ...ru.messages,
      phone: 'Поле Phone должно содержать только цифры и тире.'
    }
  }
});

Не забудьте удалить ключ message в кастомном валидаторе. Должно быть так

extend('phone', {
  validate: value => {
    if (!value) return true
    const regex = /^[0-9\s- +]*$/g
    return Boolean(value.match(regex))
  }
});

Вот и всё, можно идти проверять. Введите не валидные данные в поле phone, появится наше новое сообщение, которое можно перевести нажатием на кнопку Switch Locale.

Заключение

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

За более конкретной информацией обращайтесь официальную документацию.

Спасибо!

Вакансия Vue+Vuetify Middle Developer в SaaS проект