Benötigen Sie Formulare für Ihr nächstes Projekt? So erstellen Sie Formulare mit FormKit.
Formulare sind das Tor für Benutzer, um mit Ihrer Anwendung zu interagieren und wichtige Daten für Aufgaben wie Kontoerstellung, Zahlungsabwicklung und Informationserfassung bereitzustellen. Das Erstellen von Formularen kann jedoch eine entmutigende Aufgabe sein und erfordert umfangreichen Boilerplate-Code, der zeitaufwändig und fehleranfällig ist
FormKit bietet eine Lösung, indem es vorgefertigte Komponenten bereitstellt, die den Bedarf an Boilerplate-Code überflüssig machen. Hier erfahren Sie, wie Sie es verwenden.
Was ist FormKit?
FormKit ist ein Open-Source-Framework zur Formularerstellung, das speziell für Vue 3 entwickelt wurde und den Prozess der Erstellung hochwertiger, produktionsbereiter Formulare vereinfachen soll. Es ist eine verbesserte Version des beliebten Vue formulieren Bibliothek und bietet über 25 anpassbare und zugängliche Eingabeoptionen sowie einen vordefinierten Satz von Validierungsregeln.
FormKit bietet außerdem die Möglichkeit, Formulare über JSON-kompatible dynamische Schemata zu generieren, sodass komplexe Formulare schnell erstellt werden können. Darüber hinaus verfügt FormKit über eine aktive Community auf Discord, die Unterstützung bietet und die Zusammenarbeit zwischen Benutzern fördert. Mit seinen umfassenden Funktionen und seinem Supportsystem ist FormKit ein zuverlässiges und effizientes Tool für Entwickler, die Formulare für ihre Vue 3-Projekte erstellen möchten.
Funktionen des FormKit Frameworks
In FormKit finden Sie eine große Auswahl an Formularerstellungsfunktionen.
1. Einzelkomponenten-API
Eine der interessanten Funktionen von FormKit ist seine Einzelkomponenten-API: Komponente. Sie erhalten Zugriff auf alle Eingabetypen. Dies ermöglicht einen direkten und einfachen Zugriff auf die Erstellung von Formularelementen, anstatt native HTML-Elemente verwenden zu müssen.
2. Vordefinierte Validierungsregeln
Formkit vereinfacht die Handhabung von Formularvalidierungen indem Sie mithilfe der Validierungsstütze einen Satz Regeln direkt auf die Eingaben anwenden können. Es verfügt über mehr als 30 verschiedene vordefinierte Regeln, die Sie je nach Wunsch auswählen können. Alternativ können Sie benutzerdefinierte Regeln erstellen, die global oder eingabespezifisch für komplexe Einschränkungen registriert werden.
3. Anpassbare Styling-Optionen
FormKit verfügt über keine Standard-Styling-Optionen, verfügt jedoch über ein optionales Basisthema – Genesis. Sie müssen dies separat installieren.
Durch die erste Installation des @formkit/themes Paket.
npm installieren @formkit/themesAnschließend importieren Sie es in Ihr Projekt
importieren'@formkit/themes/genesis'Zu den weiteren Stiloptionen gehört die Verwendung benutzerdefinierter Klassen, mit denen Sie Ihre eigenen Stile und Klassen auf das von FormKit bereitgestellte Markup anwenden können.
4. Schemagenerierung
Die Schemagenerierung von FormKit ist eine hervorragende Funktion, die den Prozess der Erstellung von Formularfeldern vereinfacht. Ein Schema ist ein Array von Objekten, wobei jedes Objekt ein HTML-Element darstellt und Sie können nur im JSON-Format darstellen.
Das Schema-Array besteht aus FormKit-Knotenobjekten, die verschiedenen Elementen entsprechen, beispielsweise HTML-Elementen, Komponenten oder Textknoten. Diese Objekte können auf bereits vorhandene Vue-Variablen verweisen und jedes Markup oder jede Komponente mit bearbeitbaren Attributen und Requisiten rendern, was es zu einer effizienten Methode zum Erstellen und Anpassen von Formularen macht. Standardmäßig ist es nicht global registriert, daher müssen Sie es importieren.
importieren {FormKitSchema} aus'@formkit/vue'FormKit in Vue3 integrieren
Um FormKit in einer Vue 3-Anwendung zu verwenden, installieren Sie es zunächst in Ihrem Projekt. In diesem Abschnitt wird eine Demo mit einer neuen Vue-Anwendung von Grund auf gezeigt.
Voraussetzungen für die Verwendung von FormKit
Bevor Sie beginnen, stellen Sie sicher, dass Sie über Folgendes verfügen:
- Grundlegendes Verständnis von Vue und JavaScript
- Node.js und npm auf Ihrem Computer einrichten
Sobald Sie mit der Geschwindigkeit vertraut sind, können Sie Ihre erste App erstellen.
Erstellen einer neuen Vue-Anwendung
Führen Sie zunächst den folgenden Befehl in Ihrem Terminal aus, um eine neue Vue-Anwendung zu initialisieren:
npm init vue@neuesteBefolgen Sie dann die in der Eingabeaufforderung angegebenen Schritte entsprechend Ihren Wünschen. Nachdem das Projekt vollständig installiert wurde, fahren Sie mit der Installation von FormKit in der Anwendung fort.
npm installieren @formkit/vue Als nächstes im main.js Datei.
importieren {createApp} aus'vue'
importieren'./style.css'
importieren App aus'./App.vue'
// Formkit einrichten
importieren { Plugin, defaultConfig } aus„@formkit/vue“;
// Importiere das Genesis-Theme
importieren„@formkit/themes/genesis“;
createApp (App).use(Plugin, defaultConfig).mount('#app')Das Paket @formkit/vue wird mit einem Vue-Plugin und einem standardmäßig konfigurierten Setup für eine nahtlose Installation geliefert. Sobald Sie die Einrichtung abgeschlossen haben, können Sie mit der Integration beginnen Komponente in Ihre Vue 3-Anwendung. Sie können auch das Setup für die Genesis-Themen hinzufügen, wie bereits erwähnt.
Wiederverwendbare Formulare mit FormKit erstellen
In diesem Abschnitt wird gezeigt, wie Sie FormKit zum Erstellen eines funktionalen und anpassbaren Formulars verwenden, indem Sie ein einfaches Registrierungsformular erstellen.
Für eine bessere Codestruktur empfiehlt es sich, eine separate Datei für diese Komponente zu erstellen: RegistrationForm.vue
Definieren Sie zunächst das Eingabeelement mit diesem Format
Typ="Text"
label="Vorname"
Platzhalter=„Abiola“
Validierung=„erforderlich|Länge: 4“
Hilfe = „Geben Sie mindestens 4 Zeichen ein“
<FormKit/>Dieser Code zeigt, wie Sie FormKit verwenden, um eine Texteingabe mithilfe eines Texttyps zu generieren. Die Validierungsstütze trennt Regeln mithilfe des Pipe-Symbols „|“. Die Hilfe-Requisite positioniert einen kleinen Text direkt unter dem Eingabeelement.
Sie können auch andere Eingabetypen wie die folgenden erkunden.
Typ="Text"
label="Familienname, Nachname"
Platzhalter=„Esther“
Validierung=„erforderlich|Länge: 4“
Hilfe = „Geben Sie mindestens 4 Zeichen ein“
/>
Typ="Email"
label="E-Mail-Addresse"
Präfix-Symbol="Email"
Validierung=„erforderlich|E-Mail“
Platzhalter=„[email protected]“
/>
Typ="Datum"
label="Geburtsdatum"
Hilfe=„Geben Sie Ihren Geburtstag im Format TT/MM/JJJJ ein.“
Validierung="erforderlich"
/> v-Modell="Wert"
Typ="Radio"
label="Geschlecht"
:optionen="['Männlich weiblich']"
Hilfe="Wähle dein Geschlecht"
/>
Typ="Datei"
label="Dein Foto hochladen"
akzeptieren=„.jpg,.png,.jpeg“
Hilfe=„Wählen Sie Ihr Bild aus“
/>
Der Code zeigt, wie einige der anderen Eingabeelemente verwendet und die Validierungsregeln festgelegt werden.
FormKit enthält eine Typ-Requisite namens „form“, die alle Eingabeelemente umschließt. Es überwacht den Validierungsstatus des Formulars und verhindert, dass Benutzer es absenden, wenn Eingaben ungültig sind. Darüber hinaus wird automatisch eine Schaltfläche zum Senden generiert.
Typ="form"
form-Klasse=„Außenbehälter“
send-label="Registrieren"
@einreichen="Registrieren">
Wenn man alles zusammenfügt, erhält man das vollständige Formular, wie im Bild unten gezeigt.
Formulargenerierung mit dem Schema von FormKit
Mit den JSON-Schemas ist es wie zuvor möglich, Formulare zu generieren, die Eingabeelementen ähneln. Um das Formular zu generieren, stellen Sie einfach Ihr Schema-Array zur Verfügung Komponente durch Nutzung der Schema Stütze.
Das Scheme-Array
const Schema = [
{
$formkit: "Email",
Name: "Email",
Etikett: "E-Mail-Addresse",
Platzhalter: "Geben sie ihre E-Mail Adresse ein",
Validierung: „erforderlich|E-Mail“,
},
{
$formkit: 'Passwort',
Name: 'Passwort',
Etikett: 'Passwort',
Validierung: 'erforderlich|Länge: 5,16'
},
{
$formkit: 'Passwort',
Name: 'Passwortbestätigung',
Etikett: 'Bestätige das Passwort',
Validierung: 'erforderlich|bestätigen',
validationLabel: 'Passwort Bestätigung',
},
];Anschließend wird es an die Requisite in der FormKit-Komponente übergeben.
"form" form-Klasse=„Außenbehälter“Submitlabel="Anmeldung">
<FormKitSchema:Schema="Schema" />
FormKit> Dies ist die endgültige generierte Ausgabe:
Ein schnellerer Ansatz zum Erstellen von Formularen in Vue3
FormKit bietet einen schnelleren und effizienteren Ansatz zum Erstellen von Formularen in Vue 3. Mit FormKit entfällt die Notwendigkeit, Boilerplate-Vorlagen von Grund auf zu erstellen, sodass Sie sich auf die direkte Implementierung der Logik konzentrieren können. Dieser optimierte Prozess spart nicht nur Zeit, sondern steigert auch die Produktivität.
Darüber hinaus ermöglicht FormKit das dynamische Rendern von Formularen durch bedingtes Rendern. Mit dieser Funktion können Sie interaktive und benutzerfreundliche Oberflächen für Benutzer erstellen, in denen Formularelemente basierend auf bestimmten Bedingungen angezeigt oder ausgeblendet werden.