表单验证实现方法及代码示例

本文深入解析了表单验证的三层实践路径：HTML5原生属性（required/pattern）虽轻量语义强，但受限于样式不可控、提示不可定制、不支持异步及兼容性问题；JavaScript手动验证则提供完全掌控力，强调preventDefault、trim防空格、即时反馈与无障碍支持；而实时内联提示替代alert的设计，兼顾体验与可访问性。文章更一针见血地指出——所有前端验证仅为用户体验优化，绝非安全防线，关键业务逻辑与数据校验必须在后端严格复核，前后端规则同步与错误精准映射才是健壮表单的真正基石。

HTML5 原生 required 和 pattern 能否满足基础验证？

能，但仅限简单场景。比如邮箱格式、非空、最小长度等，浏览器会自动拦截提交并显示默认提示。但默认样式不可控、错误信息无法自定义、不支持异步校验（如用户名是否已存在），且部分老版本 Safari 对 pattern 支持不稳定。

实操建议：

• 用 required 标记必填项，比 JS 判断更轻量且语义正确
• pattern 写正则时注意：它默认是「全匹配」，正则两端不用加 ^ 和 $（浏览器自动加上）
• 避免在 pattern 里写过于复杂的正则，比如中文手机号校验，建议交给 JS 处理
• 配合 title 属性可修改原生提示文字，例如：<input pattern="\d{6}" title="请输入6位数字">

用 JavaScript 监听 submit 事件做手动验证的要点

这是最通用、可控性最强的方式，适合所有表单结构和校验逻辑。

实操建议：

• 必须调用 event.preventDefault()，否则表单仍会提交
• 不要只依赖 input 的 value，要检查 value.trim()，避免空格绕过非空校验
• 对多个字段逐个验证，任一失败就立即返回，不要等全部跑完再汇总——用户需要即时反馈
• 验证失败后，聚焦第一个出错的 <input>（element.focus()），提升可访问性
• 示例片段：

  form.addEventListener('submit', function(e) {
    e.preventDefault();
    const email = document.getElementById('email').value.trim();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      alert('邮箱格式不正确');
      document.getElementById('email').focus();
      return;
    }
    // 继续其他字段...
  });

如何让错误提示不依赖 alert 且不打断操作流？

弹窗阻塞交互，体验差。推荐在输入框下方或右侧插入实时、可清除的提示文案。

实操建议：

• 为每个 <input> 配一个 元素，初始 display: none
• 验证失败时，设置该 small 的 textContent 并显示（style.display = 'block'）
• 验证通过后，清空文本并隐藏，而不是留着“✓”符号——避免用户误以为系统已记住状态
• 给输入框添加 aria-invalid="true" 和 aria-describedby="error-id"，方便读屏软件识别
• 别用 placeholder 显示错误信息，它会在用户输入时消失，违反 WCAG

为什么不能只靠前端验证？