```bash npm install vee-validate yup # или с Zod npm install vee-validate @vee-validate/zod zod ``` ### Подход 1: Composition API ```vue ``` ### Подход 2: Компонентный ```vue ``` ### Кастомные компоненты с Field ```vue ``` ### Async-валидация (проверка уникальности) ```javascript import { useForm, useField } from 'vee-validate' const { handleSubmit } = useForm() const { value: username, errorMessage } = useField('username', async (value) => { if (\!value) return 'Логин обязателен' if (value.length < 3) return 'Минимум 3 символа' // Async проверка на сервере const res = await fetch(`/api/check-username?name=${value}`) const { available } = await res.json() if (\!available) return 'Логин уже занят' return true }) ``` ### Работа с Zod (вместо Yup) ```javascript import { useForm } from 'vee-validate' import { toTypedSchema } from '@vee-validate/zod' import { z } from 'zod' const schema = toTypedSchema( z.object({ name: z.string().min(2, 'Минимум 2 символа'), email: z.string().email('Невалидный email'), age: z.number().min(18, 'Минимум 18 лет').max(120) }) ) const { handleSubmit, errors } = useForm({ validationSchema: schema }) ``` --- ## 📌 Реальные кейсы **Форма с зависимыми полями и условной валидацией:** ```javascript const schema = yup.object({ accountType: yup.string().required(), company: yup.string().when('accountType', { is: 'business', then: (schema) => schema.required('Название компании обязательно'), otherwise: (schema) => schema.notRequired() }), taxId: yup.string().when('accountType', { is: 'business', then: (schema) => schema.required('ИНН обязателен').matches(/^\d{10,12}$/, 'Невалидный ИНН') }) }) ``` --- ## Частые ошибки ❌ Использовать VeeValidate 3 синтаксис в Vue 3: ```vue <\!-- VeeValidate 3 — не работает в Vue 3 --> ``` ✅ Используй VeeValidate 4 API: ```vue <\!-- или schema-based подход --> ``` ❌ Забыть обернуть в `

Как использовать VeeValidate для валидации форм?