cari

Rumah >hujung hadapan web >tutorial js >Melaksanakan Pengesahan Borang dengan Vanilla JS (Mesra Permulaan)

Melaksanakan Pengesahan Borang dengan Vanilla JS (Mesra Permulaan)

WBOY
WBOYasal
2024-08-06 00:58:21429semak imbas

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

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

Arahan Langkah demi Langkah

Langkah 1: Sediakan Struktur HTML

  1. Buat Fail HTML Baharu

    • Buat fail baharu bernama index.html.

  2. 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>

  3. 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

  1. Buat Fail CSS Baharu

    • Buat fail baharu bernama styles.css.

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

Langkah 3: Laksanakan Pengesahan JavaScript

  1. Buat Fail JavaScript Baharu

    • Buat fail baharu bernama script.js.

  2. Tambahkan Pendengar Acara pada Borang

    • Tambahkan pendengar acara pada borang untuk mengendalikan penyerahan borang: 
     document.getElementById('registrationForm').addEventListener('submit', function(event) {
     event.preventDefault();
     validateForm();
 });

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

Langkah 4: Uji Borang

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

JavaScript css html express for try Error Event JS function this
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Penurunan dalam Pengekodan: Kod Penulisan Pembangun Apl Web Turun ke dalam [Hasil Penyelidikan]Artikel seterusnya：Penurunan dalam Pengekodan: Kod Penulisan Pembangun Apl Web Turun ke dalam [Hasil Penyelidikan]

Artikel berkaitan

Lihat lagi