Implementieren der Formularvalidierung mit Vanilla JS (für Anfänger geeignet)-js-Tutorial-php.cn

Implementieren der Formularvalidierung mit Vanilla JS (für Anfänger geeignet)

WBOY

Freigeben： 2024-08-06 00:58:21

Original

392 Leute haben es durchsucht

Implementing Form Validation with Vanilla JS (Beginner-Friendly)

Übungsaufgabe: Formularvalidierung

Objektiv

Erstellen Sie ein Basisformular mit Feldern für Name, E-Mail und Passwort. Implementieren Sie eine JavaScript-Validierung, um sicherzustellen, dass die Felder vor der Übermittlung korrekt ausgefüllt werden. Dies ist ein einfaches Code-Along-Projekt, das Ihnen den Einstieg in die grundlegende Formularvalidierung in JS erleichtern soll.

Anforderungen

HTML-Formular: Erstellen Sie ein HTML-Formular mit Eingaben für Name, E-Mail und Passwort.
CSS-Styling: Fügen Sie ein grundlegendes Styling hinzu, damit das Formular sauber und benutzerfreundlich aussieht.
JavaScript-Validierung: Implementieren Sie JavaScript, um die Formularfelder zu validieren.

Schritt-für-Schritt-Anleitung

Schritt 1: Richten Sie die HTML-Struktur ein

Erstellen Sie eine neue HTML-Datei
- Erstellen Sie eine neue Datei mit dem Namen index.html.

HTML-Boilerplate hinzufügen

Fügen Sie das grundlegende HTML-Boilerplate zu Ihrer Datei hinzu:

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

Nach dem Login kopieren

Formularelemente hinzufügen
- Stellen Sie sicher, dass Ihr Formular Felder für Name, E-Mail und Passwort enthält, jeweils mit einem entsprechenden Fehlermeldungsbereich.

Schritt 2: Grundlegendes CSS-Styling hinzufügen

Erstellen Sie eine neue CSS-Datei
- Erstellen Sie eine neue Datei mit dem Namen „styles.css“.

Grundlegende Stile hinzufügen

Fügen Sie grundlegende Stile hinzu, damit das Formular sauber und benutzerfreundlich aussieht:

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

Nach dem Login kopieren

Schritt 3: Implementieren Sie die JavaScript-Validierung

Erstellen Sie eine neue JavaScript-Datei
- Erstellen Sie eine neue Datei mit dem Namen script.js.
Ereignis-Listener zum Formular hinzufügen
- Fügen Sie dem Formular einen Ereignis-Listener hinzu, um die Formularübermittlung zu verarbeiten:
```
 document.getElementById('registrationForm').addEventListener('submit', function(event) {
     event.preventDefault();
     validateForm();
 });
```
Nach dem Login kopieren

Erstellen Sie die Validierungsfunktion

Fügen Sie eine Funktion zur Validierung der Formularfelder hinzu:

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

Nach dem Login kopieren

Schritt 4: Testen Sie das Formular

Öffnen Sie index.html in einem Browser
- Öffnen Sie Ihre HTML-Datei in einem Webbrowser, um die Formularvalidierung zu testen.
- Versuchen Sie, das Formular mit verschiedenen Eingaben abzusenden, um sicherzustellen, dass die Validierung wie erwartet funktioniert.

Fühlen Sie sich frei, mit dem Code herumzuspielen und Ihrer Kreativität freien Lauf zu lassen.

Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonImplementieren der Formularvalidierung mit Vanilla JS (für Anfänger geeignet). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!