Validation du formulaire avec YUP
Simplifiez la validation de votre formulaire dans React avec Yup
Lors de la création d'applications Web, la validation des formulaires est essentielle pour garantir l'intégrité des données. Si vous recherchez un moyen simple mais puissant de valider des formulaires dans React, Yup est votre meilleur ami ! Ce blog vous guidera à travers les étapes de configuration de Yup et de création d'un formulaire soigné avec validation.
Ce que vous apprendrez
À la fin de ce blog, vous saurez comment :
- Configurez Yup pour la validation dans React.
- Créez un formulaire avec des règles de validation.
- Stylisez votre formulaire en utilisant du CSS externe.
Conditions préalables
Avant de plonger, assurez-vous d'avoir :
- Connaissance de base de React.
- Node.js installé sur votre ordinateur.
Étape 1 : Configuration de Yup
Tout d’abord, installez Yup dans votre projet React. Exécutez la commande suivante dans votre terminal :
npm install yup
Étape 2 : Création du formulaire
Voici un formulaire simple avec des champs pour un nom et une adresse e-mail. Nous utiliserons useState de React pour gérer les valeurs d'entrée et les erreurs.
import React, { useState } from 'react';
function MyForm() {
const [formData, setFormData] = useState({ name: '', email: '' });
const [errors, setErrors] = useState({});
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const handleSubmit = (e) => {
e.preventDefault();
// Validation will go here
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>Name:</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
/>
</div>
<div>
<label>Email:</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
/>
</div>
<button type="submit">Submit</button>
</form>
);
}
export default MyForm;
Étape 3 :
Il est maintenant temps d'intégrer Yup. Je vais créer un schéma de validation, puis vérifier les données du formulaire une fois soumises.
import * as Yup from "yup"
const validationSchema = Yup.object({
name: Yup.string().required('Name is required!')
email: Yup.string().email('Your email is invalid').required('email is required')
})
J'utiliserai ce schéma dans la fonction handleSubmit pour valider le formulaire
const handleSubmit = (e) => {
e.preventDefault();
try {
await validationSchema.validate(formData, { abortEarly: false });
setErrors({});
alert('Form is valid!');
} catch (err) {
const newErrors = {};
err.inner.forEach((error) => {
newErrors[error.path] = error.message;
});
setErrors(newErrors);
}
};
Étape 4 : Styliser le formulaire
Pour donner une belle apparence au formulaire, créez un fichier CSS externe (MyForm.css) et ajoutez ces styles :
.form-container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
background: #f9f9f9;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.label {
font-weight: bold;
}
.input {
width: 100%;
padding: 10px;
margin: 5px 0;
border-radius: 4px;
}
.error {
color: red;
font-size: 12px;
}
.button {
background: #4caf50;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button:hover {
background: #45a049;
}
Importez le fichier CSS dans votre composant :
import './MyForm.css';
Code complet :
import React, { useState } from 'react';
import * as Yup from 'yup';
import './MyForm.css';
function MyForm() {
const [formData, setFormData] = useState({ name: '', email: '' });
const [errors, setErrors] = useState({});
const validationSchema = Yup.object({
name: Yup.string().required('Name is required!'),
email: Yup.string().email('Invalid email!').required('Email is required!'),
});
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const handleSubmit = async (e) => {
e.preventDefault();
try {
await validationSchema.validate(formData, { abortEarly: false });
setErrors({});
alert('Form is valid!');
} catch (err) {
const newErrors = {};
err.inner.forEach((error) => {
newErrors[error.path] = error.message;
});
setErrors(newErrors);
}
};
return (
<div className="form-container">
<h1>Simple Form</h1>
<form onSubmit={handleSubmit}>
<div>
<label className="label">Name:</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
className="input"
/>
{errors.name && <div className="error">{errors.name}</div>}
</div>
<div>
<label className="label">Email:</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
className="input"
/>
{errors.email && <div className="error">{errors.email}</div>}
</div>
<button type="submit" className="button">Submit</button>
</form>
</div>
);
}
export default MyForm;
Conclusion
Yup est un outil puissant de validation de formulaire, même sans Formik. Avec seulement quelques lignes de code, vous pouvez ajouter une validation robuste à vos applications React.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment faire une demande HTTP dans Node.js?
Jul 13, 2025 am 02:18 AM
Il existe trois façons courantes d'initier des demandes HTTP dans Node.js: utilisez des modules intégrés, Axios et Node-Fetch. 1. Utilisez le module HTTP / HTTPS intégré sans dépendances, ce qui convient aux scénarios de base, mais nécessite un traitement manuel de la couture des données et de la surveillance des erreurs, tels que l'utilisation de https.get () pour obtenir des données ou envoyer des demandes de post via .write (); 2.AXIOS est une bibliothèque tierce basée sur la promesse. Il a une syntaxe concise et des fonctions puissantes, prend en charge l'async / attendre, la conversion JSON automatique, l'intercepteur, etc. Il est recommandé de simplifier les opérations de demande asynchrones; 3.Node-Fetch fournit un style similaire à la récupération du navigateur, basé sur la promesse et la syntaxe simple
Types de données JavaScript: référence primitive vs
Jul 13, 2025 am 02:43 AM
Les types de données JavaScript sont divisés en types primitifs et types de référence. Les types primitifs incluent la chaîne, le nombre, le booléen, le nul, un non défini et le symbole. Les valeurs sont immuables et les copies sont copiées lors de l'attribution des valeurs, de sorte qu'elles ne se affectent pas; Les types de référence tels que les objets, les tableaux et les fonctions stockent les adresses de mémoire, et les variables pointant vers le même objet s'afferchent mutuellement. Le typeof et l'instance de OFF peuvent être utilisés pour déterminer les types, mais prêtent attention aux problèmes historiques de typeofnull. Comprendre ces deux types de différences peut aider à écrire un code plus stable et fiable.
Comment vérifier si un tableau comprend une valeur en javascript
Jul 13, 2025 am 02:16 AM
Dans JavaScript, vérifiez si un tableau contient une certaine valeur. La méthode la plus courante est Inclut (), qui renvoie une valeur booléenne et la syntaxe est Array.Cuecludes (ValueToFind), par exemple les fruits.Cuels («banane») Renvoie vrai; S'il doit être compatible avec l'ancien environnement, utilisez l'indexof (), comme nombres.indexof (20)! == - 1 Renvoie True; Pour les objets ou les données complexes, une méthode () doit être utilisée pour une comparaison approfondie, telles que les utilisateurs.Some (user => user.id === 1) renvoie true.
Appareils et contextes avancés JavaScript
Jul 24, 2025 am 12:42 AM
La portée de JavaScript détermine la portée d'accessibilité des variables, qui sont divisées en étendue globale, fonction et au niveau du bloc; Le contexte détermine la direction de cela et dépend de la méthode d'appel de fonction. 1. Les étendues incluent la portée globale (accessible n'importe où), la portée de la fonction (valide uniquement dans la fonction) et la portée au niveau du bloc (LET et const sont valides dans {}). 2. Le contexte d'exécution contient l'objet variable, la chaîne de portée et les valeurs de cela. Cela pointe vers global ou non défini dans la fonction ordinaire, l'appel de méthode pointe vers l'objet d'appel, le constructeur pointe vers le nouvel objet, et peut également être explicitement spécifié par appel / application / liaison. 3. La fermeture fait référence aux fonctions accédant et en se souvenant des variables de portée externes. Ils sont souvent utilisés pour l'encapsulation et le cache, mais peuvent provoquer
Comment obtenir la valeur d'un champ de saisie en JavaScript
Jul 15, 2025 am 03:09 AM
Pour obtenir la valeur de la boîte d'entrée HTML, le noyau consiste à trouver l'élément correspondant via l'opération DOM et à lire l'attribut de valeur. 1. Utilisez Document.GetElementByid pour être le moyen le plus direct. Après avoir ajouté un ID à l'entrée, vous pouvez obtenir l'élément et lire la valeur via cette méthode; 2. Utilisez QueySelector pour être plus flexible, et vous pouvez sélectionner des éléments en fonction d'attributs tels que le nom, la classe, le type, etc.; 3. Vous pouvez ajouter des auditeurs d'événements d'entrée ou de modification pour atteindre des fonctions interactives, telles que l'obtention du contenu d'entrée en temps réel; 4. Faites attention au synchronisation d'exécution du script, aux erreurs d'orthographe et au jugement nul, et assurez-vous que l'élément existe avant d'accéder à la valeur.
Modèle JavaScript Literals: syntaxe et cas d'utilisation
Jul 13, 2025 am 02:28 AM
Les chaînes de modèle sont une fonctionnalité introduite dans JavaScriptes6, qui enveloppe le contenu avec des backticks et prend en charge l'interpolation variable et les chaînes multiplices. 1. Utilisez des backtticks pour définir des chaînes telles que ce point de vue en ligne; 2. Insérer des variables ou des expressions via $ {} Syntaxe tels que IAM $ {Age} Yearsold.; 3. Soutenez naturellement le texte multi-lignes sans ajouter manuellement Newlines. Les scénarios courants incluent la génération de contenu HTML dynamiquement, la sortie de chaîne multi-lignes et les coutures logiques conditionnelles simplifiées. Les notes incluent éviter les attaques d'injection, l'utilisation avancée des modèles de balises et garder la logique simple.
Comment obtenir la valeur d'un bouton radio sélectionné avec JS?
Jul 18, 2025 am 04:17 AM
Il existe deux méthodes de base pour obtenir la valeur du bouton radio sélectionné. 1. Utilisez QuerySelector pour obtenir directement l'élément sélectionné, et utilisez l'entrée [name = "Votre nom-radio"]: Sélecteur vérifié pour obtenir l'élément sélectionné et lire son attribut de valeur. Il convient aux navigateurs modernes et a un code concis; 2. Utilisez Document.PetelementsByName pour traverser et trouver la première radio vérifiée via la boucle Nodelist et obtenir sa valeur, qui convient aux scénarios compatibles avec les anciens navigateurs ou nécessitent un contrôle manuel du processus; De plus, vous devez faire attention à l'orthographe de l'attribut de nom, à la gestion des situations non sélectionnées et à un chargement dynamique du contenu
Construire des iframes de sable à sable sécurisé avec JavaScript
Jul 16, 2025 am 02:33 AM
Pour utiliser JavaScript pour créer un sandbox sable sécurisé iframe, utilisez d'abord l'attribut de bac à sable de HTML pour limiter le comportement IFRAME, tel que l'interdiction de l'exécution du script, des fenêtres contextuelles et de la soumission de formulaire; Deuxièmement, en ajoutant des jetons spécifiques tels que des scénaristes pour assouplir les autorisations au besoin; Combinez ensuite PostMessage () pour obtenir une communication inter-domaine sécurisée, tout en vérifiant strictement les sources et les données de messages; Enfin, évitez les erreurs de configuration courantes, telles que ne pas vérifier la source, ne pas configurer CSP, etc., et effectuer des tests de sécurité avant de se rendre en ligne.
