Maison > Article > interface Web > Implémentation de la validation de formulaire avec Vanilla JS (adapté aux débutants)

Implémentation de la validation de formulaire avec Vanilla JS (adapté aux débutants)

WBOYoriginal: 2024-08-06 00:58:21330parcourir

Implementing Form Validation with Vanilla JS (Beginner-Friendly)

Exercice pratique : validation de formulaire

Objectif

Créez un formulaire de base avec des champs pour le nom, l'e-mail et le mot de passe. Implémentez la validation JavaScript pour garantir que les champs sont correctement remplis avant la soumission. Il s'agit d'un projet simple de code destiné à vous aider à démarrer avec la validation de formulaire de base en JS.

Exigences

Formulaire HTML : créez un formulaire HTML avec des entrées pour le nom, l'adresse e-mail et le mot de passe.
Style CSS : ajoutez un style de base pour donner au formulaire un aspect propre et convivial.
Validation JavaScript : implémentez JavaScript pour valider les champs du formulaire.

Instructions étape par étape

Étape 1 : configurer la structure HTML

Créer un nouveau fichier HTML
- Créez un nouveau fichier nommé index.html.

Ajouter le passe-partout HTML

Ajoutez le passe-partout HTML de base à votre fichier :

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Form Validation</title>
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
     <form id="registrationForm">
         <h2>Registration Form</h2>
         <div>
             <label for="name">Name:</label>
             <input type="text" id="name" name="name">
             <span id="nameError" class="error"></span>
         </div>
         <div>
             <label for="email">Email:</label>
             <input type="email" id="email" name="email">
             <span id="emailError" class="error"></span>
         </div>
         <div>
             <label for="password">Password:</label>
             <input type="password" id="password" name="password">
             <span id="passwordError" class="error"></span>
         </div>
         <button type="submit">Register</button>
     </form>
     <script src="script.js"></script>
 </body>
 </html>

Ajouter les éléments du formulaire
- Assurez-vous que votre formulaire comprend des champs pour le nom, l'adresse e-mail et le mot de passe, chacun avec une durée de message d'erreur correspondante.

Étape 2 : ajouter un style CSS de base

Créer un nouveau fichier CSS
- Créez un nouveau fichier nommé styles.css.

Ajouter des styles de base

Ajoutez des styles de base pour rendre le formulaire propre et convivial :

 body {
     font-family: Arial, sans-serif;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     background-color: #f4f4f4;
     margin: 0;
 }

 form {
     background: #fff;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     max-width: 400px;
     width: 100%;
 }

 div {
     margin-bottom: 15px;
 }

 label {
     display: block;
     margin-bottom: 5px;
 }

 input {
     width: 100%;
     padding: 8px;
     box-sizing: border-box;
 }

 .error {
     color: red;
     font-size: 12px;
 }

 button {
     background-color: #007BFF;
     color: #fff;
     padding: 10px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
 }

 button:hover {
     background-color: #0056b3;
 }

Étape 3 : implémenter la validation JavaScript

Créer un nouveau fichier JavaScript
- Créez un nouveau fichier nommé script.js.

Ajouter un écouteur d'événement au formulaire

Ajoutez un écouteur d'événement au formulaire pour gérer la soumission du formulaire :

 document.getElementById('registrationForm').addEventListener('submit', function(event) {
     event.preventDefault();
     validateForm();
 });

Créer la fonction de validation

Ajouter une fonction pour valider les champs du formulaire :

 function validateForm() {
     // Clear previous error messages
     document.getElementById('nameError').innerText = '';
     document.getElementById('emailError').innerText = '';
     document.getElementById('passwordError').innerText = '';

     // Get form values
     const name = document.getElementById('name').value;
     const email = document.getElementById('email').value;
     const password = document.getElementById('password').value;

     // Validation flags
     let isValid = true;

     // Validate name
     if (name.trim() === '') {
         document.getElementById('nameError').innerText = 'Name is required';
         isValid = false;
     }

     // Validate email
     if (email.trim() === '') {
         document.getElementById('emailError').innerText = 'Email is required';
         isValid = false;
     } else if (!validateEmail(email)) {
         document.getElementById('emailError').innerText = 'Email is not valid';
         isValid = false;
     }

     // Validate password
     if (password.trim() === '') {
         document.getElementById('passwordError').innerText = 'Password is required';
         isValid = false;
     } else if (password.length < 6) {
         document.getElementById('passwordError').innerText = 'Password must be at least 6 characters';
         isValid = false;
     }

     // If all fields are valid, submit the form (for demonstration, we'll just alert a message)
     if (isValid) {
         alert('Form submitted successfully!');
     }
 }

 // Email validation function
 function validateEmail(email) {
     const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     return re.test(String(email).toLowerCase());
 }

Étape 4 : tester le formulaire

Ouvrez index.html dans un navigateur
- Ouvrez votre fichier HTML dans un navigateur web pour tester la validation du formulaire.
- Essayez de soumettre le formulaire avec différentes entrées pour vous assurer que la validation fonctionne comme prévu.

N'hésitez pas à jouer avec le code et à exprimer votre créativité.

Bon codage !

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!

JavaScript css html express for try Error Event JS function this

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Déclin du codage : les développeurs d'applications Web écrivant du code tombent dans [Résultats de recherche]Article suivant：Déclin du codage : les développeurs d'applications Web écrivant du code tombent dans [Résultats de recherche]

Articles Liés

Voir plus