Implémentation de la validation de formulaire avec Vanilla JS (adapté aux débutants)-js tutoriel-php.cn

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

WBOY

Libérer： 2024-08-06 00:58:21

original

425 Les gens l'ont consulté

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>

Copier après la connexion

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;
 }

Copier après la connexion

É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();
 });
```
Copier après la connexion

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());
 }

Copier après la connexion

É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!