HTML/CSS登录表单验证技巧

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《HTML/CSS 实现登录表单验证方法》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

仅靠 HTML 的 `required` 属性或 CSS 伪类（如 `:invalid`）无法实现“两个字段中至少一个必填”的逻辑约束，该需求必须借助 JavaScript 完成客户端校验。

在标准 Web 表单规范中，HTML 的 required 属性是字段级约束——它只能声明“此字段非空”，而无法表达“字段 A 与字段 B 的逻辑或关系”。CSS 同样不具备条件判断能力：:valid 和 :invalid 仅反映单个控件是否满足其自身约束（如 required、type="email"），无法跨字段联动或实现“二者择一”的业务规则。

因此，要实现“登录 ID 或邮箱至少填写一项”，必须引入 JavaScript 进行自定义验证。以下是一个轻量、可复用的实现方案：

<form id="loginForm">
  <div>
    <label for="loginid">登录 ID：</label>
    &lt;input type=&quot;text&quot; id=&quot;loginid&quot; name=&quot;loginid&quot;&gt;
  </div>
  <div>
    <label for="email">邮箱：</label>
    &lt;input type=&quot;email&quot; id=&quot;email&quot; name=&quot;email&quot;&gt;
  </div>
  <button type="submit">提交</button>
</form>

<style>
  .error {
    border: 1px solid #d32f2f;
    background-color: #fff8f8;
  }
  .error:focus {
    outline: none;
    box-shadow: 0 0 4px rgba(211, 47, 47, 0.5);
  }
</style>

<script>
  document.getElementById('loginForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const loginid = document.getElementById('loginid').value.trim();
    const email = document.getElementById('email').value.trim();

    // 清除历史错误状态
    ['loginid', 'email'].forEach(id => {
      document.getElementById(id).classList.remove('error');
    });

    // 校验：两者均为空时触发错误
    if (!loginid && !email) {
      document.getElementById('loginid').classList.add('error');
      document.getElementById('email').classList.add('error');
      alert('请至少填写登录 ID 或邮箱中的一项。');
      return;
    }

    // 通过校验，可执行实际提交（例如：this.submit() 或 fetch）
    console.log('表单有效，准备提交…');
    // this.submit(); // 取消注释以启用原生提交
  });
</script>

✅ 关键说明：

• 使用 e.preventDefault() 阻止默认提交行为，确保校验逻辑优先执行；
• trim() 避免用户仅输入空格导致误判；
• 错误样式 .error 仅用于视觉反馈，不依赖 required 属性，避免语义冲突；
• 若需服务端兜底，务必在后端重复校验（前端校验可被绕过）。

⚠️ 注意： 千万不要为两个字段同时添加 required，否则会强制用户填写两项，违背“任选其一”的原始需求。真正的“逻辑或必填”属于应用层业务规则，超出了 HTML/CSS 的职责边界——这是 Web 表单设计的基本原则之一。

到这里，我们也就讲完了《HTML/CSS登录表单验证技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！