✅ 实时输入表单验证

👇 就是这样的 👇

👀 示例演示

<form onsubmit="event.preventDefault()">
  电子邮箱：
  <input type="email" id="email" oninput="validateEmail()">
  <div class="error" id="emailError"></div>

  密码（至少 6 个字符）：
  <input type="password" id="password" oninput="validatePassword()">
  <div class="error" id="passwordError"></div>

  <button type="submit">提交</button>
</form>

<style>
  .error {
    color: red;
    font-size: 0.9em;
    margin-bottom: 1em;
  }
</style>

<script>
function validateEmail() {
  const email = document.getElementById("email").value;
  const error = document.getElementById("emailError");
  error.textContent = email.includes("@") ? "" : "邮箱格式无效";
}

function validatePassword() {
  const pass = document.getElementById("password").value;
  const error = document.getElementById("passwordError");
  error.textContent = pass.length >= 6 ? "" : "密码至少需要 6 个字符";
}
</script>

✅ 此模板的用途与优势

在输入时立即检查错误
为用户提供友好的使用体验
通过 JS 轻松实现验证逻辑
结构简单，适合初学者自定义
可直接用于实际项目的基础模板

🧩 即時驗證的實用應用與擴展技巧

即時驗證可以讓使用者在輸入時即刻得知是否輸入正確，這不僅提升了用戶體驗，也減少了提交表單前的焦慮。透過 oninput 事件觸發，能在不重新載入頁面的情況下立即檢查輸入值。

例如，validateEmail() 函式中使用 email.includes("@") 來判斷是否包含 @ 符號。雖然這種方法簡單有效，但若需更精準的格式判斷，可進一步使用 正則表達式（regex）。

🔍 驗證邏輯的延伸

在處理密碼欄位時，除了 password.length >= 6 以外，也可以使用 /[A-Z]/ 或 /\d/ 來檢查是否含有大寫字母或數字，進一步加強安全性。

顯示錯誤訊息時使用 innerText 能避免意外解析 HTML 標籤，同時保持訊息的簡潔與安全。每個欄位獨立顯示錯誤文字，有助於使用者快速釐清問題。

此範本適合作為前端驗證的起點，未來可彈性擴充至其他欄位，例如電話、姓名、地址等，支援實際專案的各種需求。