Melaksanakan Pengesahan Borang dengan Vanilla JS (Mesra Permulaan)-tutorial js-php.cn

Melaksanakan Pengesahan Borang dengan Vanilla JS (Mesra Permulaan)

WBOY

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

asal

286 orang telah melayarinya

Implementing Form Validation with Vanilla JS (Beginner-Friendly)

Latihan Amalan: Pengesahan Borang

Objektif

Buat borang asas dengan medan untuk nama, e-mel dan kata laluan. Laksanakan pengesahan JavaScript untuk memastikan medan diisi dengan betul sebelum penyerahan. Projek bersama kod ringkas ini bertujuan untuk membantu anda memulakan pengesahan borang asas dalam JS.

Keperluan

Borang HTML: Buat borang HTML dengan input untuk nama, e-mel dan kata laluan.
Penggayaan CSS: Tambahkan penggayaan asas untuk menjadikan borang kelihatan bersih dan mesra pengguna.
Pengesahan JavaScript: Laksanakan JavaScript untuk mengesahkan medan borang.

Arahan Langkah demi Langkah

Langkah 1: Sediakan Struktur HTML

Buat Fail HTML Baharu
- Buat fail baharu bernama index.html.

Tambahkan HTML Boilerplate

Tambahkan boilerplate HTML asas pada fail anda:

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

Salin selepas log masuk

Tambahkan Elemen Borang
- Pastikan borang anda termasuk medan untuk nama, e-mel dan kata laluan, masing-masing dengan rentang mesej ralat yang sepadan.

Langkah 2: Tambah Penggayaan CSS Asas

Buat Fail CSS Baharu
- Buat fail baharu bernama styles.css.

Tambah Gaya Asas

Tambah gaya asas untuk menjadikan borang kelihatan bersih dan mesra pengguna:

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

Salin selepas log masuk

Langkah 3: Laksanakan Pengesahan JavaScript

Buat Fail JavaScript Baharu
- Buat fail baharu bernama script.js.

Tambahkan Pendengar Acara pada Borang

Tambahkan pendengar acara pada borang untuk mengendalikan penyerahan borang:

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

Salin selepas log masuk

Buat Fungsi Pengesahan

Tambah fungsi untuk mengesahkan medan borang:

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

Salin selepas log masuk

Langkah 4: Uji Borang

Buka index.html dalam Penyemak Imbas
- Buka fail HTML anda dalam penyemak imbas web untuk menguji pengesahan borang.
- Cuba serahkan borang dengan input yang berbeza untuk memastikan pengesahan berfungsi seperti yang diharapkan.

Jangan ragu untuk bermain-main dengan kod dan nyatakan kreativiti anda.

Selamat mengekod!

Atas ialah kandungan terperinci Melaksanakan Pengesahan Borang dengan Vanilla JS (Mesra Permulaan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!