Отображение ошибок валидации

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

Компонент QForm и базовая валидация

Компонент <q-form> является контейнером для всех полей ввода. Он позволяет группировать поля, запускать валидацию всех элементов одновременно и отслеживать состояние формы. Основные методы:

  • validate() — проверяет все поля формы по их правилам и возвращает true, если все поля прошли валидацию, иначе false.
  • resetValidation() — очищает все сообщения об ошибках, возвращая форму в исходное состояние.
  • reset() — сбрасывает значения полей и ошибки валидации.

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

<q-form ref="myForm" @submit.prevent="submitForm">
  <q-input v-model="email" label="Email" :rules="[val => !!val || 'Email обязателен']" />
  <q-input v-model="password" label="Пароль" type="password" :rules="[val => val.length >= 6 || 'Минимум 6 символов']" />
  <q-btn label="Отправить" type="submit" />
</q-form>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    };
  },
  methods: {
    submitForm() {
      if (this.$refs.myForm.validate()) {
        // логика отправки формы
      }
    }
  }
};
</script>

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

Настройка отображения сообщений об ошибках

Компоненты ввода Quasar (QInput, QSelect, QTextarea) имеют свойство error и error-message:

  • error — булево значение, определяет, выделяется ли поле красной рамкой как некорректное.
  • error-message — строка или массив строк, которые отображаются под полем ввода.

Пример ручного управления:

<q-input
  v-model="username"
  label="Имя пользователя"
  :error="hasError"
  :error-message="errorMessage"
/>

<script>
export default {
  data() {
    return {
      username: '',
      hasError: false,
      errorMessage: ''
    };
  },
  watch: {
    username(val) {
      if (!val) {
        this.hasError = true;
        this.errorMessage = 'Имя пользователя не может быть пустым';
      } else {
        this.hasError = false;
        this.errorMessage = '';
      }
    }
  }
};
</script>

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

Использование реактивной валидации

Quasar хорошо интегрируется с реактивной системой Vue. Это позволяет создавать централизованные объекты состояния для ошибок:

data() {
  return {
    form: {
      email: '',
      password: ''
    },
    errors: {
      email: '',
      password: ''
    }
  };
},
methods: {
  validateForm() {
    this.errors.email = !this.form.email ? 'Email обязателен' : '';
    this.errors.password = this.form.password.length < 6 ? 'Минимум 6 символов' : '';
    return !this.errors.email && !this.errors.password;
  }
}

В шаблоне:

<q-input v-model="form.email" label="Email" :error="!!errors.email" :error-message="errors.email" />
<q-input v-model="form.password" label="Пароль" type="password" :error="!!errors.password" :error-message="errors.password" />

Такой подход упрощает масштабирование формы и централизованное управление ошибками.

Асинхронная валидация и интеграция с сервером

Для проверки данных на сервере (например, проверка уникальности email) ошибки можно отображать через error и error-message после получения ответа:

async checkEmail() {
  try {
    const response = await api.checkEmail(this.form.email);
    this.errors.email = response.available ? '' : 'Email уже используется';
  } catch (e) {
    this.errors.email = 'Ошибка проверки email';
  }
}

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

Стилизация и пользовательский интерфейс ошибок

Quasar позволяет полностью контролировать визуальное отображение ошибок:

  • stacked — вертикальное расположение ошибок под полем.
  • dense — уменьшение отступов для компактных форм.
  • color — изменение цвета рамки и текста ошибки.

Пример:

<q-input
  v-model="email"
  label="Email"
  :error="!!errors.email"
  :error-message="errors.email"
  color="red"
  dense
  stacked
/>

Советы по организации больших форм

  1. Разделять правила валидации и состояние ошибок от логики шаблона.
  2. Использовать методы resetValidation() и validate() для централизованного управления.
  3. Для сложных форм применять реактивные объекты errors и функции вычисления ошибок по каждому полю.
  4. Встраивать асинхронную проверку отдельно, чтобы не блокировать клиентскую валидацию.

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

Оглавление