Как валидировать данные на клиенте (например, через схемы)?

Валидация данных на клиенте — это критически важный этап в веб-разработке, который обеспечивает корректность информации, вводимой пользователем, до её отправки на сервер. Использование схем валидации позволяет структурировать этот процесс, делая его более надёжным и удобным в поддержке. Схема — это набор правил, описывающих ожидаемую структуру и ограничения для данных (например, строка определённой длины, число в диапазоне, обязательное поле).

Популярные библиотеки для валидации через схемы

Наиболее распространёнными инструментами являются:

• Zod: Библиотека для TypeScript с акцентом на безопасность типов и вывод типов из схем.
• Yup: Легковесная библиотека, часто используемая с Formik, с простым и понятным синтаксисом.
• Joi (чаще на сервере, но может использоваться и на клиенте): Мощная библиотека с богатым набором валидаторов.

Как это применяется

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

Пример кода с использованием Zod

import { z } from 'zod';

// 1. Определяем схему для данных формы регистрации
const userSchema = z.object({
  email: z.string().email('Некорректный email'),
  password: z.string().min(8, 'Пароль должен быть не менее 8 символов'),
  age: z.number().int().min(18, 'Возраст должен быть от 18 лет').optional(),
});

// 2. Данные, введённые пользователем
const userInput = {
  email: 'user@example', // Ошибка: невалидный email
  password: '123',        // Ошибка: слишком короткий пароль
};

// 3. Попытка валидации
const result = userSchema.safeParse(userInput);

if (!result.success) {
  // 4. Обработка ошибок
  console.log(result.error.errors);
  // Выведет массив объектов с описанием ошибок для каждого поля
  // Это можно отобразить в интерфейсе
} else {
  // Данные валидны, можно отправлять на сервер
  const validData = result.data;
  console.log('Данные прошли валидацию:', validData);
}

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

Преимущества подхода

• Единый источник истины: Правила валидации описаны в одном месте (схеме), а не разбросаны по коду.
• Безопасность типов (TypeScript): Библиотеки вроде Zod автоматически генерируют типы TypeScript из схем, что исключает несоответствие типов.
• Повторное использование: Одну и ту же схему можно использовать для валидации на клиенте и, при необходимости, на сервере.
• Улучшенный UX: Пользователь сразу видит ошибки, не дожидаясь ответа сервера.

Вывод: Использование схем валидации на клиенте — это современный и эффективный подход, который стоит применять во всех формах, где важна корректность вводимых данных. Он особенно полезен в сложных формах с множеством полей и взаимосвязанными правилами, так как делает код валидации предсказуемым и легко тестируемым.