Developer

Валидация форм в Quasar

↑ 5.3 Quasar · ← Предыдущая · → Следующая

Обязательно~3 мин чтенияУровень: middle

Зачем это на собесе

Встроенная валидация Quasar и её границы; когда подключать VeeValidate.

Объяснение

Поля Quasar принимают массив правил rules: функция возвращает true (валидно) или строку ошибки.

<script setup lang="ts">
const required = (v: unknown) => (v !== null && v !== undefined && v !== "") || "Обязательное поле";
const email = (v: string) => /^\S+@\S+\.\S+$/.test(v) || "Неверный email";
const minLen = (n: number) => (v: string) => (v?.length ?? 0) >= n || `Минимум ${n} символов`;
const uniqueLogin = async (v: string) => (await api.checkLogin(v)) || "Логин занят";      // асинхронные правила поддерживаются
const form = useTemplateRef<QForm>("form");
 
async function save() {
  if (!(await form.value!.validate())) return;                                 // валидация всей формы
  await api.save(model.value);
  form.value!.resetValidation();
}
</script>
 
<template>
  <q-form ref="form" greedy @submit.prevent="save">                            <!-- greedy: показать все ошибки, а не первую -->
    <q-input v-model="model.email" label="Email" :rules="[required, email]" lazy-rules="ondemand" :error="!!serverErrors.email" :error-message="serverErrors.email" />
    <q-input v-model="model.login" label="Логин" :rules="[required, uniqueLogin]" debounce="500" />
  </q-form>
</template>
ВозможностьОписание
rulesмассив функций (синхронных/асинхронных)
lazy-rulesпроверка при потере фокуса; ondemand — только при validate()
hide-bottom-space, no-error-iconвнешний вид
error/error-messageвнешняя ошибка (сервер)
QForm.validate(), resetValidation(), submit(), reset()управление
greedyвалидировать всё, не останавливаться на первой ошибке
@validation-error / @validation-successсобытия формы

Серверные ошибки (422) отображайте через error-message по полям (см. Ответы и ошибки: IResult, ProblemDetails, статус-коды о ProblemDetails).

Ограничения встроенной валидации: правила размазаны по шаблону, нет схемы, сложно сделать зависимые поля и вложенные структуры, нет автоматической типизации — для сложных форм подключают схему (Zod) и VeeValidate (см. Сложные формы: Quasar, VeeValidate и schema-driven validation).

Нюансы и подводные камни

  • Асинхронные правила без debounce создают лавину запросов.
  • rules — массив функций, пересоздаваемый при каждом рендере: выносите в константы.
  • Сообщения нужно локализовать (i18n).
  • Валидация UX: не показывайте ошибки до взаимодействия пользователя.
  • Проверка на клиенте не заменяет серверную.

Практика

  1. Реализуйте набор переиспользуемых правил и сообщений через i18n.
  2. Добавьте асинхронную проверку уникальности с debounce.
  3. Отобразите ошибки сервера по полям.

Вопросы с ответами

Связанные темы

Вид графа

Обратные ссылки