Сообщения об ошибках

В Vuetify обработка ошибок и отображение сообщений пользователю строится вокруг компонентов ввода данных, таких как v-text-field, v-select, v-textarea и других элементов формы. Эти компоненты имеют встроенные свойства и методы для интеграции валидации и визуализации ошибок.

Свойство error-messages

Свойство error-messages позволяет передавать массив строк с сообщениями об ошибках:

<v-text-field
  label="Email"
  v-model="email"
  :error-messages="emailErrors"
/>
data() {
  return {
    email: '',
    emailErrors: []
  }
},
methods: {
  validateEmail() {
    this.emailErrors = []
    if (!this.email) this.emailErrors.push('Email обязателен')
    else if (!/.+@.+\..+/.test(this.email)) this.emailErrors.push('Некорректный формат email')
  }
}

Ключевые моменты:

  • error-messages принимает массив строк, позволяя отображать сразу несколько ошибок.
  • Ошибки обновляются динамически при изменении данных формы.

Свойство error

Свойство error работает как логический флаг, который включает или отключает отображение ошибок:

<v-text-field
  label="Пароль"
  v-model="password"
  :error="passwordInvalid"
  error-messages="Пароль должен содержать минимум 8 символов"
/>
data() {
  return {
    password: '',
    passwordInvalid: false
  }
},
watch: {
  password(value) {
    this.passwordInvalid = value.length < 8
  }
}

Особенности использования:

  • error управляет видимостью всех сообщений об ошибках.
  • Можно комбинировать с error-messages для динамического отображения ошибок.

Валидация через rules

Vuetify предоставляет мощный механизм валидации через массив правил rules. Каждое правило — это функция, которая возвращает true при корректных данных или строку с ошибкой при некорректных:

<v-text-field
  label="Имя пользователя"
  v-model="username"
  :rules="usernameRules"
/>
data() {
  return {
    username: '',
    usernameRules: [
      v => !!v || 'Имя пользователя обязательно',
      v => (v && v.length >= 3) || 'Минимум 3 символа',
      v => (v && /^[a-zA-Z0-9_]+$/.test(v)) || 'Только латинские буквы и цифры'
    ]
  }
}

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

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

Асинхронная валидация

Для проверки данных на сервере можно использовать промисы в правилах:

<v-text-field
  label="Email"
  v-model="email"
  :rules="[validateEmailAsync]"
/>
methods: {
  validateEmailAsync(value) {
    if (!value) return 'Email обязателен'
    return new Promise((resolve) => {
      setTimeout(() => {
        if (value === 'taken@example.com') resolve('Email уже используется')
        else resolve(true)
      }, 500)
    })
  }
}

Особенности:

  • Валидация может быть задержанной или зависеть от ответа API.
  • Vuetify корректно обрабатывает промисы и отображает ошибки после их разрешения.

Глобальное управление ошибками

Иногда требуется централизованное управление ошибками формы. Для этого используют v-form и методы validate() и resetValidation():

<v-form ref="form">
  <v-text-field label="Имя" v-model="name" :rules="nameRules" />
  <v-text-field label="Email" v-model="email" :rules="emailRules" />
</v-form>
<v-btn @click="submit">Отправить</v-btn>
methods: {
  submit() {
    if (this.$refs.form.validate()) {
      // форма валидна, отправка данных
    } else {
      // отображены ошибки
    }
  }
}

Важные моменты:

  • Метод validate() возвращает true, если все поля прошли проверку.
  • resetValidation() сбрасывает флаги ошибок и очищает error-messages.

Кастомизация отображения ошибок

Vuetify позволяет изменять стиль сообщений об ошибках с помощью слотов error и error-messages:

<v-text-field
  label="Телефон"
  v-model="phone"
  :error-messages="phoneErrors"
>
  <template v-slot:error>
    <v-icon color="red">mdi-alert-circle</v-icon>
    <span>{{ phoneErrors[0] }}</span>
  </template>
</v-text-field>

Преимущества кастомного слота:

  • Полная свобода в оформлении ошибок.
  • Можно добавлять иконки, анимации, подсказки.

Интеграция с Vuetify 3 и Composition API

С использованием Composition API и Vuetify 3, ошибки удобно хранить в реактивных переменных и использовать computed для генерации сообщений:

import { ref, computed } from 'vue'

const email = ref('')
const emailErrors = computed(() => {
  const errors = []
  if (!email.value) errors.push('Email обязателен')
  else if (!/.+@.+\..+/.test(email.value)) errors.push('Некорректный формат email')
  return errors
})
<v-text-field label="Email" v-model="email" :error-messages="emailErrors" />

Особенности:

  • computed автоматически обновляет ошибки при изменении значений.
  • Совместимо с реактивной валидацией и формами без излишнего кода.

Логика множественных ошибок

Для сложных форм с зависимыми полями можно использовать функции, проверяющие несколько условий одновременно:

const passwordErrors = computed(() => {
  const errors = []
  if (!password.value) errors.push('Пароль обязателен')
  if (password.value.length < 8) errors.push('Минимум 8 символов')
  if (!/[A-Z]/.test(password.value)) errors.push('Должна быть хотя бы одна заглавная буква')
  return errors
})

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

  • Возможность отображать сразу все ошибки.
  • Улучшение UX за счет полного информирования пользователя о проблемах с вводом.

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

Оглавление