Besoin de formulaires pour votre prochain projet? Voici comment créer des formulaires avec FormKit.
Les formulaires sont la passerelle permettant aux utilisateurs d'interagir avec votre application et de fournir des données essentielles pour des tâches telles que la création de compte, le traitement des paiements et la collecte d'informations. Mais la création de formulaires peut être une tâche ardue, nécessitant un code passe-partout étendu qui prend du temps et est sujet aux erreurs.
FormKit offre une solution en fournissant des composants pré-construits qui éliminent le besoin de code passe-partout. Voici comment l'utiliser.
Qu'est-ce que FormKit?
FormKit est un cadre de création de formulaires open source développé spécifiquement pour Vue 3, conçu pour simplifier le processus de création de formulaires de haute qualité prêts pour la production. Il s'agit d'une version améliorée du populaire Vue Formule bibliothèque et fournit plus de 25 options d'entrée personnalisables et accessibles, ainsi qu'un ensemble prédéfini de règles de validation.
FormKit offre également la possibilité de générer des formulaires via des schémas dynamiques compatibles JSON, ce qui facilite la création rapide de formulaires complexes. De plus, FormKit a une communauté active sur Discord, fournissant un support et favorisant la collaboration entre les utilisateurs. Avec ses fonctionnalités complètes et son système de support, FormKit est un outil fiable et efficace pour les développeurs qui cherchent à créer des formulaires pour leurs projets Vue 3.
Fonctionnalités du framework FormKit
Vous trouverez une large sélection de fonctionnalités de création de formulaires dans FormKit.
1. API de composant unique
L'une des fonctionnalités intéressantes de FormKit est son API mono-composant: composant. Il vous donne accès à tous les types d'entrée. Cela donne un accès direct et facile à la création d'éléments de formulaire au lieu d'avoir à utiliser des éléments HTML natifs.
2. Règles de validation prédéfinies
Formkit simplifie la gestion des validations de formulaires en vous permettant d'appliquer directement un ensemble de règles aux entrées à l'aide de la prop de validation. Il contient plus de 30 règles prédéfinies différentes que vous pouvez sélectionner en fonction de vos préférences. Alternativement, vous pouvez créer des règles personnalisées enregistrées globalement ou spécifiquement sur l'entrée pour les restrictions complexes.
3. Options de style personnalisables
FormKit n'a pas d'options de style par défaut mais a un thème de base optionnel - Genesis. Vous devez l'installer séparément.
En installant d'abord le @formkit/thèmes emballer.
installation npm @formkit/themesPuis importez-le dans votre projet
importer'@formkit/thèmes/genèse'D'autres options de style incluent l'utilisation de classes personnalisées qui vous permettent d'appliquer vos propres styles et classes au balisage fourni par FormKit.
4. Génération de schéma
La génération de schéma de FormKit est une excellente fonctionnalité qui simplifie le processus de création de champs de formulaire. Un schéma est un tableau d'objets, chaque objet représentant un élément HTML et vous ne pouvez représenter qu'au format JSON.
Le tableau de schéma se compose d'objets de nœud FormKit qui correspondent à divers éléments, tels que des éléments HTML, des composants ou des nœuds de texte. Ces objets peuvent référencer des variables Vue préexistantes et restituer n'importe quel balisage ou composant avec des attributs et des accessoires modifiables, ce qui en fait une méthode efficace de création et de personnalisation de formulaires. Par défaut, il n'est pas enregistré globalement, vous devez donc l'importer.
importer { FormKitSchema } depuis'@formkit/vue'Intégration de FormKit dans Vue3
Pour commencer à utiliser FormKit dans une application Vue 3, commencez par l'installer dans votre projet. Cette section impliquera une démo utilisant une nouvelle application vue à partir de zéro.
Prérequis pour utiliser FormKit
Avant de commencer, assurez-vous d'avoir les éléments suivants :
- Compréhension fondamentale de Vue et JavaScript
- Node.js et npm configurés sur votre ordinateur
Une fois que vous êtes au courant, vous êtes prêt à créer votre première application.
Création d'une nouvelle application Vue
Tout d'abord, exécutez la commande ci-dessous dans votre terminal pour initialiser une nouvelle application Vue :
vue d'initialisation npm@dernierSuivez ensuite les étapes spécifiées dans l'invite en fonction de vos préférences. Une fois le projet complètement installé, procédez à l'installation de FormKit dans l'application.
installation npm @formkit/vue Ensuite, dans le main.js déposer.
importer { créerApp } depuis'vue'
importer'./style.css'
importer Application depuis'./App.vue'
// Configurer le kit de formulaire
importer { plugin, configuration par défaut } depuis"@formkit/vue";
// Importer le thème Genesis
importer"@formkit/thèmes/genèse";
createApp (Application).use(brancher, configuration par défaut).mount('#application')Le paquet @formkit/vue est livré avec un plugin Vue et une configuration configurée par défaut pour une installation transparente. Une fois que vous avez terminé la configuration, vous êtes prêt à intégrer le composant dans votre application Vue 3. En outre, vous pouvez ajouter la configuration des thèmes Genesis comme indiqué précédemment.
Création de formulaires réutilisables avec FormKit
Cette section montre comment utiliser FormKit pour créer un formulaire fonctionnel et personnalisable en créant un formulaire d'inscription simple.
Pour une meilleure structure du code, il est bon de créer un fichier séparé pour ce composant: Formulaire d'inscription.vue
Tout d'abord, définissez l'élément d'entrée en utilisant ce format
taper="texte"
étiquette="Prénom"
espace réservé="Abola"
valider="obligatoire|longueur: 4"
aider = "Entrez un minimum de 4 caractères"
<FormKit/>Ce code montre comment utiliser FormKit pour générer une entrée de texte à l'aide d'un type de texte. La prop de validation sépare les règles à l'aide du symbole pipe "|". L'accessoire d'aide positionne un petit texte juste en dessous de l'élément d'entrée.
Vous pouvez également explorer d'autres types d'entrée comme ceux ci-dessous.
taper="texte"
étiquette="Nom de famille"
espace réservé="Ester"
valider="obligatoire|longueur: 4"
aider = "Entrez un minimum de 4 caractères"
/>
taper="e-mail"
étiquette="Adresse e-mail"
icône-préfixe="e-mail"
valider="obligatoire|courriel"
espace réservé="[email protected]"
/>
taper="date"
étiquette="Date de naissance"
aider="Entrez votre date de naissance au format JJ/MM/AAAA"
valider="requis"
/> v-modèle="valeur"
taper="radio"
étiquette="Genre"
:options="['Homme Femme']"
aider="Sélectionnez votre sexe"
/>
taper="déposer"
étiquette="Télécharger votre photo"
accepter=".jpg,.png,.jpeg"
aider="Sélectionnez votre image"
/>
Le code montre comment utiliser certains des autres éléments d'entrée et définir les règles de validation.
FormKit inclut un accessoire de type appelé "form" qui encapsule tous les éléments d'entrée. Il surveille l'état de validation du formulaire et empêche les utilisateurs de le soumettre si des entrées sont invalides. De plus, il génère automatiquement un bouton de soumission.
taper="former"
former-classe="contenant extérieur"
soumettre-étiquette="Enregistrer"
@soumettre="Enregistrer">
La combinaison de tout présente le formulaire complet, comme indiqué dans l'image ci-dessous.
Génération de formulaire à l'aide du schéma de FormKit
Avec les schémas JSON, il est possible de générer des formulaires similaires aux éléments d'entrée, comme fait précédemment. Pour générer le formulaire, fournissez simplement votre tableau de schéma au composant en utilisant le schéma soutenir.
Le tableau de schéma
constante schéma = [
{
$formkit: "e-mail",
nom: "e-mail",
étiqueter: "Adresse e-mail",
espace réservé: "Entrer votre Email",
validation: "obligatoire|courriel",
},
{
$formkit: 'mot de passe',
nom: 'mot de passe',
étiqueter: 'Mot de passe',
validation: 'obligatoire|longueur: 5,16'
},
{
$formkit: 'mot de passe',
nom: 'confirmer le mot de passe',
étiqueter: 'Confirmez le mot de passe',
validation: 'requis|confirmer',
étiquette de validation: 'Confirmation mot de passe',
},
];Il est ensuite transmis au prop dans le composant FormKit.
"former" former-classe="contenant extérieur"soumettreétiquette="Connexion">
<FormKitSchema:schéma="schéma" />
FormKit> Voici la sortie finale générée :
Une approche plus rapide pour créer des formulaires dans Vue3
FormKit offre une approche plus rapide et plus efficace pour créer des formulaires dans Vue 3. Avec FormKit, vous pouvez éliminer le besoin de créer des modèles passe-partout à partir de zéro, ce qui vous permet de vous concentrer directement sur la mise en œuvre de la logique. Ce processus rationalisé permet non seulement de gagner du temps, mais également d'améliorer la productivité.
De plus, FormKit permet le rendu dynamique des formulaires grâce au rendu conditionnel. Cette fonctionnalité vous permet de créer des interfaces interactives et conviviales pour les utilisateurs, où les éléments de formulaire s'affichent ou se masquent en fonction de certaines conditions.
