實現簡單的表單驗證：JavaScript 的表單處理指南

網站或應用程式中的表單是使用者與服務互動的重要橋樑。不論是註冊新帳戶、填寫聯絡信息，還是完成線上購物，表單都扮演著關鍵角色。然而，沒有適當的表單驗證，就可能會引發各種問題，包括資料錯誤、安全風險等。本文將深入探討如何使用 JavaScript 進行基本的表單驗證，並提供實用的程式碼範例。

為什麼需要表單驗證？

資料完整性：確保使用者輸入的信息符合預期格式。
使用者體驗：提供即時的反饋，讓使用者知道是否填寫正確。
安全性：防止惡意輸入或攻擊，如 SQL 注入。

表單驗證的基本要素

必填欄位

最簡單的驗證方式就是檢查必填欄位是否已填寫。以下是一個簡單的例子：

function validateForm() {
  const name = document.getElementById('name').value;
  if (name === '') {
    alert('名稱欄位必填！');
    return false;
  }
  return true;
}

長度限制

某些欄位可能有長度限制，例如密碼通常需要至少 6-8 個字符。

function validatePassword() {
  const password = document.getElementById('password').value;
  if (password.length < 6) {
    alert('密碼至少需要6個字符！');
    return false;
  }
  return true;
}

格式驗證

例如，電子郵件地址需要包含 @ 和 . 字符。

function validateEmail() {
  const email = document.getElementById('email').value;
  const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  if (!re.test(email)) {
    alert('無效的電子郵件地址！');
    return false;
  }
  return true;
}

綜合應用：多項驗證

在實際應用中，我們通常需要對多個欄位進行不同類型的驗證。

function validateForm() {
  return validateName() && validatePassword() && validateEmail();
}

前後端表單驗證

單靠前端的表單驗證是不夠的，因為惡意使用者可能會繞過它。因此，後端驗證也是必不可少的。

// 前端
function validateForm() {
  // 驗證邏輯
}

// 後端（假設是 Node.js）
app.post('/submit', (req, res) => {
  const { name, email, password } = req.body;
  // 驗證邏輯
});

額外工具和函式庫

如果你覺得手動實現表單驗證太過繁瑣，也可以考慮使用第三方函式庫，如 validator。

const validator = require('validator');

const email = '[email protected]';
if (!validator.isEmail(email)) {
  console.log('無效的電子郵件地址！');
}

結語

表單驗證不僅能提升資料的準確性和安全性，還能提供更好的使用者體驗。通過 JavaScript，我們能輕易地實現各種表單驗證功能。無論是基礎的必填欄位檢查，還是複雜的格式驗證，JavaScript 都能做到。希望本文能對你有所幫助！