HTML/CSS登录表单验证技巧

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

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

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

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

  

    登录 ID：
    
  
  

    邮箱：
    
  
  提交

✅ 关键说明：

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

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

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