Нуждаете се от формуляри за следващия си проект? Ето как да създавате формуляри с FormKit.

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

FormKit предлага решение чрез предоставяне на предварително изградени компоненти, които премахват необходимостта от шаблонен код. Ето как да го използвате.

Какво е FormKit?

FormKit е рамка за изграждане на формуляри с отворен код, разработена специално за Vue 3, предназначена да опрости процеса на създаване на висококачествени, готови за производство форми. Това е подобрена версия на популярния Vue Formulate библиотека и предоставя над 25 адаптивни и достъпни опции за въвеждане, заедно с предварително дефиниран набор от правила за валидиране.

FormKit също предлага възможност за генериране на формуляри чрез JSON-съвместими динамични схеми, което улеснява бързото създаване на сложни формуляри. Освен това, FormKit има активна общност в Discord, предоставяйки поддръжка и насърчавайки сътрудничеството между потребителите. Със своите всеобхватни функции и система за поддръжка, FormKit е надежден и ефективен инструмент за разработчици, които искат да създават формуляри за своите Vue 3 проекти.

instagram viewer

Характеристики на FormKit Framework

Във FormKit ще намерите богат избор от функции за изграждане на формуляри.

1. Еднокомпонентен API

Една от интересните характеристики на FormKit е неговият еднокомпонентен API: компонент. Дава ви достъп до всички типове вход. Това дава директен и лесен достъп до създаването на елементи на формуляр, вместо да се налага да използвате собствени HTML елементи.

2. Предварително дефинирани правила за валидиране

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

3. Персонализируеми опции за стилизиране

FormKit се доставя без опции за стил по подразбиране, но има незадължителна основна тема - Genesis. Трябва да инсталирате това отделно.

Като първо инсталирате @formkit/теми пакет.

npm инсталирайте @formkit/themes

След това го импортирайте във вашия проект

импортиране'@formkit/themes/genesis'

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

4. Генериране на схема

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

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

импортиране { FormKitSchema } от„@formkit/vue“

Интегриране на FormKit във Vue3

За да започнете да използвате FormKit в приложение Vue 3, първо го инсталирайте във вашия проект. Този раздел ще включва демонстрация с използване на ново приложение vue от нулата.

Предпоставки за използване на FormKit

Преди да започнете, уверете се, че имате следното:

  • Фундаментално разбиране на Vue и JavaScript
  • Node.js и npm, настроени на вашия компютър

След като сте на крак, вие сте готови да създадете първото си приложение.

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

Първо изпълнете командата по-долу във вашия терминал, за да инициализирате ново приложение Vue:

npm init vue@последен

След това следвайте стъпките, посочени в подканата според вашите предпочитания. След като проектът е напълно инсталиран, продължете да инсталирате FormKit в приложението.

npm инсталирайте @formkit/vue

На следващо място, в main.js файл.

импортиране { createApp } от"vue"
импортиране'./style.css'
импортиране Приложение от'./App.vue'
// Настройка на Formkit
импортиране { плъгин, defaultConfig } от"@formkit/vue";
// Импортирайте темата Genesis
импортиране"@formkit/теми/генезис";
createApp (Приложение).use(плъгин, defaultConfig).mount('#приложение')

Пакетът @formkit/vue идва в комплект с плъгин Vue и конфигурирана по подразбиране настройка за безпроблемна инсталация. След като завършите настройката, вие сте готови да включите компонент във вашето приложение Vue 3. Освен това можете да добавите настройката за темите на Genesis, както беше посочено по-рано.

Създаване на формуляри за многократна употреба с FormKit

Този раздел демонстрира как да използвате FormKit за изграждане на функционален и адаптивен формуляр чрез създаване на прост регистрационен формуляр.

За по-добра структура на кода е добре да създадете отделен файл за този компонент: Регистрационен формуляр.vue

Първо, дефинирайте входния елемент, като използвате този формат

Тип="текст"
 етикет="Първо име"
 заместител ="Абиола"
 валидиране="необходима|дължина: 4"
помогне = „Въведете минимум 4 знака“
<FormKit/>

Този код показва как да използвате FormKit за генериране на въвеждане на текст с помощта на тип текст. Подтвърждението за валидиране разделя правилата с помощта на символа "|". Помощната опора позиционира малък текст точно под входния елемент.

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

Тип="текст"
 етикет="Фамилия"
 заместител ="Естер"
 валидиране="необходима|дължина: 4"
помогне = „Въведете минимум 4 знака“
 />
Тип="електронна поща"
 етикет="Имейл адрес"
 префикс-икона="електронна поща"
 валидиране="задължителен|имейл"
 заместител ="[email protected]"
 />
Тип="дата"
 етикет="Дата на раждане"
помогне="Въведете рождения си ден във формат - ДД/ММ/ГГГГ"
 валидиране="задължително"
 />
 v-модел="стойност"
Тип="радио"
 етикет="Пол"
 :опции="['Мъж Жена']"
помогне=„Изберете своя пол“
 />
Тип="файл"
 етикет=„Качете вашата снимка“
 приемам=".jpg,.png,.jpeg"
помогне=„Изберете вашето изображение“
 />

Кодът показва как да използвате някои от другите входни елементи и да зададете правилата за валидиране.

FormKit включва проп тип, наречен "form", който обгръща всички входни елементи. Той следи състоянието на валидиране на формуляра и блокира потребителите да го подадат, ако някои въведени данни са невалидни. Освен това автоматично генерира бутон за изпращане.

Тип="форма"
 форма-клас="външен контейнер"
 submit-label="Регистрирам"
@Изпращане="Регистрирам">

Комбинирането на всичко заедно представя пълната форма, както е показано на изображението по-долу.

Генериране на формуляр с помощта на схемата на FormKit

С JSON схемите е възможно да се генерират форми, подобни на входни елементи, както беше направено по-рано. За да генерирате формуляра, просто предоставете своя масив от схеми на компонент чрез използване на схема опора

Масивът на схемата

конст схема = [
 {
 $formkit: "електронна поща",
 име: "електронна поща",
 етикет: "Имейл адрес",
 заместител: „Въведете своя имейл“,
 валидиране: "задължителен|имейл",
 },
 {
 $formkit: "парола",
 име: "парола",
 етикет: "парола",
 валидиране: 'необходима|дължина: 5,16'
 },
 {
 $formkit: "парола",
 име: 'password_confirm',
 етикет: 'Потвърди парола',
 валидиране: 'задължително|потвърдете',
 validationLabel: 'Потвърждение на парола',
 },
 ];

След това се предава на проп в компонента FormKit.

"форма" форма-клас="външен контейнер"submitlabel="Влизам">
<FormKitSchema:схема="схема" />
FormKit>

Това е крайният генериран резултат:

По-бърз подход за изграждане на форми във Vue3

FormKit осигурява по-бърз и по-ефективен подход за изграждане на формуляри във Vue 3. С FormKit можете да елиминирате необходимостта от създаване на шаблонни шаблони от нулата, което ви позволява да се съсредоточите върху директното внедряване на логиката. Този рационализиран процес не само спестява време, но и повишава производителността.

В допълнение, FormKit позволява динамично изобразяване на формуляри чрез условно изобразяване. Тази функция ви позволява да създавате интерактивни и удобни за потребителите интерфейси, където елементите на формуляра се показват или скриват въз основа на определени условия.