Стратегии Валидации

Продвинутые паттерны и стратегии валидации для сложных форм.

Время Валидации

Валидация при Изменении

Мгновенная обратная связь во время ввода:

const form = new GroupNode({
  form: {
    username: { value: '', updateOn: 'change' },
  },
  validation: (path) => {
    validate(path.username, required());
    validate(path.username, minLength(3));
  },
});

Подходит для:

Простых полей (текст, числа)
Обратной связи в реальном времени
Клиентской валидации

Избегайте для:

Дорогих валидаций
API вызовов

Валидация при Потере Фокуса

Валидация при потере фокуса полем:

const form = new GroupNode({
  form: {
    email: { value: '', updateOn: 'blur' },
  },
  validation: (path) => {
    validate(path.email, required());
    validate(path.email, email());
  },
});

Подходит для:

Большинства полей формы
Лучшего UX (менее навязчиво)
Асинхронной валидации с debounce

Валидация при Отправке

Валидация только при отправке формы:

const form = new GroupNode({
  form: {
    feedback: { value: '', updateOn: 'submit' },
  },
  validation: (path) => {
    validate(path.feedback, required());
    validate(path.feedback, minLength(10));
  },
});

// Запуск валидации вручную
const handleSubmit = () => {
  form.markAsTouched();
  if (form.valid.value) {
    console.log('Валидно:', form.getValue());
  }
};

Подходит для:

Необязательных полей
Больших текстовых областей
Сложных форм, где валидация в реальном времени отвлекает

Синхронная vs Асинхронная Валидация

Стратегия Сначала Синхронная

Сначала запустите синхронную валидацию, затем асинхронную:

const form = new GroupNode({
  form: {
    username: { value: '' },
  },
  validation: (path, { validateAsync }) => {
    // Сначала синхронная валидация
    validate(path.username, required());
    validate(path.username, minLength(3));
    validate(path.username, maxLength(20));
    validate(path.username, pattern(/^[a-zA-Z0-9_]+$/, { message: 'Недопустимые символы' }));

    // Асинхронная валидация только если синхронная прошла
    validateAsync(
      path.username,
      async (value) => {
        if (!value || value.length < 3) return null;

        const response = await fetch(`/api/check-username?username=${value}`);
        const { available } = await response.json();

        return available ? null : { usernameTaken: true };
      },
      { debounce: 500 }
    );
  },
});

Преимущества:

Быстрая обратная связь для базовых ошибок
Сокращение ненужных API вызовов
Лучшая производительность

Параллельная Асинхронная Валидация

Запускайте несколько асинхронных валидаций параллельно:

const form = new GroupNode({
  form: {
    username: { value: '' },
    email: { value: '' },
  },
  validation: (path, { validateAsync }) => {
    // Проверка доступности имени пользователя
    validateAsync(
      path.username,
      async (value) => {
        const response = await fetch(`/api/check-username?username=${value}`);
        const { available } = await response.json();
        return available ? null : { usernameTaken: true };
      },
      { debounce: 500 }
    );

    // Проверка доступности email
    validateAsync(
      path.email,
      async (value) => {
        const response = await fetch(`/api/check-email?email=${value}`);
        const { available } = await response.json();
        return available ? null : { emailTaken: true };
      },
      { debounce: 500 }
    );
  },
});

Условная Валидация

Простое Условие

Валидация на основе другого поля:

const form = new GroupNode({
  form: {
    hasCompany: { value: false },
    companyName: { value: '' },
    companyTaxId: { value: '' },
  },
  validation: (path) => {
    // Валидировать поля компании только если hasCompany истинно
    applyWhen(
      path.hasCompany,
      (hasCompany) => hasCompany === true,
      (path) => {
        validate(path.companyName, required());
        validate(path.companyTaxId, required());
        validate(path.companyTaxId, pattern(/^\d{10}$/, { message: 'Неверный ИНН' }));
      }
    );
  },
});

Сложное Условие

Множественные условия:

const form = new GroupNode({
  form: {
    accountType: { value: 'personal' },
    businessName: { value: '' },
    ein: { value: '' },
    ssn: { value: '' },
  },
  validation: (path) => {
    validate(path.accountType, required());

    // Валидация бизнес-аккаунта
    applyWhen(
      path.accountType,
      (accountType) => accountType === 'business',
      (path) => {
        validate(path.businessName, required());
        validate(path.ein, required());
        validate(path.ein, pattern(/^\d{10}$/, { message: 'Неверный ИНН' }));
      }
    );

    // Валидация личного аккаунта
    applyWhen(
      path.accountType,
      (accountType) => accountType === 'personal',
      (path) => {
        validate(path.ssn, required());
        validate(path.ssn, pattern(/^\d{3}-\d{2}-\d{4}$/, { message: 'Неверный СНИЛС' }));
      }
    );
  },
});

Валидация Зависимых Полей

Последовательная Валидация

Валидация на основе предыдущего поля:

const form = new GroupNode({
  form: {
    password: { value: '' },
    confirmPassword: { value: '' },
  },
  validation: (path) => {
    validate(path.password, required());
    validate(path.password, minLength(8));

    validate(path.confirmPassword, required());

    // Валидация совпадения confirmPassword с password
    validate(path.confirmPassword, (value, _control, root) => {
      const password = root.password.value.value;
      if (value && password && value !== password) {
        return { passwordMismatch: true };
      }
      return null;
    });
  },
});

Валидация Диапазона Дат

Валидация диапазонов дат:

const form = new GroupNode({
  form: {
    startDate: { value: null as Date | null },
    endDate: { value: null as Date | null },
  },
  validation: (path) => {
    validate(path.startDate, required());
    validate(path.endDate, required());

    // Валидация, что дата окончания после даты начала
    validate(path.endDate, (value, _control, root) => {
      const startDate = root.startDate.value.value;

      if (!value || !startDate) return null;

      if (new Date(value) < new Date(startDate)) {
        return { endBeforeStart: true };
      }

      return null;
    });

    // Валидация, что диапазон не более 1 года
    validate(path.endDate, (value, _control, root) => {
      const startDate = root.startDate.value.value;

      if (!value || !startDate) return null;

      const start = new Date(startDate);
      const end = new Date(value);
      const diffDays = (end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24);

      if (diffDays > 365) {
        return { rangeTooLong: { max: 365, actual: diffDays } };
      }

      return null;
    });
  },
});

Множественная Валидация Полей

Кросс-Полевая Валидация

Валидация нескольких полей вместе:

const form = new GroupNode({
  form: {
    minPrice: { value: 0 },
    maxPrice: { value: 0 },
  },
  validation: (path) => {
    validate(path.minPrice, required());
    validate(path.maxPrice, required());
    validate(path.minPrice, min(0));
    validate(path.maxPrice, min(0));

    // Валидация диапазона цен
    validate(path.maxPrice, (value, _control, root) => {
      const minPrice = root.minPrice.value.value;

      if (value && minPrice && value < minPrice) {
        return {
          invalidRange: {
            message: 'Максимальная цена должна быть больше минимальной',
          },
        };
      }

      return null;
    });
  },
});

Валидация на Уровне Формы

Валидация всей формы:

import { validateGroup } from '@reformer/core/validators';

const form = new GroupNode({
  form: {
    paymentMethod: { value: 'card' },
    cardNumber: { value: '' },
    bankAccount: { value: '' },
  },
  validation: (path) => {
    validate(path.paymentMethod, required());

    // Валидация на уровне формы
    validateGroup(path, (scope, _root) => {
      const { paymentMethod, cardNumber, bankAccount } = scope.getValue();

      if (paymentMethod === 'card' && !cardNumber) {
        return {
          cardNumber: { required: true },
        };
      }

      if (paymentMethod === 'bank' && !bankAccount) {
        return {
          bankAccount: { required: true },
        };
      }

      return null;
    });
  },
});