Нужны формы для вашего следующего проекта? Вот как создавать формы с помощью FormKit.

Формы — это шлюз, с помощью которого пользователи могут взаимодействовать с вашим приложением и предоставлять необходимые данные для таких задач, как создание учетной записи, обработка платежей и сбор информации. Но создание форм может быть непростой задачей, требующей объемного шаблонного кода, который отнимает много времени и подвержен ошибкам.

FormKit предлагает решение, предоставляя предварительно созданные компоненты, которые устраняют необходимость в шаблонном коде. Вот как это использовать.

Что такое формкит?

ФормКит — это платформа для создания форм с открытым исходным кодом, разработанная специально для Vue 3 и предназначенная для упрощения процесса создания высококачественных, готовых к производству форм. Это расширенная версия популярной Vue формулировать библиотека и предоставляет более 25 настраиваемых и доступных параметров ввода, а также предопределенный набор правил проверки.

FormKit также предлагает возможность создавать формы с помощью динамических схем, совместимых с JSON, что упрощает быстрое создание сложных форм. Кроме того, FormKit имеет активное сообщество в Discord, которое обеспечивает поддержку и способствует сотрудничеству между пользователями. Благодаря своим обширным функциям и системе поддержки FormKit является надежным и эффективным инструментом для разработчиков, которые хотят создавать формы для своих проектов Vue 3.

instagram viewer

Возможности платформы FormKit.

В FormKit вы найдете широкий выбор функций для создания форм.

1. Однокомпонентный API

Одной из интересных особенностей FormKit является его однокомпонентный API: компонент. Это дает вам доступ ко всем типам ввода. Это дает прямой и простой доступ к созданию элементов формы вместо использования собственных элементов HTML.

2. Предопределенные правила проверки

Formkit упрощает обработку проверки формы позволяя вам напрямую применять набор правил к входным данным, используя свойство проверки. Он имеет более 30 различных предопределенных правил, которые вы можете выбрать в зависимости от ваших предпочтений. Кроме того, вы можете создавать настраиваемые правила, зарегистрированные глобально или специально для ввода сложных ограничений.

3. Настраиваемые параметры стиля

FormKit поставляется без параметров стиля по умолчанию, но имеет дополнительную базовую тему — Genesis. Вам нужно установить это отдельно.

Сначала установив @формкит/темы упаковка.

установка нпм @формкит/themes

Затем импортируйте его в свой проект

Импортировать'@formkit/themes/genesis'

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

4. Генерация схемы

Генерация схемы FormKit — отличная функция, упрощающая процесс создания полей формы. Схема — это массив объектов, каждый из которых представляет элемент HTML, а вы можете представить только в формате JSON.

Массив схемы состоит из объектов узлов FormKit, которые соответствуют различным элементам, таким как элементы HTML, компоненты или текстовые узлы. Эти объекты могут ссылаться на уже существующие переменные Vue и отображать любую разметку или компонент с редактируемыми атрибутами и реквизитами, что делает его эффективным методом создания и настройки форм. По умолчанию он не зарегистрирован глобально, поэтому вам нужно его импортировать.

Импортировать {ФормКитСхема} от'@formkit/vue'

Интеграция FormKit в Vue3

Чтобы начать использовать FormKit в приложении Vue 3, сначала установите его в своем проекте. В этом разделе будет представлена ​​демонстрация использования нового приложения vue с нуля.

Предварительные условия для использования FormKit

Прежде чем начать, убедитесь, что у вас есть следующее:

  • Базовое понимание Vue и JavaScript
  • Node.js и npm настроены на вашем компьютере

Как только вы наберете скорость, вы будете готовы создать свое первое приложение.

Создание нового приложения Vue

Сначала выполните приведенную ниже команду в своем терминале, чтобы инициализировать новое приложение Vue:

инициализация npm@последний

Затем выполните шаги, указанные в подсказке, в соответствии с вашими предпочтениями. После полной установки проекта приступайте к установке FormKit в приложении.

установка нпм @формкит/vue

Далее, в main.js файл.

Импортировать { создать приложение } от'вью'
Импортировать'./style.css'
Импортировать Приложение от'./App.vue'
// Настройка формкита
Импортировать {плагин, конфигурация по умолчанию} от"@formkit/vue";
// Импорт темы Genesis
Импортировать"@formkit/темы/генезис";
createApp (приложение).использовать(плагин, конфигурация по умолчанию).mount('#приложение')

Пакет @формкит/вью поставляется в комплекте с плагином Vue и настроенной по умолчанию установкой для бесшовной установки. После того, как вы завершили настройку, все готово для включения компонент в ваше приложение Vue 3. Кроме того, вы можете добавить настройки для тем Genesis, как указано ранее.

Создание многоразовых форм с помощью FormKit

В этом разделе показано, как использовать FormKit для создания функциональной и настраиваемой формы путем создания простой регистрационной формы.

Для лучшей структуры кода хорошо создать отдельный файл для этого компонента: RegistrationForm.vue

Во-первых, определите элемент ввода, используя этот формат

тип="текст"
 метка ="Имя"
 заполнитель ="Абиола"
 проверка ="требуется | длина: 4"
помощь = "Введите не менее 4 символов"
<ФормКит/>

Этот код показывает, как использовать FormKit для создания текстового ввода с использованием типа текста. Свойство проверки разделяет правила с помощью вертикальной черты «|». Подсказка help размещает небольшой текст прямо под элементом ввода.

Кроме того, вы можете изучить другие типы ввода, такие как приведенные ниже.

тип="текст"
 метка ="Фамилия"
 заполнитель ="Эстер"
 проверка ="требуется | длина: 4"
помощь = "Введите не менее 4 символов"
 />
тип="электронная почта"
 метка ="Адрес электронной почты"
 значок префикса ="электронная почта"
 проверка ="требуется|электронная почта"
 заполнитель ="test@gmail.com"
 />
тип="дата"
 метка ="Дата рождения"
помощь="Введите день рождения в формате ДД/ММ/ГГГГ"
 проверка ="необходимый"
 />
 v-модель="ценить"
тип="радио"
 метка ="Пол"
: варианты ="['Мужской женский']"
помощь="Выбери свой пол"
 />
тип="файл"
 метка ="Загрузить свое фото"
 принять =".jpg, .png, .jpeg"
помощь=«Выберите свое изображение»
 />

Код показывает, как использовать некоторые другие элементы ввода и устанавливать правила проверки.

FormKit включает свойство типа под названием «форма», которое упаковывает все элементы ввода. Он отслеживает статус проверки формы и блокирует пользователей от ее отправки, если какие-либо входные данные недействительны. Кроме того, он автоматически генерирует кнопку отправки.

тип="форма"
 форма-сорт="внешний контейнер"
 метка отправки ="Регистр"
@представлять на рассмотрение="Регистр">

Объединение всего вместе дает полную форму, как показано на изображении ниже.

Генерация формы с использованием схемы FormKit

Схемы JSON позволяют создавать формы, аналогичные элементам ввода, как это делалось ранее. Чтобы сгенерировать форму, просто предоставьте массив схемы в компонент с помощью схема опора

Массив схем

константа схема = [
 {
 $формкит: "электронная почта",
 имя: "электронная почта",
 этикетка: "Адрес электронной почты",
 заполнитель: "Введите адрес электронной почты",
 Проверка: "требуется|электронная почта",
 },
 {
 $формкит: 'пароль',
 имя: 'пароль',
 этикетка: 'Пароль',
 Проверка: 'требуется | длина: 5,16'
 },
 {
 $формкит: 'пароль',
 имя: 'подтвердить пароль',
 этикетка: 'Подтвердите пароль',
 Проверка: 'требуется | подтвердить',
 валидацияметка: 'Подтверждение пароля',
 },
 ];

Затем он передается реквизиту в компоненте FormKit.

"форма" форма-сорт="внешний контейнер"представитьметка="Авторизоваться">
<FormKitСхема:схема="схема" />
ФормКит>

Это окончательный сгенерированный вывод:

Более быстрый подход к созданию форм в Vue3

FormKit обеспечивает более быстрый и эффективный подход к созданию форм в Vue 3. С помощью FormKit вы можете избавиться от необходимости создавать стандартные шаблоны с нуля, что позволит вам сосредоточиться на непосредственной реализации логики. Этот оптимизированный процесс не только экономит время, но и повышает производительность.

Кроме того, FormKit обеспечивает динамическую визуализацию форм посредством условной визуализации. Эта функция позволяет создавать интерактивные и удобные для пользователей интерфейсы, в которых элементы формы отображаются или скрываются в зависимости от определенных условий.