HTML表单验证

HTML表单验证是确保用户输入数据符合预期格式和规则的过程，通常通过HTML5内置功能或JavaScript实现。它既能在客户端（浏览器）快速反馈错误，也能减少无效请求对服务器的压力。本指南将详细介绍原生HTML验证、JavaScript增强验证及其实用案例。

基本概念

表单验证分为两类：

客户端验证：在数据提交前由浏览器/JavaScript检查（更快但可绕过）
服务器端验证：在服务器检查（必须存在作为最后防线）

客户端验证通常用于：

必填字段检查
格式验证（如邮箱、电话号码）
数值范围限制
自定义逻辑（如密码强度）

HTML5原生验证

HTML5引入了多种属性实现基础验证：

常用属性

属性	作用	示例
`required`	标记必填字段	`<input type="text" required>`
`pattern`	正则表达式验证	`<input pattern="[A-Za-z]{3}">`
`min`/`max`	数值范围限制	`<input type="number" min="1" max="100">`
`minlength`/`maxlength`	输入长度限制	`<input minlength="8" maxlength="20">`

示例：注册表单

<form id="signup">
  <label>用户名：<input type="text" required minlength="4"></label>
  <label>邮箱：<input type="email" required></label>
  <label>年龄：<input type="number" min="18" max="99"></label>
  <label>密码：<input type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"></label>
  <button type="submit">注册</button>
</form>

当用户提交无效数据时，浏览器会自动显示错误提示（不同浏览器样式不同）。

JavaScript增强验证

原生验证功能有限，JavaScript可实现更复杂的逻辑：

基本验证方法

// 获取表单元素
const form = document.getElementById('myForm');

form.addEventListener('submit', (event) => {
  // 阻止默认提交行为
  event.preventDefault();
  
  // 验证逻辑
  if (!validateEmail(form.email.value)) {
    alert('请输入有效的邮箱地址');
    return;
  }
  
  // 验证通过后提交
  form.submit();
});

function validateEmail(email) {
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return re.test(email);
}

实时验证反馈

通过input事件实现输入时即时验证：

document.getElementById('username').addEventListener('input', (e) => {
  const errorElement = document.getElementById('username-error');
  if (e.target.value.length < 4) {
    errorElement.textContent = '用户名至少4个字符';
  } else {
    errorElement.textContent = '';
  }
});

验证状态API

HTML5提供DOM属性检查验证状态：

属性/方法	描述
`willValidate`	元素是否参与验证
`validity`	返回ValidityState对象
`checkValidity()`	检查元素是否有效
`setCustomValidity()`	设置自定义错误消息

ValidityState对象

通过element.validity访问，包含布尔值属性：

valueMissing - 必填字段为空
typeMismatch - 类型不匹配（如email）
patternMismatch - 不符合pattern规则
tooShort/tooLong - 长度不符
rangeUnderflow/rangeOverflow - 数值超出范围
valid - 是否所有验证通过

自定义验证样式

使用CSS伪类控制验证UI：

/* 无效输入样式 */
input:invalid {
  border-color: #ff0000;
}

/* 获得焦点时的无效输入 */
input:focus:invalid {
  box-shadow: 0 0 5px #ff0000;
}

/* 有效输入样式 */
input:valid {
  border-color: #00ff00;
}

实际案例：订单表单

结合HTML与JavaScript实现完整验证流程：

<form id="orderForm">
  <div>
    <label>商品数量（1-10）：
      <input type="number" id="quantity" min="1" max="10" required>
    </label>
    <span id="quantity-error" class="error"></span>
  </div>
  
  <div>
    <label>收货电话：
      <input type="tel" id="phone" pattern="\d{3}-\d{3}-\d{4}" required>
      <small>格式：123-456-7890</small>
    </label>
  </div>
  
  <button type="submit">提交订单</button>
</form>

<script>
  const form = document.getElementById('orderForm');
  const quantityInput = document.getElementById('quantity');
  
  // 实时验证数量
  quantityInput.addEventListener('input', () => {
    const errorElement = document.getElementById('quantity-error');
    if (quantityInput.validity.rangeUnderflow) {
      errorElement.textContent = '数量不能小于1';
    } else if (quantityInput.validity.rangeOverflow) {
      errorElement.textContent = '数量不能大于10';
    } else {
      errorElement.textContent = '';
    }
  });
  
  // 提交验证
  form.addEventListener('submit', (event) => {
    if (!form.checkValidity()) {
      event.preventDefault();
      alert('请正确填写所有字段');
    }
  });
</script>

高级技巧

自定义验证方法

使用setCustomValidity()实现复杂规则：

const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirmPassword');

function validatePassword() {
  if (password.value !== confirmPassword.value) {
    confirmPassword.setCustomValidity('两次密码输入不一致');
  } else {
    confirmPassword.setCustomValidity('');
  }
}

password.addEventListener('input', validatePassword);
confirmPassword.addEventListener('input', validatePassword);

异步验证

通过Fetch API实现服务器端验证（如检查用户名是否已存在）：

document.getElementById('username').addEventListener('blur', async () => {
  const username = this.value;
  const response = await fetch(`/check-username?name=${username}`);
  const { available } = await response.json();
  
  if (!available) {
    this.setCustomValidity('用户名已被占用');
  }
});

最佳实践

1. 始终使用服务器端验证作为最后防线 2. 提供清晰明确的错误提示 3. 对敏感数据（如密码）避免在客户端验证时暴露规则细节 4. 考虑无障碍访问（ARIA属性） 5. 重要表单使用多步骤验证（先客户端后服务器）

常见问题

Q：客户端验证能否替代服务器验证？
A：绝对不能！恶意用户可以完全绕过客户端验证，服务器验证是必须的安全措施。

Q：如何禁用浏览器的默认验证气泡？
A：在form标签添加novalidate属性，然后用自定义UI实现验证反馈。

Q：验证应该在什么时机触发？
A：推荐组合使用：

blur事件（字段失去焦点时）
input事件（输入时实时反馈）
submit事件（最终检查）

通过掌握这些技术，您将能够创建既用户友好又安全可靠的网页表单。