Формы с валидацией в Vue.js с использованием Vuelidate

Реферат Алиева Каира, публикуется "как есть"

Введение

Сегодня веб-разработку невозможно представить без использования форм. Формы — это один из основополагающих элементов взаимодействия пользователя с веб-приложениями. Однако для того, чтобы форма выполняла свою функцию, она должна быть корректно валидирована. Валидация данных на стороне клиента — это ключевой аспект, который помогает обеспечить правильность ввода и улучшить пользовательский опыт. В этом реферате рассматривается, как организовать валидацию форм в Vue.js с помощью библиотеки Vuelidate, поскольку в стандартной библиотеке Vue нет встроенных механизмов для валидации форм.

Зачем нужна валидация форм?

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

Валидация форм помогает:

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

Валидация форм в Vue.js

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

Что такое Vuelidate?

Vuelidate — это легковесная библиотека для валидации форм в Vue.js. Она позволяет задавать декларативные правила валидации для полей формы, а также следит за состоянием каждого поля с помощью реактивной системы Vue.

Основные возможности Vuelidate:

Декларативный синтаксис.
Интеграция с реактивной системой Vue.
Простота в использовании и настройке.
Поддержка асинхронных валидаций.

Установка Vuelidate

Для начала работы с Vuelidate, установите необходимые пакеты через npm:

npm install vuelidate

Основные принципы работы с Vuelidate

Vuelidate использует объект для определения правил валидации, который затем привязывается к полям формы. Каждый валидатор проверяет данные и возвращает объект с состоянием ошибки (валидно/невалидно)

Пример использования Vuelidate

Пример 1: Простая форма с валидацией

email и имя. Рассмотрим пример формы с проверкой полей.

<template>
  <div>
    <form @submit.prevent="submitForm">
      <div>
        <label for="name">Имя:</label>
        <input v-model="form.name" id="name" type="text" />
        <span v-if="!$v.form.name.$pending && !$v.form.name.$valid">Имя обязательно</span>
      </div>
      <div>
        <label for="email">Email:</label>
        <input v-model="form.email" id="email" type="email" />
        <span v-if="!$v.form.email.$pending && !$v.form.email.$valid">Неверный email</span>
      </div>
      <button type="submit" :disabled="!$v.$anyDirty || !$v.$valid">Отправить</button>
    </form>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import useVuelidate from '@vuelidate/core'
import { required, email } from '@vuelidate/validators'

export default {
  setup() {
    // Reactive form data
    const form = reactive({
      name: '',
      email: ''
    })

    // Validation setup
    const validations = useVuelidate({
      form: {
        name: { required },
        email: { required, email }
      }
    }, form)

    // Submit function
    const submitForm = () => {
      alert('Форма отправлена!')
    }

    onMounted(() => {
      validations.value.$touch() // Initialize validation
    })

    return {
      form,
      validations,
      submitForm
    }
  }
}
</script>

Пояснение к коду:

v-model: используется для двусторонней привязки данных к полям формы.
validations: в этой секции указываются правила валидации. Для каждого поля применяются такие валидаторы, как required и email.
useVuelidate: этот хук подключает библиотеку Vuelidate к компоненту.
$v: В экземпляре Vue появляется объект $v, который отслеживает состояние проверки для всех полей формы.
submitForm: когда форма отправляется, мы проверяем, что она действительна с помощью this.$v.$invalid (тут Каир насвистел, this походу остался от vue2). Если форма недействительна, отправка не произойдёт.

Форма <form @submit.prevent="submitForm">
- <form>: HTML-элемент, предназначенный для ввода и отправки данных.
- @submit.prevent="submitForm": обработчик события submit (отправка формы). Модификатор .prevent останавливает "всплытие" события (т.е. стандартное поведение браузера - перезагрузку страницы)
- submitForm: Указывает, что при возникновении события submit нужно выполнить функцию submitForm.
Поле ввода для имени
```
<div>
<label for="name">Имя:</label>
<input v-model="form.name" id="name" type="text" />
<span v-if="!$v.form.name.$pending && !$v.form.name.$valid">Имя обязательно</span>
</div>
```
Детали:
- <label for="name">Имя:</label>: Текстовая метка для поля ввода. Связана с полем через атрибут for="name" (значение должно совпадать с id у соответствующего <input>).
- <input v-model="form.name" id="name" type="text" />: Поле для ввода текста. type="text" Указывает тип поля (текст).
- <span v-if="!$v.form.name.$pending && !$v.form.name.$valid">Имя обязательно</span> Сообщение об ошибке, где:
  - !$v.form.email.$pending: Убеждаемся, что валидация завершена.
  - !$v.form.email.$valid: Проверяем, что email-адрес введен корректно.
  - Сообщение отображается, если поле email не прошло валидацию.
Поле ввода для email
```
<div>
<label for="email">Email:</label>
<input v-model="form.email" id="email" type="email" />
<span v-if="!$v.form.email.$pending && !$v.form.email.$valid">Неверный email</span>
</div>
```
Детали:
- <input v-model="form.email" id="email" type="email" />: Поле для ввода email-адреса.
- type="email": Указывает, что поле должно содержать email (проверяется браузером на базовый формат email).
Кнопка отправки

<button type="submit" :disabled="!$v.$anyDirty || !$v.$valid">Отправить</button>
- type="submit": Указывает, что эта кнопка предназначена для отправки формы (при клике на неё генерируется событие submit у родительской формы).
- :disabled="!$v.$anyDirty || !$v.$valid": Атрибут disabled отключает кнопку, если одно из условий выполняется:
  - !$v.$anyDirty: Проверяет, изменял ли пользователь хотя бы одно поле. Если нет — кнопка отключена.
  - !$v.$valid: Проверяет, прошли ли все поля валидацию. Если хоть одно поле невалидно — кнопка отключена.
Функция submitForm
```
const submitForm = () => {
    alert('Форма отправлена!')
}
```
- Выполняется при успешной отправке формы.
- Показывает уведомление alert, что форма отправлена.
- В реальных приложениях на этом этапе можно отправить данные на сервер через API.

Пример 2: Валидация пароля

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

<template>
  <div>
    <form @submit.prevent="submitForm">
      <div>
        <label for="password">Пароль:</label>
        <input v-model="form.password" id="password" type="password" />
        <span v-if="!$v.form.password.$pending && !$v.form.password.$valid">
        </span>
      </div>
      <button type="submit" :disabled="!$v.$valid">Отправить</button>
    </form>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import useVuelidate from '@vuelidate/core'
import { required, minLength, helpers } from '@vuelidate/validators'

export default {
  setup() {
    // Стейт формы
    const form = reactive({
      password: ''
    })

    const validations = {
      form: {
        password: {
          required,
          minLength: minLength(8),
          hasNumber: helpers.regex('hasNumber', /\d/),
          hasUppercase: helpers.regex('hasUppercase', /[A-Z]/)
        }
      }
    }

    const $v = useVuelidate(validations, form)

    const submitForm = () => {
      alert('Форма отправлена!')
    }

    return {
      form,
      $v,
      submitForm
    }
  }
}
</script>

Пояснение к коду (правила валидации):

minLength(8) — валидация минимальной длины пароля.
helpers.regex — создание пользовательских валидаторов, например, для проверки наличия цифры и заглавной буквы в пароле.
Сообщение об ошибке появляется, если пароль не удовлетворяет требованиям.

Преимущества и недостатки использования Vuelidate

Преимущества:

Простота — Vuelidate легко интегрируется с Vue.js и требует минимальных усилий для настройки.
Гибкость — библиотека предоставляет большое количество валидаторов и позволяет создавать собственные, а также асинхронные проверки.
Реактивность — Vuelidate использует реактивную систему Vue, что позволяет автоматически обновлять состояние валидации при изменении данных.

Недостатки:

Отсутствие комплексной валидации на сервере
Необходимость дополнительных зависимостей — библиотека Vuelidate добавляет дополнительные зависимости в проект.

Заключение

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

Назад | Дальше

web_20.md 14 KB Cronologia Originale