Как реализовать кастомную валидацию форм без использования готовых библиотек?

Кастомная валидация полезна, когда требования простые или нестандартные и подключение библиотеки избыточно.

Определение

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

Базовая архитектура

Перед реализацией важно разделить данные формы и логику проверки.

1. Состояние значений

   • Хранит текущие данные полей

2. Состояние ошибок

   • Хранит сообщения ошибок по каждому полю

3. Функции-валидаторы

   • Проверяют одно поле или всю форму

Пример простой валидации

const validateEmail = (value: string) => {
  if (!value) return "Email обязателен";
  if (!value.includes("@")) return "Некорректный email";
  return null;
};

Использование в компоненте

const error = validateEmail(email);
// если error !== null — показываем сообщение

Когда запускать валидацию

• При onBlur — мягкий UX

• При onChange — мгновенная обратная связь

• При onSubmit — финальная проверка

Типичные ошибки

• Валидация в рендере без мемоизации

• Смешивание UI и логики проверок

• Отсутствие единого формата ошибок

Вывод

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