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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    // Асинхронная валидация только если синхронная прошла
    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 истинно
    when(
      () => form.controls.hasCompany.value.value,
      (path) => {
        required(path.companyName);
        required(path.companyTaxId);
        pattern(path.companyTaxId, /^\d{10}$/, 'Неверный ИНН');
      }
    );
  },
});

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

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

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

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

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

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

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

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

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

    required(path.confirmPassword);

    // Валидация совпадения confirmPassword с password
    validate(path.confirmPassword, (value, ctx) => {
      const password = ctx.form.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) => {
    required(path.startDate);
    required(path.endDate);

    // Валидация, что дата окончания после даты начала
    validate(path.endDate, (value, ctx) => {
      const startDate = ctx.form.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, ctx) => {
      const startDate = ctx.form.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) => {
    required(path.minPrice);
    required(path.maxPrice);
    min(path.minPrice, 0);
    min(path.maxPrice, 0);

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

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

      return null;
    });
  },
});

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

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

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

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

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

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

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

      return null;
    });
  },
});