Ai nevoie de formulare pentru următorul tău proiect? Iată cum să creați formulare cu FormKit.

Formularele sunt poarta de acces pentru utilizatori pentru a interacționa cu aplicația dvs. și pentru a furniza date esențiale pentru activități precum crearea contului, procesarea plăților și colectarea de informații. Dar construirea formelor poate fi o sarcină descurajantă, care necesită un cod general extins, care consumă timp și este predispus la erori

FormKit oferă o soluție prin furnizarea de componente prefabricate care elimină necesitatea codului standard. Iată cum să-l folosești.

Ce este FormKit?

FormKit este un cadru open-source de creare a formularelor dezvoltat special pentru Vue 3, conceput pentru a simplifica procesul de creare a formularelor de înaltă calitate, pregătite pentru producție. Este o versiune îmbunătățită a popularului Vue Formulate bibliotecă și oferă peste 25 de opțiuni de intrare personalizabile și accesibile, împreună cu un set predefinit de reguli de validare.

FormKit oferă, de asemenea, capacitatea de a genera formulare prin scheme dinamice compatibile cu JSON, facilitând crearea rapidă a formularelor complexe. În plus, FormKit are o comunitate activă pe Discord, oferind sprijin și încurajând colaborarea între utilizatori. Cu funcțiile sale cuprinzătoare și sistemul de asistență, FormKit este un instrument de încredere și eficient pentru dezvoltatorii care doresc să creeze formulare pentru proiectele lor Vue 3.

instagram viewer

Caracteristici ale cadrului FormKit

Veți găsi o selecție largă de funcții de creare a formularelor în FormKit.

1. API cu o singură componentă

Una dintre caracteristicile interesante ale FormKit este API-ul său cu o singură componentă: componentă. Vă oferă acces la toate tipurile de intrare. Acest lucru oferă acces direct și ușor la crearea elementelor de formular în loc să fie nevoie să utilizați elemente HTML native.

2. Reguli de validare predefinite

Formkit simplifică gestionarea validărilor de formulare permițându-vă să aplicați direct un set de reguli la intrări folosind prop. de validare. Are peste 30 de reguli diferite predefinite pe care le puteți selecta în funcție de preferințele dvs. Alternativ, puteți crea reguli personalizate înregistrate la nivel global sau în mod specific la intrare pentru restricții complexe.

3. Opțiuni de stil personalizate

FormKit nu vine cu opțiuni de stil implicite, dar are o temă de bază opțională - Genesis. Trebuie să instalați acest lucru separat.

Prin instalarea mai întâi a @formkit/teme pachet.

instalare npm @formkit/themes

Apoi importați-l în proiectul dvs

import„@formkit/themes/genesis”

Alte opțiuni de stil includ utilizarea unor clase personalizate care vă permit să aplicați propriile stiluri și clase la marcajul furnizat de FormKit.

4. Generarea Schemei

Generarea schemei FormKit este o caracteristică excelentă care simplifică procesul de creare a câmpurilor de formular. O schemă este o matrice de obiecte, fiecare obiect reprezentând un element HTML și puteți reprezenta doar în format JSON.

Matricea de schemă constă din obiecte nod FormKit care corespund diferitelor elemente, cum ar fi elemente HTML, componente sau noduri text. Aceste obiecte pot face referire la variabile Vue preexistente și pot reda orice marcaj sau componentă cu atribute și elemente de recuzită editabile, făcându-l o metodă eficientă de construire și personalizare a formularelor. În mod implicit, nu este înregistrat la nivel global, așa că trebuie să îl importați.

import { FormKitSchema } din„@formkit/vue”

Integrarea FormKit în Vue3

Pentru a începe să utilizați FormKit într-o aplicație Vue 3, mai întâi, instalați-o în proiectul dvs. Această secțiune va implica o demonstrație folosind o nouă aplicație vue de la zero.

Cerințe preliminare pentru utilizarea FormKit

Înainte de a începe, asigurați-vă că aveți următoarele:

  • Înțelegerea fundamentală a Vue și JavaScript
  • Node.js și npm sunt configurate pe computer

Odată ce ești la curent, ești gata să creezi prima ta aplicație.

Crearea unei noi aplicații Vue

Mai întâi, rulați comanda de mai jos în terminalul dvs. pentru a inițializa o nouă aplicație Vue:

npm init vue@cele mai recente

Apoi urmați pașii specificați în prompt în funcție de preferințele dvs. După ce proiectul a fost complet instalat, continuați să instalați FormKit în aplicație.

instalare npm @formkit/vue

În continuare, în main.js fişier.

import { createApp } din„vedere”
import„./style.css”
import App din„./App.vue”
// Configurați Formkit
import { plugin, defaultConfig } din„@formkit/vue”;
// Importă tema Genesis
import„@formkit/themes/genesis”;
createApp (App).use(conecteaza, defaultConfig).mount(„#aplicație”)

Pachetul @formkit/vue vine la pachet cu un plugin Vue și o configurație configurată implicit pentru o instalare fără probleme. Odată ce ați finalizat configurarea, sunteți gata să încorporați componentă în aplicația dumneavoastră Vue 3. De asemenea, puteți adăuga configurația pentru temele Genesis așa cum sa menționat mai devreme.

Crearea de formulare reutilizabile cu FormKit

Această secțiune demonstrează cum să utilizați FormKit în construirea unui formular funcțional și personalizabil prin crearea unui formular simplu de înregistrare.

Pentru o structură de cod mai bună, este bine să creați un fișier separat pentru această componentă: RegistrationForm.vue

În primul rând, definiți elementul de intrare folosind acest format

tip="text"
 etichetă="Nume"
 substituent="Abiola"
 validare=„necesar|lungime: 4”
Ajutor = „Introduceți minimum 4 caractere”
<FormKit/>

Acest cod arată cum să utilizați FormKit pentru a genera o introducere de text folosind un tip de text. Elementul de validare separă regulile folosind simbolul conductei „|”. Elementul de ajutor poziționează un text mic chiar sub elementul de intrare.

De asemenea, puteți explora alte tipuri de introducere, cum ar fi cele de mai jos.

tip="text"
 etichetă="Nume"
 substituent="Esther"
 validare=„necesar|lungime: 4”
Ajutor = „Introduceți minimum 4 caractere”
 />
tip="e-mail"
 etichetă="Adresa de e-mail"
 prefix-icoana="e-mail"
 validare=„necesar|e-mail”
 substituent=„[email protected]”
 />
tip="Data"
 etichetă="Data nașterii"
Ajutor=„Introduceți ziua de naștere în formatul- ZZ/LL/AAAA”
 validare="necesar"
 />
 v-model="valoare"
tip="radio"
 etichetă="Gen"
 :opțiuni="['Masculin Feminin']"
Ajutor=„Selectează-ți sexul”
 />
tip="fişier"
 etichetă="Incarca-ti fotografia"
 accept=„.jpg,.png,.jpeg”
Ajutor=„Selectează-ți imaginea”
 />

Codul arată cum să utilizați unele dintre celelalte elemente de intrare și să setați regulile de validare.

FormKit include o prop de tip numită „form” care include toate elementele de intrare. Acesta monitorizează starea de validare a formularului și blochează utilizatorii să-l trimită dacă vreo intrare este nevalidă. În plus, generează automat un buton de trimitere.

tip="formă"
 formă-clasă="container exterior"
 submit-label="Inregistreaza-te"
@Trimite="Inregistreaza-te">

Combinând totul împreună, se prezintă formularul complet, așa cum se arată în imaginea de mai jos.

Generarea formularului folosind schema FormKit

Cu schemele JSON, este posibil să se genereze formulare similare elementelor de intrare, așa cum sa făcut mai devreme. Pentru a genera formularul, furnizați pur și simplu matricea schemei dvs. la componentă prin utilizarea schemă recuzită.

Scheme Array

const schema = [
 {
 $formkit: "e-mail",
 Nume: "e-mail",
 eticheta: "Adresa de e-mail",
 substituent: "Introduceți adresa dvs. de email",
 validare: „necesar|e-mail”,
 },
 {
 $formkit: 'parola',
 Nume: 'parola',
 eticheta: 'Parola',
 validare: „necesar|lungime: 5,16”
 },
 {
 $formkit: 'parola',
 Nume: 'confirmarea parolei',
 eticheta: 'Confirmă parola',
 validare: 'necesar|confirma',
 validationLabel: 'Confirmarea parolei',
 },
 ];

Acesta este apoi trecut la prop în componenta FormKit.

"formă" formă-clasă="container exterior"submitlabel="Log in">
<FormKitSchema:schemă="schemă" />
FormKit>

Aceasta este rezultatul final generat:

O abordare mai rapidă a construirii formularelor în Vue3

FormKit oferă o abordare mai rapidă și mai eficientă pentru construirea de formulare în Vue 3. Cu FormKit, puteți elimina necesitatea de a crea șabloane standard de la zero, permițându-vă să vă concentrați pe implementarea directă a logicii. Acest proces simplificat nu numai că economisește timp, dar crește și productivitatea.

În plus, FormKit permite randarea dinamică a formularelor prin randarea condiționată. Această caracteristică vă permite să creați interfețe interactive și ușor de utilizat pentru utilizatori, în care elementele de formular se afișează sau se ascund în funcție de anumite condiții.