Структура форм в Naive UI

Библиотека Naive UI предоставляет мощный и гибкий инструмент для работы с формами в приложениях на Vue 3. Формы в Naive UI строятся вокруг компонентов <n-form>, <n-form-item> и элементов управления ввода (<n-input>, <n-select> и др.), обеспечивая полную интеграцию с реактивными данными и механизмом валидации.

Компонент <n-form>

Компонент <n-form> является контейнером для всей формы. Он управляет структурой, валидацией и состоянием элементов формы. Основные свойства компонента:

  • model — объект с данными формы, реактивный, используется для двустороннего связывания с элементами ввода.
  • rules — объект правил валидации, где ключи соответствуют полям в model.
  • label-width — ширина заголовков (label) всех элементов формы.
  • size — размер элементов (small, medium, large), влияет на визуальное оформление.

Пример базовой структуры:

<n-form :model="formData" :rules="formRules" label-width="100">
  <n-form-item label="Имя" path="name">
    <n-input v-model="formData.name" placeholder="Введите имя" />
  </n-form-item>
  <n-form-item label="Email" path="email">
    <n-input v-model="formData.email" placeholder="Введите email" />
  </n-form-item>
</n-form>

Компонент <n-form-item>

<n-form-item> связывает отдельный элемент ввода с полем данных формы и определяет его визуальное оформление. Основные атрибуты:

  • label — текст заголовка для поля.
  • path — путь к значению в объекте model. Может быть строкой ('name') или массивом для вложенных объектов (['user', 'email']).
  • show-feedback — отображение сообщений об ошибках (по умолчанию true).
  • rule — локальное правило валидации, если требуется отдельное правило для конкретного поля.

Использование path позволяет автоматически связывать ошибки валидации с конкретными элементами формы.

Управление состоянием формы

Naive UI предоставляет методы для управления формой через ref:

const formRef = ref(null);

// проверка всех правил
formRef.value.validate().then(() => {
  console.log('Форма валидна');
}).catch((errors) => {
  console.log('Ошибки в форме', errors);
});

// сброс значений формы
formRef.value.reset();

// частичная проверка конкретного поля
formRef.value.validateField('email').then(() => {
  console.log('Email валиден');
});

Использование ref упрощает интеграцию форм с логикой приложения и позволяет управлять состоянием программно.

Валидация

Правила валидации задаются через объект rules. Каждое правило включает:

  • required — обязательность поля.
  • type — тип данных (string, number, email и т.д.).
  • message — сообщение при ошибке.
  • trigger — событие, на котором происходит проверка (blur, input).

Пример правил:

const formRules = {
  name: { required: true, message: 'Имя обязательно', trigger: 'blur' },
  email: [
    { required: true, message: 'Email обязателен', trigger: 'blur' },
    { type: 'email', message: 'Неверный формат email', trigger: 'blur' }
  ]
};

Валидация поддерживает асинхронные функции, что позволяет интегрировать проверку с серверными API.

Вложенные и динамические формы

Для сложных структур данных используется вложение model и path:

<n-form :model="formData" :rules="formRules">
  <n-form-item label="Пользователь" path="user.name">
    <n-input v-model="formData.user.name" />
  </n-form-item>
</n-form>

Динамическое создание элементов формы возможно с помощью v-for, сохраняя реактивность и поддержку валидации:

<n-form :model="formData" :rules="formRules">
  <n-form-item
    v-for="(field, index) in fields"
    :key="index"
    :label="field.label"
    :path="field.path"
  >
    <n-input v-model="formData[field.path]" />
  </n-form-item>
</n-form>

Сообщения об ошибках и пользовательский feedback

Naive UI позволяет кастомизировать отображение ошибок и подсказок:

  • feedback — текстовое сообщение для поля.
  • show-feedback — включение или отключение отображения ошибок.
  • status — визуальное состояние поля (error, success, warning).

Пример с пользовательской подсказкой:

<n-form-item label="Пароль" path="password" feedback="Пароль должен содержать минимум 8 символов">
  <n-input type="password" v-model="formData.password" />
</n-form-item>

Интеграция с другими компонентами Naive UI

Форма может содержать любые элементы ввода Naive UI: <n-input>, <n-select>, <n-checkbox>, <n-date-picker> и др. Все они поддерживают реактивное связывание с v-model и правила валидации, что обеспечивает единый подход к построению сложных интерфейсов.

Хотите, я могу продолжить и подробно разобрать динамическую генерацию форм с валидацией и кастомными компонентами Naive UI, чтобы получилась полноценная глава учебника с готовыми практическими примерами?

Оглавление