Behöver du blanketter för ditt nästa projekt? Så här skapar du formulär med FormKit.
Formulär är porten för användare att engagera sig i din applikation och för att tillhandahålla viktig data för uppgifter som kontoskapande, betalningshantering och informationsinsamling. Men att bygga former kan vara en skrämmande uppgift, som kräver omfattande kod som är tidskrävande och felbenägen
FormKit erbjuder en lösning genom att tillhandahålla förbyggda komponenter som eliminerar behovet av boilerplate-kod. Så här använder du den.
Vad är FormKit?
FormKit är ett ramverk för formulärbyggande med öppen källkod som utvecklats specifikt för Vue 3, designat för att förenkla processen att skapa produktionsklara formulär av hög kvalitet. Det är en förbättrad version av det populära Vue Formulera bibliotek och tillhandahåller över 25 anpassningsbara och tillgängliga inmatningsalternativ, tillsammans med en fördefinierad uppsättning valideringsregler.
FormKit erbjuder också möjligheten att generera formulär via JSON-kompatibla dynamiska scheman, vilket gör det enkelt att snabbt skapa komplexa formulär. Dessutom har FormKit en aktiv community på Discord, som ger stöd och främjar samarbete mellan användare. Med sina omfattande funktioner och stödsystem är FormKit ett pålitligt och effektivt verktyg för utvecklare som vill bygga formulär för sina Vue 3-projekt.
Funktioner i FormKit Framework
Du hittar ett brett urval av formbyggande funktioner i FormKit.
1. Single Component API
En av de intressanta funktionerna i FormKit är dess enkomponents API: komponent. Det ger dig tillgång till alla inmatningstyper. Detta ger direkt och enkel tillgång till skapandet av formulärelement istället för att behöva använda inbyggda HTML-element.
2. Fördefinierade valideringsregler
Formkit förenklar hanteringen av formulärvalideringar genom att låta dig tillämpa en uppsättning regler direkt på ingångarna med hjälp av valideringspropet. Den har över 30 olika fördefinierade regler som du kan välja beroende på dina önskemål. Alternativt kan du skapa anpassade regler registrerade globalt eller specifikt på input för komplexa begränsningar.
3. Anpassningsbara stylingalternativ
FormKit kommer utan standardalternativ för styling men har ett valfritt grundtema - Genesis. Du måste installera detta separat.
Genom att först installera @formkit/teman paket.
npm installera @formkit/themesImportera det sedan till ditt projekt
importera'@formkit/themes/genesis'Andra stilalternativ inkluderar användningen av anpassade klasser som låter dig tillämpa dina egna stilar och klasser på FormKits tillhandahållna uppmärkning.
4. Schemagenerering
FormKits schemagenerering är en utmärkt funktion som förenklar processen att skapa formulärfält. Ett schema är en array av objekt, där varje objekt representerar ett HTML-element och du kan endast representera i JSON-format.
Schemamatrisen består av FormKit-nodobjekt som motsvarar olika element, såsom HTML-element, komponenter eller textnoder. Dessa objekt kan referera till redan existerande Vue-variabler och återge alla markeringar eller komponenter med redigerbara attribut och rekvisita, vilket gör det till en effektiv metod för att bygga och anpassa formulär. Som standard är den inte registrerad globalt, så du måste importera den.
importera { FormKitSchema } från'@formkit/vue'Integrering av FormKit i Vue3
För att börja använda FormKit i en Vue 3-applikation, installera först det i ditt projekt. Det här avsnittet kommer att involvera en demo med en ny vue-applikation från början.
Förutsättningar för att använda FormKit
Innan du börjar, se till att du har följande:
- Grundläggande förståelse för Vue och JavaScript
- Node.js och npm ställs in på din dator
När du är igång är du redo att skapa din första app.
Skapa en ny Vue-applikation
Kör först kommandot nedan i din terminal för att initiera en ny Vue-applikation:
npm init vue@senastFölj sedan stegen som anges i prompten enligt dina önskemål. Efter att projektet har installerats helt, fortsätt att installera FormKit i applikationen.
npm installera @formkit/vue Nästa, i main.js fil.
importera { createApp } från'vue'
importera'./style.css'
importera App från'./App.vue'
// Ställ in Formkit
importera { plugin, defaultConfig } från"@formkit/vue";
// Importera Genesis-temat
importera"@formkit/teman/genesis";
createApp (App).use(plugin, defaultConfig).mount('#app')Förpackningen @formkit/vue levereras med ett Vue-plugin och en standardkonfigurerad installation för sömlös installation. När du har slutfört installationen är du redo att införliva komponent i din Vue 3-applikation. Du kan också lägga till inställningarna för Genesis-teman som nämnts tidigare.
Skapa återanvändbara formulär med FormKit
Det här avsnittet visar hur man använder FormKit för att bygga ett funktionellt och anpassningsbart formulär genom att skapa ett enkelt registreringsformulär.
För en bättre kodstruktur är det bra att skapa en separat fil för denna komponent: Registreringsformulär.vue
Först definierar du inmatningselementet med detta format
typ="text"
etikett="Förnamn"
platshållare="Abiola"
validering="required|längd: 4"
hjälp = "Ange minst 4 tecken"
<FormKit/>Den här koden visar hur man använder FormKit för att generera en textinmatning med en typ av text. Valideringsförslaget separerar regler med hjälp av rörsymbolen "|". Hjälprekvisiten placerar en liten text precis under inmatningselementet.
Du kan också utforska andra inmatningstyper som de nedan.
typ="text"
etikett="Efternamn"
platshållare="Ester"
validering="required|längd: 4"
hjälp = "Ange minst 4 tecken"
/>
typ="e-post"
etikett="E-postadress"
prefix-ikon="e-post"
validering="required|e-post"
platshållare="[email protected]"
/>
typ="datum"
etikett="Födelsedatum"
hjälp="Ange din födelsedag i formatet-DD/MM/ÅÅÅÅ"
validering="nödvändig"
/> v-modell="värde"
typ="radio"
etikett="Kön"
:alternativ="['Man kvinna']"
hjälp="Välj ditt kön"
/>
typ="fil"
etikett="Ladda upp ditt foto"
acceptera=".jpg,.png,.jpeg"
hjälp="Välj din bild"
/>
Koden visar hur man använder några av de andra inmatningselementen och ställer in valideringsreglerna.
FormKit innehåller en typprop som kallas "form" som omsluter alla inmatningselement. Den övervakar valideringsstatusen för formuläret och blockerar användare från att skicka in det om några inmatningar är ogiltiga. Dessutom genererar den automatiskt en skicka-knapp.
typ="form"
form-klass="yttre behållare"
submit-label="Registrera"
@Skicka in="Registrera">
Att kombinera allt tillsammans presenterar det fullständiga formuläret, som visas i bilden nedan.
Formgenerering med hjälp av FormKits schema
Med JSON-scheman är det möjligt att generera formulär som liknar indataelement, som gjorts tidigare. För att skapa formuläret, tillhandahåll helt enkelt din schemamatris till komponent genom att använda schema stötta.
Schema Array
konst schema = [
{
$formkit: "e-post",
namn: "e-post",
märka: "E-postadress",
Platshållare: "Ange din e-postadress",
godkännande: "required|e-post",
},
{
$formkit: 'Lösenord',
namn: 'Lösenord',
märka: 'Lösenord',
godkännande: "required|längd: 5,16"
},
{
$formkit: 'Lösenord',
namn: 'bekräfta lösenord',
märka: 'Bekräfta lösenord',
godkännande: 'required|confirm',
validationLabel: 'lösenordsbekräftelse',
},
];Det skickas sedan till rekvisiten i FormKit-komponenten.
"form" form-klass="yttre behållare"submitlabel="Logga in">
<FormKitSchema:schema="schema" />
FormKit> Detta är den slutgiltiga genererade utgången:
Ett snabbare tillvägagångssätt för att bygga formulär i Vue3
FormKit ger ett snabbare och mer effektivt tillvägagångssätt för att bygga formulär i Vue 3. Med FormKit kan du eliminera behovet av att skapa mallar från grunden, så att du kan fokusera på att implementera logiken direkt. Denna strömlinjeformade process sparar inte bara tid utan ökar också produktiviteten.
Dessutom möjliggör FormKit dynamisk rendering av formulär genom villkorlig rendering. Den här funktionen gör att du kan skapa interaktiva och användarvänliga gränssnitt för användare, där formulärelement visas eller döljs baserat på vissa villkor.