✨ Основные преимущества
- 🚀 Без зависимостей - Легкая и быстрая (~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[] - ✅ Массивы объектов - динамические списки с валидацией элементов
- ✅ Вложенные объекты - многоуровневые структуры данных
- ✅ Смешанные структуры - комбинации простых полей, массивов и объектов