Валидация на клиенте и сервере

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

Клиентская валидация

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

Использование QForm и rules

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

Пример:

<template>
  <q-form ref="form" @submit.prevent="submitForm">
    <q-input
      v-model="email"
      label="Email"
      :rules="[emailRule, requiredRule]"
    />
    <q-btn type="submit" label="Отправить" color="primary" />
  </q-form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      requiredRule: val => !!val || 'Поле обязательно для заполнения',
      emailRule: val => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val) || 'Некорректный email'
    };
  },
  methods: {
    submitForm() {
      if (this.$refs.form.validate()) {
        console.log('Форма валидна');
      }
    }
  }
};
</script>

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

  • rules — массив функций, возвращающих либо true (если поле валидно), либо строку с сообщением об ошибке.
  • Валидация выполняется автоматически при изменении значения или при вызове метода validate().
  • QForm позволяет легко проверять состояние всей формы через this.$refs.form.validate().

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

Иногда необходимо проверять данные на стороне клиента с обращением к серверу, например, уникальность логина или email. Quasar поддерживает асинхронные правила:

usernameRule: async val => {
  if (!val) return 'Поле обязательно';
  const response = await fetch(`/api/check-username?username=${val}`);
  const data = await response.json();
  return data.available || 'Имя пользователя занято';
}

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

  • Асинхронные функции должны возвращать либо true, либо строку с ошибкой.
  • QForm корректно обрабатывает промисы в rules.
  • Используется для предварительной проверки перед отправкой данных.

Серверная валидация

Серверная валидация выполняется после получения данных на бэкенде. Она критически важна для защиты приложения от некорректных или злонамеренных данных, даже если клиентская валидация присутствует.

Принципы серверной валидации:

  1. Повторение ключевых правил — все важные проверки должны дублироваться на сервере, даже если они реализованы на клиенте.
  2. Структурированная ошибка — сервер должен возвращать подробные сообщения о некорректных полях для отображения на клиенте.
  3. Асинхронные операции — проверка уникальности, обращение к внешним сервисам или БД.

Пример ответа сервера в формате JSON:

{
  "status": "error",
  "errors": {
    "email": "Email уже используется",
    "password": "Пароль слишком короткий"
  }
}

Интеграция с Quasar

Quasar позволяет обрабатывать серверные ошибки в форме:

submitForm() {
  axios.post('/api/register', { email: this.email, password: this.password })
    .then(() => {
      console.log('Регистрация успешна');
    })
    .catch(err => {
      if (err.response && err.response.data.errors) {
        const errors = err.response.data.errors;
        this.$refs.form.setErrors(errors);
      }
    });
}

Особенности метода setErrors:

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

Совмещение клиентской и серверной валидации

На практике рекомендуется комбинировать оба уровня валидации:

  1. Клиентская — проверяет формат, длину, простые правила и предоставляет быстрый отклик.
  2. Серверная — проверяет уникальность, сложные зависимости, безопасность и корректность данных.

Пример полной схемы:

  • Поле email: проверка на формат (клиент), проверка на уникальность в БД (сервер).
  • Пароль: минимальная длина и символы (клиент), отсутствие слов из черного списка (сервер).

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

Полезные советы

  • Использовать computed или watch для динамического включения правил валидации.
  • Разбивать правила на переиспользуемые функции для единообразия по всему приложению.
  • Проверять асинхронные правила с дебаунсом, чтобы уменьшить количество запросов к серверу.
  • Всегда обрабатывать возможные ошибки сервера и возвращать структурированный объект с ошибками для формы.

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

Оглавление