Har du brug for formularer til dit næste projekt? Sådan opretter du formularer med FormKit.
Formularer er gatewayen for brugere til at engagere sig i din applikation og til at levere væsentlige data til opgaver som kontooprettelse, betalingsbehandling og indsamling af oplysninger. Men at bygge formularer kan være en skræmmende opgave, der kræver omfattende standardkode, der er tidskrævende og fejltilbøjelig
FormKit tilbyder en løsning ved at levere præbyggede komponenter, der eliminerer behovet for kedelkode. Sådan bruger du det.
Hvad er FormKit?
FormKit er en open source formular-building-ramme udviklet specifikt til Vue 3, designet til at forenkle processen med at skabe højkvalitets, produktionsklare formularer. Det er en forbedret version af det populære Vue-formulering bibliotek og giver over 25 tilpassede og tilgængelige inputmuligheder sammen med et foruddefineret sæt valideringsregler.
FormKit tilbyder også muligheden for at generere formularer via JSON-kompatible dynamiske skemaer, hvilket gør det nemt at oprette komplekse formularer hurtigt. Derudover har FormKit et aktivt fællesskab på Discord, der yder støtte og fremmer samarbejde mellem brugere. Med sine omfattende funktioner og supportsystem er FormKit et pålideligt og effektivt værktøj for udviklere, der ønsker at bygge formularer til deres Vue 3-projekter.
Funktioner i FormKit Framework
Du finder et bredt udvalg af formopbyggende funktioner i FormKit.
1. Enkeltkomponent API
En af de interessante funktioner i FormKit er dens enkeltkomponent API: komponent. Det giver dig adgang til alle inputtyper. Dette giver direkte og nem adgang til oprettelsen af formularelementer i stedet for at skulle bruge native HTML-elementer.
2. Foruddefinerede valideringsregler
Formkit forenkler håndteringen af formularvalideringer ved at give dig mulighed for direkte at anvende et sæt regler på inputs ved hjælp af valideringsprop. Den har over 30 forskellige foruddefinerede regler, som du kan vælge afhængigt af dine præferencer. Alternativt kan du oprette brugerdefinerede regler, der er registreret globalt eller specifikt på input til komplekse begrænsninger.
3. Tilpasselige stylingmuligheder
FormKit kommer uden standard stylingmuligheder, men har et valgfrit basistema - Genesis. Du skal installere dette separat.
Ved først at installere @formkit/temaer pakke.
npm installere @formkit/themesImporter det derefter til dit projekt
importere'@formkit/temaer/genesis'Andre stilmuligheder inkluderer brugen af brugerdefinerede klasser, som giver dig mulighed for at anvende dine egne stilarter og klasser til FormKits leverede opmærkning.
4. Skemagenerering
FormKits skemagenerering er en fremragende funktion, der forenkler processen med at oprette formularfelter. Et skema er en række objekter, hvor hvert objekt repræsenterer et HTML-element og du kan kun repræsentere i JSON-format.
Skema-arrayet består af FormKit-nodeobjekter, der svarer til forskellige elementer, såsom HTML-elementer, komponenter eller tekstnoder. Disse objekter kan referere til allerede eksisterende Vue-variabler og gengive enhver markering eller komponent med redigerbare attributter og rekvisitter, hvilket gør det til en effektiv metode til at bygge og tilpasse formularer. Som standard er det ikke registreret globalt, så du skal importere det.
importere { FormKitSchema } fra'@formkit/vue'Integrering af FormKit i Vue3
For at begynde at bruge FormKit i en Vue 3-applikation skal du først installere det i dit projekt. Dette afsnit vil involvere en demo, der bruger en ny vue-applikation fra bunden.
Forudsætninger for at bruge FormKit
Før du starter, skal du sørge for at have følgende:
- Grundlæggende forståelse af Vue og JavaScript
- Node.js og npm opsat på din computer
Når du er oppe at køre, er du klar til at oprette din første app.
Oprettelse af en ny Vue-applikation
Kør først kommandoen nedenfor i din terminal for at initialisere en ny Vue-applikation:
npm init vue@senesteFølg derefter de trin, der er angivet i prompten i henhold til dine præferencer. Efter at projektet er blevet fuldstændigt installeret, skal du fortsætte med at installere FormKit i applikationen.
npm installere @formkit/vue Dernæst i main.js fil.
importere { createApp } fra'vue'
importere'./style.css'
importere App fra'./App.vue'
// Opsætning af Formkit
importere { plugin, defaultConfig } fra"@formkit/vue";
// Importer Genesis-temaet
importere"@formkit/temaer/genesis";
createApp (App).use(plugin, defaultConfig).mount('#app')Pakken @formkit/vue leveres med et Vue-plugin og en standardkonfigureret opsætning til problemfri installation. Når du har fuldført opsætningen, er du klar til at inkorporere komponent i din Vue 3-applikation. Du kan også tilføje opsætningen til Genesis-temaerne som nævnt tidligere.
Oprettelse af genanvendelige formularer med FormKit
Dette afsnit viser, hvordan man bruger FormKit til at opbygge en funktionel og tilpasselig formular ved at oprette en simpel registreringsformular.
For en bedre kodestruktur er det godt at oprette en separat fil til denne komponent: Tilmeldingsformular.vue
Først skal du definere input-elementet ved hjælp af dette format
type="tekst"
etiket="Fornavn"
pladsholder="Abiola"
validering="påkrævet|længde: 4"
Hjælp = "Indtast minimum 4 tegn"
<FormKit/>Denne kode viser, hvordan du bruger FormKit til at generere et tekstinput ved hjælp af en type tekst. Valideringsproppen adskiller regler ved hjælp af rørsymbolet "|". Hjælp rekvisiten placerer en lille tekst lige under input-elementet.
Du kan også udforske andre inputtyper som dem nedenfor.
type="tekst"
etiket="Efternavn"
pladsholder="Esther"
validering="påkrævet|længde: 4"
Hjælp = "Indtast minimum 4 tegn"
/>
type="e-mail"
etiket="Email adresse"
præfiks-ikon="e-mail"
validering="påkrævet|e-mail"
pladsholder="[email protected]"
/>
type="dato"
etiket="Fødselsdato"
Hjælp="Indtast din fødselsdag i formatet DD/MM/ÅÅÅÅ"
validering="påkrævet"
/> v-model="værdi"
type="radio"
etiket="Køn"
:indstillinger="['Mand kvinde']"
Hjælp="Vælg dit køn"
/>
type="fil"
etiket="Upload dit billede"
acceptere=".jpg,.png,.jpeg"
Hjælp="Vælg dit billede"
/>
Koden viser, hvordan man bruger nogle af de andre input-elementer og indstiller valideringsreglerne.
FormKit indeholder en type rekvisit kaldet "form", der omslutter alle input-elementer. Den overvåger formularens valideringsstatus og blokerer brugere i at indsende den, hvis nogen input er ugyldige. Derudover genererer den automatisk en send-knap.
type="form"
form-klasse="ydre beholder"
indsend-etiket="Tilmeld"
@Indsend="Tilmeld">
Ved at kombinere alt sammen præsenteres den komplette formular, som vist på billedet nedenfor.
Formgenerering ved hjælp af FormKits skema
Med JSON-skemaerne er det muligt at generere formularer, der ligner input-elementer, som gjort tidligere. For at generere formularen skal du blot give dit skema-array til komponent ved at bruge skema rekvisit.
The Scheme Array
konst skema = [
{
$formkit: "e-mail",
navn: "e-mail",
etiket: "Email adresse",
pladsholder: "Indtast din e-mail",
validering: "påkrævet|e-mail",
},
{
$formkit: 'adgangskode',
navn: 'adgangskode',
etiket: 'Adgangskode',
validering: 'påkrævet|længde: 5,16'
},
{
$formkit: 'adgangskode',
navn: 'adgangskodebekræft',
etiket: 'Bekræft kodeord',
validering: 'påkrævet|bekræft',
valideringsetiket: 'Kodeords bekræftelse',
},
];Det sendes derefter til rekvisitten i FormKit-komponenten.
"form" form-klasse="ydre beholder"submitlabel="Log på">
<FormKitSchema:skema="skema" />
FormKit> Dette er det endelige genererede output:
En hurtigere tilgang til opbygning af formularer i Vue3
FormKit giver en hurtigere og mere effektiv tilgang til opbygning af formularer i Vue 3. Med FormKit kan du eliminere behovet for at oprette boilerplate-skabeloner fra bunden, så du kan fokusere på at implementere logikken direkte. Denne strømlinede proces sparer ikke kun tid, men øger også produktiviteten.
Derudover muliggør FormKit den dynamiske gengivelse af formularer gennem betinget gengivelse. Denne funktion giver dig mulighed for at skabe interaktive og brugervenlige grænseflader til brugere, hvor formularelementer vises eller skjules baseret på bestemte forhold.