Formulieren nodig voor uw volgende project? Hier leest u hoe u formulieren kunt maken met FormKit.
Formulieren zijn de toegangspoort voor gebruikers om met uw toepassing in contact te komen en om essentiële gegevens te verstrekken voor taken zoals het aanmaken van een account, het verwerken van betalingen en het verzamelen van informatie. Maar het bouwen van formulieren kan een ontmoedigende taak zijn, waarvoor uitgebreide boilerplate-code nodig is die tijdrovend en foutgevoelig is
FormKit biedt een oplossing door kant-en-klare componenten te leveren die standaardcode overbodig maken. Hier is hoe het te gebruiken.
Wat is FormKit?
FormKit is een open-source raamwerk voor het bouwen van formulieren, speciaal ontwikkeld voor Vue 3, ontworpen om het proces van het maken van hoogwaardige, productieklare formulieren te vereenvoudigen. Het is een verbeterde versie van de populaire Vue formuleren bibliotheek en biedt meer dan 25 aanpasbare en toegankelijke invoeropties, samen met een vooraf gedefinieerde set validatieregels.
FormKit biedt ook de mogelijkheid om formulieren te genereren via JSON-compatibele dynamische schema's, waardoor het eenvoudig wordt om snel complexe formulieren te maken. Daarnaast heeft FormKit een actieve community op Discord, die ondersteuning biedt en samenwerking tussen gebruikers bevordert. Met zijn uitgebreide functies en ondersteuningssysteem is FormKit een betrouwbare en efficiënte tool voor ontwikkelaars die formulieren willen bouwen voor hun Vue 3-projecten.
Functies van het FormKit-framework
U vindt een brede selectie aan functies voor het maken van formulieren in FormKit.
1. Eén component-API
Een van de interessante kenmerken van FormKit is de single-component API: bestanddeel. Het geeft u toegang tot alle invoertypen. Dit geeft directe en gemakkelijke toegang tot het maken van formulierelementen in plaats van native HTML-elementen te moeten gebruiken.
2. Vooraf gedefinieerde validatieregels
Formkit vereenvoudigt de afhandeling van formuliervalidaties door u in staat te stellen een reeks regels direct toe te passen op de invoer met behulp van de validatieprop. Het heeft meer dan 30 verschillende vooraf gedefinieerde regels die u kunt selecteren, afhankelijk van uw voorkeur. Als alternatief kunt u aangepaste regels maken die globaal of specifiek op invoer zijn geregistreerd voor complexe beperkingen.
3. Aanpasbare stylingopties
FormKit wordt geleverd zonder standaard stylingopties, maar heeft een optioneel basisthema: Genesis. Deze dient u apart te installeren.
Door eerst de @formkit/thema's pakket.
npm installeren @formkit/themesImporteer het vervolgens in uw project
importeren'@formkit/thema's/ontstaan'Andere stijlopties omvatten het gebruik van aangepaste klassen waarmee u uw eigen stijlen en klassen kunt toepassen op de door FormKit geleverde markeringen.
4. Schema genereren
Het genereren van schema's in FormKit is een uitstekende functie die het maken van formuliervelden vereenvoudigt. Een schema is een reeks objecten, waarbij elk object een HTML-element vertegenwoordigt en u kunt alleen in JSON-indeling weergeven.
De schemamatrix bestaat uit FormKit-knooppuntobjecten die overeenkomen met verschillende elementen, zoals HTML-elementen, componenten of tekstknooppunten. Deze objecten kunnen verwijzen naar reeds bestaande Vue-variabelen en elke opmaak of component weergeven met bewerkbare attributen en rekwisieten, waardoor het een efficiënte methode is om formulieren te bouwen en aan te passen. Standaard is het niet wereldwijd geregistreerd, dus u moet het importeren.
importeren { FormKit Schema } van'@formkit/vue'FormKit integreren in Vue3
Om FormKit in een Vue 3-toepassing te gaan gebruiken, installeert u het eerst binnen uw project. Deze sectie omvat een demo met een nieuwe vue-applicatie vanaf het begin.
Vereisten voor het gebruik van FormKit
Voordat u begint, moet u ervoor zorgen dat u over het volgende beschikt:
- Basiskennis van Vue en JavaScript
- Node.js en npm ingesteld op uw computer
Als je eenmaal op de hoogte bent, ben je klaar om je eerste app te maken.
Een nieuwe Vue-applicatie maken
Voer eerst de onderstaande opdracht uit in uw terminal om een nieuwe Vue-toepassing te initialiseren:
npm init vue@laatsteVolg vervolgens de stappen die in de prompt zijn opgegeven volgens uw voorkeur. Nadat het project volledig is geïnstalleerd, gaat u verder met het installeren van FormKit in de toepassing.
npm installeren @formkit/vue Vervolgens in de main.js bestand.
importeren { createApp } van'vue'
importeren'./stijl.css'
importeren app van'./App.vue'
// Stel Formkit in
importeren { plug-in, defaultConfig } van"@formkit/vue";
// Importeer het Genesis-thema
importeren"@formkit/thema's/ontstaan";
createApp (App).gebruik(inpluggen, defaultConfig).mount('#app')Het pakket @formkit/vue wordt geleverd met een Vue-plug-in en een standaard geconfigureerde installatie voor een naadloze installatie. Zodra u de installatie hebt voltooid, bent u helemaal klaar om de component in uw Vue 3-toepassing. U kunt ook de instellingen voor de Genesis-thema's toevoegen, zoals eerder vermeld.
Herbruikbare formulieren maken met FormKit
Deze sectie laat zien hoe u FormKit kunt gebruiken bij het bouwen van een functioneel en aanpasbaar formulier door een eenvoudig registratieformulier te maken.
Voor een betere codestructuur is het goed om voor dit onderdeel een apart bestand aan te maken: Registratieformulier.vue
Definieer eerst het invoerelement met behulp van dit formaat
type="tekst"
etiket="Voornaam"
tijdelijke aanduiding="Abiola"
validatie="vereist|lengte: 4"
hulp = "Voer minimaal 4 tekens in"
<FormKit/>Deze code laat zien hoe u FormKit kunt gebruiken om tekstinvoer te genereren met behulp van een type tekst. De validatieprop scheidt regels met behulp van het pipe-symbool "|". De help-prop plaatst een kleine tekst net onder het invoerelement.
U kunt ook andere invoertypen verkennen, zoals die hieronder.
type="tekst"
etiket="Achternaam"
tijdelijke aanduiding="Esther"
validatie="vereist|lengte: 4"
hulp = "Voer minimaal 4 tekens in"
/>
type="e-mail"
etiket="E-mailadres"
voorvoegsel-icoon="e-mail"
validatie="vereist|e-mail"
tijdelijke aanduiding="[email protected]"
/>
type="datum"
etiket="Geboortedatum"
hulp="Voer uw geboortedatum in met het formaat DD/MM/JJJJ"
validatie="vereist"
/> v-model="waarde"
type="radio"
etiket="Geslacht"
:opties="['Man vrouw']"
hulp="Kies je geslacht"
/>
type="bestand"
etiket="Upload je foto"
accepteren=".jpg,.png,.jpeg"
hulp="Selecteer je afbeelding"
/>
De code laat zien hoe sommige van de andere invoerelementen moeten worden gebruikt en hoe de validatieregels moeten worden ingesteld.
FormKit bevat een type prop genaamd "form" die alle invoerelementen omsluit. Het bewaakt de validatiestatus van het formulier en blokkeert gebruikers om het in te dienen als invoer ongeldig is. Bovendien genereert het automatisch een verzendknop.
type="formulier"
formulier-klas="buitencontainer"
verzendlabel="Register"
@indienen="Register">
Door alles bij elkaar te combineren, krijgt u het volledige formulier, zoals weergegeven in de onderstaande afbeelding.
Formulier genereren met behulp van het schema van FormKit
Met de JSON-schema's is het mogelijk om formulieren te genereren die vergelijkbaar zijn met invoerelementen, zoals eerder gedaan. Om het formulier te genereren, geeft u eenvoudig uw schema-array op aan het onderdeel door gebruik te maken van de schema prop.
De schema-array
const schema = [
{
$formkit: "e-mail",
naam: "e-mail",
etiket: "E-mailadres",
tijdelijke aanduiding: "Voer uw e-mailadres in",
geldigmaking: "vereist|e-mail",
},
{
$formkit: 'wachtwoord',
naam: 'wachtwoord',
etiket: 'Wachtwoord',
geldigmaking: 'vereiste|lengte: 5,16'
},
{
$formkit: 'wachtwoord',
naam: 'wachtwoord bevestigen',
etiket: 'Bevestig wachtwoord',
geldigmaking: 'vereist|bevestigen',
validatieLabel: 'wachtwoordbevestiging',
},
];Het wordt vervolgens doorgegeven aan de prop in de FormKit-component.
"formulier" formulier-klas="buitencontainer"verzendlabel="Log in">
<FormKitSchema:schema="schema" />
FormKit> Dit is de uiteindelijk gegenereerde output:
Een snellere benadering van het bouwen van formulieren in Vue3
FormKit biedt een snellere en efficiëntere aanpak voor het bouwen van formulieren in Vue 3. Met FormKit hoeft u geen standaardsjablonen meer vanaf nul te maken, zodat u zich kunt concentreren op het direct implementeren van de logica. Dit gestroomlijnde proces bespaart niet alleen tijd, maar verhoogt ook de productiviteit.
Bovendien maakt FormKit de dynamische weergave van formulieren mogelijk door middel van voorwaardelijke weergave. Met deze functie kunt u interactieve en gebruiksvriendelijke interfaces voor gebruikers maken, waar formulierelementen op basis van bepaalde voorwaarden worden weergegeven of verborgen.