表单验证为什么重要？

表单是用户与网页交互的核心入口，有效的验证可以：

  • ✅ 防止非法数据提交（如空值、格式错误）
  • ⚠️ 提升用户体验（即时反馈错误提示）
  • 📈 降低服务器端处理负担

📌 点击了解 HTML 表单基础语法 后再深入学习验证技巧

基本验证方法

1. HTML5 内置验证

<form novalidate>
  <input type="email" required>
  <input type="number" min="1" max="100">
  <input type="url" pattern="https?://.+\..+">
</form>
HTML_Form_Validation_Methods

2. JavaScript 验证

document.querySelector('form').addEventListener('submit', function(e) {
  if (!validateForm()) {
    e.preventDefault();
    alert('请检查表单内容');
  }
});

高级验证技巧

🧠 动态校验逻辑

  • 使用 oninput 事件实时检测输入
  • 通过 setCustomValidity() 方法自定义提示信息
  • 📊 结合正则表达式进行复杂规则匹配

🔄 异步验证

async function validateEmail(email) {
  const response = await fetch('/api/validate-email', {
    method: 'POST',
    body: JSON.stringify({ email })
  });
  return await response.json();
}

实战案例

🧪 登录表单验证

  1. 检查用户名是否为 3-15 位字母数字
  2. 验证密码强度（至少 8 位，包含大小写和数字）
  3. ⚠️ 确认两次输入的密码一致
  4. ✅ 添加提交成功后的动画反馈
Form_Validation_Example

扩展学习