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

Question

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

YeaHub · Accepted Answer

Кастомная валидация полезна, когда требования простые или нестандартные и подключение библиотеки избыточно.ОпределениеОпределение: кастомная валидация формы — это ручная проверка пользовательских данных по заданным правилам до отправки или обработки формы.Базовая архитектураПеред реализацией важно разделить данные формы и логику проверки.Состояние значенийХранит текущие данные полейСостояние ошибокХранит сообщения ошибок по каждому полюФункции-валидаторыПроверяют одно поле или всю формуПример простой валидации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 и логики проверокОтсутствие единого формата ошибокВыводКастомная валидация оправдана для простых форм или нестандартных правил, но для сложных сценариев лучше использовать специализированные библиотеки.