Валидация на уровне формы

Валидация на уровне формы в Quasar основана на использовании компонентов QForm, QInput, QSelect, QCheckbox и других интерактивных элементов вместе с системой правил (rules). Основная цель — обеспечить проверку данных до их отправки и предоставить пользователю моментальную обратную связь.

Компонент QForm

QForm служит контейнером для управления состоянием формы и проверки её валидности. Ключевые методы:

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

Пример:

<template>
  <q-form ref="myForm" @submit.prevent="onSubmit">
    <q-input v-model="form.name" label="Имя" :rules="[val => !!val || 'Поле обязательно']"/>
    <q-input v-model="form.email" label="Email" :rules="[val => /.+@.+\..+/.test(val) || 'Неверный email']"/>
    <q-btn label="Отправить" type="submit"/>
  </q-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: ''
      }
    }
  },
  methods: {
    onSubmit() {
      if (this.$refs.myForm.validate()) {
        console.log('Форма валидна', this.form)
      }
    }
  }
}
</script>

Правила валидации (rules)

Правила передаются в виде массива функций. Каждая функция должна возвращать true или строку с сообщением об ошибке. В Quasar правила можно комбинировать, применять к любому интерактивному компоненту.

Примеры распространённых правил:

const required = val => !!val || 'Поле обязательно';
const minLength = length => val => (val && val.length >= length) || `Минимум ${length} символов`;
const emailFormat = val => /.+@.+\..+/.test(val) || 'Неверный email';

Эти правила можно использовать как отдельно, так и комбинировать в массиве:

<q-input
  v-model="form.password"
  label="Пароль"
  :rules="[required, minLength(8)]"
/>

Динамические правила

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

<q-select
  v-model="form.type"
  :options="['user', 'admin']"
/>

<q-input
  v-if="form.type === 'admin'"
  v-model="form.adminCode"
  label="Код администратора"
  :rules="[val => !!val || 'Код обязателен']"
/>

Ошибки и их отображение

Компоненты Quasar автоматически показывают ошибки, возвращаемые правилами. Валидация происходит при:

  • Вводе значения (lazy-rules можно отключить моментальную проверку).
  • Потере фокуса.
  • Вызове validate() на форме.

Использование lazy-rules:

<q-input
  v-model="form.name"
  label="Имя"
  :rules="[required]"
  lazy-rules
/>

Это позволяет показывать ошибки только после того, как пользователь завершил ввод.

Валидируемые группы полей

Для сложных форм можно объединять поля в группы и проверять их вместе:

<q-form ref="groupForm">
  <q-input v-model="form.startDate" label="Дата начала" :rules="[required]"/>
  <q-input v-model="form.endDate" label="Дата окончания" :rules="[required, dateCheck]"/>
</q-form>

methods: {
  dateCheck(val) {
    return val >= this.form.startDate || 'Дата окончания не может быть раньше начала';
  }
}

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

Правила могут быть асинхронными. Например, проверка уникальности логина через API:

const uniqueUsername = async val => {
  const response = await fetch(`/api/check-username?username=${val}`);
  const exists = await response.json();
  return !exists || 'Имя уже занято';
}

Используется аналогично другим правилам, QForm корректно обрабатывает промисы.

Интеграция с QBtn и отправкой данных

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

<q-btn
  label="Сохранить"
  color="primary"
  :disable="!$refs.myForm || !$refs.myForm.validate()"
  @click="submitForm"
/>

Валидация по событиям

Можно привязать валидацию к конкретным событиям:

  • @blur — при потере фокуса.
  • @input — при каждом изменении значения.
  • @change — при изменении значения.

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

Пользовательские сообщения

Сообщения об ошибках можно локализовать и настраивать для разных компонентов и форм:

<q-input
  v-model="form.phone"
  label="Телефон"
  :rules="[val => /^\+\d{11}$/.test(val) || 'Неверный формат']"
/>

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

Оглавление