Trenger du skjemaer til ditt neste prosjekt? Slik lager du skjemaer med FormKit.
Skjemaer er inngangsporten for brukere til å engasjere seg i applikasjonen din og for å gi viktige data for oppgaver som kontooppretting, betalingsbehandling og informasjonsinnsamling. Men å bygge skjemaer kan være en skremmende oppgave, som krever omfattende standardkode som er tidkrevende og utsatt for feil
FormKit tilbyr en løsning ved å tilby forhåndsbygde komponenter som eliminerer behovet for boilerplate-kode. Slik bruker du den.
Hva er FormKit?
FormKit er en åpen kildekode for skjemabygging utviklet spesielt for Vue 3, designet for å forenkle prosessen med å lage produksjonsklare skjemaer av høy kvalitet. Det er en forbedret versjon av det populære Vue Formuler bibliotek og gir over 25 tilpassbare og tilgjengelige inndataalternativer, sammen med et forhåndsdefinert sett med valideringsregler.
FormKit tilbyr også muligheten til å generere skjemaer via JSON-kompatible dynamiske skjemaer, noe som gjør det enkelt å lage komplekse skjemaer raskt. I tillegg har FormKit et aktivt fellesskap på Discord, som gir støtte og fremmer samarbeid mellom brukere. Med sine omfattende funksjoner og støttesystem er FormKit et pålitelig og effektivt verktøy for utviklere som ønsker å bygge skjemaer for Vue 3-prosjektene deres.
Funksjoner i FormKit Framework
Du finner et bredt utvalg av skjemabyggende funksjoner i FormKit.
1. Enkeltkomponent API
En av de interessante funksjonene til FormKit er dens enkomponent API: komponent. Den gir deg tilgang til alle inndatatyper. Dette gir direkte og enkel tilgang til å lage skjemaelementer i stedet for å måtte bruke native HTML-elementer.
2. Forhåndsdefinerte valideringsregler
Formkit forenkler håndteringen av skjemavalideringer ved å la deg bruke et sett med regler direkte på inngangene ved å bruke valideringsprop. Den har over 30 forskjellige forhåndsdefinerte regler som du kan velge avhengig av dine preferanser. Alternativt kan du opprette egendefinerte regler registrert globalt eller spesifikt på input for komplekse restriksjoner.
3. Tilpassbare stylingalternativer
FormKit kommer uten standard stylingalternativer, men har et valgfritt basistema - Genesis. Du må installere dette separat.
Ved først å installere @formkit/temaer pakke.
npm installere @formsett/themesImporter den deretter til prosjektet ditt
import'@formkit/themes/genesis'Andre stylingalternativer inkluderer bruk av egendefinerte klasser som lar deg bruke dine egne stiler og klasser på FormKits angitte markering.
4. Schema Generering
FormKits skjemagenerering er en utmerket funksjon som forenkler prosessen med å lage skjemafelt. Et skjema er en rekke objekter, der hvert objekt representerer et HTML-element og du kan kun representere i JSON-format.
Skjemamatrisen består av FormKit-nodeobjekter som tilsvarer ulike elementer, for eksempel HTML-elementer, komponenter eller tekstnoder. Disse objektene kan referere til forhåndseksisterende Vue-variabler og gjengi enhver markering eller komponent med redigerbare attributter og rekvisitter, noe som gjør det til en effektiv metode for å bygge og tilpasse skjemaer. Som standard er det ikke registrert globalt, så du må importere det.
import { FormKitSchema } fra'@formkit/vue'Integrering av FormKit i Vue3
For å begynne å bruke FormKit i en Vue 3-applikasjon, installer den først i prosjektet ditt. Denne delen vil involvere en demo med en ny vue-applikasjon fra bunnen av.
Forutsetninger for å bruke FormKit
Før du starter, sørg for at du har følgende:
- Grunnleggende forståelse av Vue og JavaScript
- Node.js og npm satt opp på datamaskinen din
Når du er på farten, er du klar til å lage din første app.
Opprette en ny Vue-applikasjon
Kjør først kommandoen nedenfor i terminalen din for å initialisere en ny Vue-applikasjon:
npm init vue@sisteFølg deretter trinnene som er spesifisert i ledeteksten i henhold til dine preferanser. Etter at prosjektet er fullstendig installert, fortsett å installere FormKit i applikasjonen.
npm installere @formsett/vue Neste, i main.js fil.
import { createApp } fra'vue'
import'./style.css'
import App fra'./App.vue'
// Sett opp Formkit
import { plugin, defaultConfig } fra"@formkit/vue";
// Importer Genesis-temaet
import"@formkit/temaer/genesis";
createApp (App).use(plugg inn, defaultConfig).mount('#app')Pakken @formkit/vue leveres med en Vue-plugin og et standardkonfigurert oppsett for sømløs installasjon. Når du har fullført oppsettet, er du klar til å innlemme komponent i Vue 3-applikasjonen din. Du kan også legge til oppsettet for Genesis-temaene som nevnt tidligere.
Opprette gjenbrukbare skjemaer med FormKit
Denne delen viser hvordan du bruker FormKit til å bygge et funksjonelt og tilpassbart skjema ved å lage et enkelt registreringsskjema.
For en bedre kodestruktur er det greit å lage en egen fil for denne komponenten: Registreringsskjema.vue
Først definerer du inngangselementet ved å bruke dette formatet
type="tekst"
label="Fornavn"
plassholder="Abiola"
validering="påkrevd|lengde: 4"
hjelp = "Skriv inn minimum 4 tegn"
<FormKit/>Denne koden viser hvordan du bruker FormKit til å generere en tekstinndata ved hjelp av en type tekst. Valideringsstøtten skiller regler ved å bruke rørsymbolet "|". Hjelpe-rekvisitten plasserer en liten tekst rett under input-elementet.
Du kan også utforske andre inndatatyper som de nedenfor.
type="tekst"
label="Etternavn"
plassholder="Ester"
validering="påkrevd|lengde: 4"
hjelp = "Skriv inn minimum 4 tegn"
/>
type="e-post"
label="Epostadresse"
prefiks-ikon="e-post"
validering="påkrevd|e-post"
plassholder="[email protected]"
/>
type="Dato"
label="Fødselsdato"
hjelp="Skriv inn fødselsdatoen din i formatet DD/MM/ÅÅÅÅ"
validering="påkrevd"
/> v-modell="verdi"
type="radio"
label="kjønn"
:alternativer="['Mann Kvinne']"
hjelp="Velg kjønnet ditt"
/>
type="fil"
label="Last opp bildet ditt"
godta=".jpg,.png,.jpeg"
hjelp="Velg bildet ditt"
/>
Koden viser hvordan du bruker noen av de andre inngangselementene og setter valideringsreglene.
FormKit inkluderer en type prop kalt "form" som omslutter alle inndataelementene. Den overvåker valideringsstatusen til skjemaet og blokkerer brukere fra å sende det hvis noen inndata er ugyldige. I tillegg genererer den automatisk en send-knapp.
type="form"
form-klasse="ytre beholder"
submit-label="Registrere"
@sende inn="Registrere">
Ved å kombinere alt sammen presenterer det komplette skjemaet, som vist på bildet nedenfor.
Skjemagenerering ved hjelp av FormKits skjema
Med JSON-skjemaene er det mulig å generere skjemaer som ligner på input-elementer, som gjort tidligere. For å generere skjemaet, oppgi skjemamatrisen til komponent ved å bruke skjema rekvisitt.
The Scheme Array
konst skjema = [
{
$formkit: "e-post",
Navn: "e-post",
merkelapp: "Epostadresse",
plassholder: "Skriv inn din email",
validering: "påkrevd|e-post",
},
{
$formkit: 'passord',
Navn: 'passord',
merkelapp: 'Passord',
validering: 'påkrevd|lengde: 5,16'
},
{
$formkit: 'passord',
Navn: 'bekreft passord',
merkelapp: 'Bekreft passord',
validering: 'påkrevd|bekreft',
valideringsetikett: 'Passord bekreftelse',
},
];Den sendes deretter til rekvisitten i FormKit-komponenten.
"form" form-klasse="ytre beholder"submitlabel="Logg Inn">
<FormKitSchema:skjema="skjema" />
FormKit> Dette er den endelige genererte utgangen:
En raskere tilnærming til å bygge skjemaer i Vue3
FormKit gir en raskere og mer effektiv tilnærming til å bygge skjemaer i Vue 3. Med FormKit kan du eliminere behovet for å lage standardmaler fra bunnen av, slik at du kan fokusere på å implementere logikken direkte. Denne strømlinjeformede prosessen sparer ikke bare tid, men øker også produktiviteten.
I tillegg muliggjør FormKit dynamisk gjengivelse av skjemaer gjennom betinget gjengivelse. Denne funksjonen lar deg lage interaktive og brukervennlige grensesnitt for brukere, der skjemaelementer vises eller skjules basert på visse forhold.
