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

Основные принципы валидации

Валидация данных — это процесс проверки корректности введённых пользователем значений перед их обработкой или отправкой на сервер. Разделение валидации на клиентскую и серверную обеспечивает надёжность приложения и плавный пользовательский опыт.

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

Интеграция валидации во Vue.js

Vue.js предоставляет гибкие возможности для реализации валидации благодаря реактивной системе данных и компонентной архитектуре. Основные подходы:

  1. Локальная валидация с реактивными свойствами Реализуется с помощью data и computed свойств. Например, для формы с полем email можно создать вычисляемое свойство, проверяющее формат:
data() {
  return {
    email: '',
  };
},
computed: {
  emailError() {
    const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!this.email) return 'Email обязателен';
    if (!pattern.test(this.email)) return 'Некорректный формат email';
    return '';
  }
}

  1. Валидация через сторонние библиотеки Самые популярные библиотеки для Vue 3:

    • VeeValidate — поддерживает схему валидации на основе Yup или собственной декларативной модели.
    • VueUseForm — минималистичная библиотека с поддержкой реактивных форм.

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

import { useForm, useField } from 'vee-validate';
import * as yup from 'yup';

const schema = yup.object({
  email: yup.string().required('Email обязателен').email('Некорректный формат'),
  password: yup.string().required('Пароль обязателен').min(6, 'Минимум 6 символов'),
});

export default {
  setup() {
    const { handleSubmit, errors } = useForm({ validationSchema: schema });
    const { value: email } = useField('email');
    const { value: password } = useField('password');

    const onSub mit = handleSubmit(values => {
      console.log(values);
    });

    return { email, password, errors, onSubmit };
  }
}

Валидация на уровне компонентов

Vue позволяет создавать переиспользуемые валидируемые компоненты, например <InputField>:

<template>
  <div>
    <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
    <span v-if="error">{{ error }}</span>
  </div>
</template>

<script>
export default {
  props: {
    modelValue: String,
    validator: Function,
  },
  computed: {
    error() {
      return this.validator ? this.validator(this.modelValue) : '';
    }
  }
}
</script>

Такой компонент позволяет централизовать логику валидации для различных форм.

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

Серверная проверка должна учитывать потенциальные уязвимости:

  • SQL-инъекции и XSS-атаки;
  • Неверный формат данных;
  • Нарушение бизнес-логики (например, повторяющийся email).

Пример обработки на сервере с Node.js и Express:

app.post('/register', async (req, res) => {
  const { email, password } = req.body;
  
  if (!email || !password) {
    return res.status(400).json({ message: 'Все поля обязательны' });
  }
  
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    return res.status(400).json({ message: 'Некорректный формат email' });
  }

  // Проверка уникальности email в базе
  const userExists = await User.findOne({ email });
  if (userExists) {
    return res.status(400).json({ message: 'Пользователь с таким email уже существует' });
  }

  // Сохранение пользователя
  const user = new User({ email, password });
  await user.save();
  
  res.status(201).json({ message: 'Регистрация успешна' });
});

Обработка ошибок и уведомление пользователя

Реактивность Vue позволяет мгновенно отображать ошибки на форме:

<form @submit.prevent="onSubmit">
  <input v-model="email" type="email" />
  <span v-if="errors.email">{{ errors.email }}</span>
  
  <input v-model="password" type="password" />
  <span v-if="errors.password">{{ errors.password }}</span>
  
  <button type="submit">Отправить</button>
</form>

Ошибки, возвращённые сервером, можно привязать к объекту errors и показать пользователю, сохраняя синхронизацию с реактивными данными.

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

Эффективная стратегия:

  1. Предварительная проверка на клиенте — ускоряет обратную связь.
  2. Обязательная проверка на сервере — защищает данные и бизнес-логику.
  3. Единый механизм отображения ошибок — объект errors в компоненте объединяет локальные и серверные сообщения.

Реактивная обработка состояния формы

Использование ref и reactive позволяет динамически отслеживать состояние полей:

import { reactive, ref } from 'vue';

const form = reactive({
  email: '',
  password: ''
});

const errors = reactive({ email: '', password: '' });

function validate() {
  errors.email = !form.email ? 'Email обязателен' : '';
  errors.password = form.password.length < 6 ? 'Минимум 6 символов' : '';
}

В сочетании с watch можно автоматически запускать валидацию при изменении данных.

Заключение по методологии

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

Оглавление