Перейти к содержимому

✨ Основные преимущества

  • 🚀 Без зависимостей - Легкая и быстрая (~6kB gzipped)
  • 🦄 Типобезопасность - Полная поддержка TypeScript с автодополнением
  • 📋 Декларативность - Вся форма определяется в одном месте: структура, валидация и обработка
  • 🎯 Интуитивный API - Простые и понятные методы для работы с формами
  • 🔄 Реактивность - Валидация в реальном времени с реактивностью Vue
  • 🌍 Интернационализация - Поддержка реактивных сообщений об ошибках
  • 📂 Загрузка файлов - Встроенная валидация файлов с хелперами
  • 📝 Динамические массивы - Поддержка валидации массивов объектов
  • Асинхронная валидация - Удаленная валидация с debouncing
  • 🔗 Кросс-полевая валидация - Зависимости полей и сравнения
  • 🎨 Гибкость - Кастомные правила и условная валидация

🎯 Декларативный подход

Вся логика формы определяется в одном вызове createForm():

typescript
import { createForm } from '@sakhnovkrg/vue-form-validator'

const form = createForm(
  // 1. Структура данных
  { email: '', password: '' },
  // 2. Правила валидации
  (r, define) =>
    define({
      email: r.required().email(),
      password: r.required().minLength(8),
    }),
  // 3. Обработчики событий
  {
    onSubmit: values => {
      /* отправка формы */
    },
  }
)

🧬 Умная типизация

Библиотека спроектирована с особым вниманием к типобезопасности. createForm поддерживает как простые, так и вложенные структуры данных.

TypeScript контролирует корректность имен полей на всех уровнях:

Для основных полей формы (строгая типизация):

typescript
const form = createForm({
  email: '',
  password: ''
}, ...)

form.error('email')    // ✅ Корректно - поле существует
form.error('invalid')  // ❌ Ошибка TypeScript - поле не существует
form.hasError('password') // ✅ Корректно с автодополнением

Для вложенных полей массивов и объектов (продвинутая типизация):

typescript
const form = createForm({
  contacts: [{ name: '', email: '' }],
  address: { street: '', city: '' }
}, ...)

// ✅ TypeScript автоматически выводит допустимые пути:
form.hasError('contacts.0.name')    // contacts.${number}.name
form.hasError('contacts.0.email')   // contacts.${number}.email
form.hasError('address.street')     // address.street
form.hasError('address.city')       // address.city

// ❌ TypeScript не позволит указать несуществующие пути:
form.hasError('contacts.0.invalid') // Ошибка компиляции!
form.hasError('address.invalid')    // Ошибка компиляции!

// ✅ Для автодополнения используйте helper'ы:
form.hasError(form.arrayPath('contacts', 0, 'name'))   // автодополнение
form.hasError(form.objectPath('address', 'street'))    // автодополнение

Типы автоматически выводятся из начальных значений, обеспечивая полную типобезопасность на всех уровнях API.

⚡ Поддерживаемые структуры данных

createForm поддерживает все типы структур данных:

  • Простые поля - string, number, boolean, File, File[]
  • Массивы объектов - динамические списки с валидацией элементов
  • Вложенные объекты - многоуровневые структуры данных
  • Смешанные структуры - комбинации простых полей, массивов и объектов

Опубликовано под лицензией MIT.