首頁 >web前端 >js教程 >使用 Vanilla JS 實現表單驗證（適合初學者）

使用 Vanilla JS 實現表單驗證（適合初學者）

WBOY原創: 2024-08-06 00:58:21425瀏覽

Implementing Form Validation with Vanilla JS (Beginner-Friendly)

練習：表單驗證

客觀的

建立一個包含姓名、電子郵件和密碼欄位的基本表單。實施 JavaScript 驗證以確保在提交之前正確填寫欄位。這是一個簡單的程式碼項目，旨在幫助您開始使用 JS 進行基本表單驗證。

要求

HTML 表單：建立一個包含姓名、電子郵件和密碼輸入的 HTML 表單。
CSS 樣式：新增基本樣式，讓表單看起來乾淨且使用者友善。
JavaScript 驗證：實作 JavaScript 來驗證表單欄位。

逐步說明

第 1 步：設定 HTML 結構

建立一個新的 HTML 檔案
- 建立一個名為index.html的新檔案。

新增 HTML 樣板

將基本 HTML 樣板新增至您的檔案：

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

新增表單元素
- 確保您的表單包含姓名、電子郵件和密碼字段，每個字段都有相應的錯誤訊息範圍。

步驟 2：新增基本 CSS 樣式

建立一個新的 CSS 檔案
- 建立一個名為 styles.css 的新檔案。

加入基本樣式

添加基本樣式，讓表單看起來乾淨且用戶友好：

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

第 3 步：實作 JavaScript 驗證

建立一個新的 JavaScript 檔案
- 建立一個名為 script.js 的新檔案。

將事件監聽器新增至表單

將事件監聽器新增至表單處理表單提交：

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

建立驗證函數

新增一個函數來驗證表單欄位：

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

第 4 步：測試表單

在瀏覽器中開啟index.html
- 在網頁瀏覽器中開啟 HTML 檔案以測試表單驗證。
- 嘗試提交具有不同輸入的表單，以確保驗證按預期進行。

隨意使用程式碼並表達您的創造力。

編碼愉快！

以上是使用 Vanilla JS 實現表單驗證（適合初學者）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css html express for try Error Event JS function this

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：編碼量下降：Web 應用程式開發人員編寫程式碼的數量下降到 [研究結果]下一篇：編碼量下降：Web 應用程式開發人員編寫程式碼的數量下降到 [研究結果]

看更多