仅靠 html 的 `required` 属性或 css 伪类（如 `:invalid`）无法实现“两个字段中至少一个必填”的逻辑约束，该需求必须借助 javascript 完成客户端校验。
在标准 Web 表单规范中，html 的 required 属性是字段级约束——它只能声明“此字段非空”，而无法表达“字段 A 与字段 B 的逻辑或关系”。css 同样不具备条件判断能力：:valid 和 :invalid 仅反映单个控件是否满足其自身约束（如 required、type=”email”），无法跨字段联动或实现“二者择一”的业务规则。
因此，要实现“登录 ID 或邮箱至少填写一项”，必须引入 javaScript 进行自定义验证。以下是一个轻量、可复用的实现方案：
✅ 关键说明：
- 使用 e.preventDefault() 阻止默认提交行为，确保校验逻辑优先执行；
- trim() 避免用户仅输入空格导致误判；
- 错误样式 .error 仅用于视觉反馈，不依赖 required 属性，避免语义冲突；
- 若需服务端兜底，务必在后端重复校验（前端校验可被绕过）。
⚠️ 注意： 千万不要为两个字段同时添加 required，否则会强制用户填写两项，违背“任选其一”的原始需求。真正的“逻辑或必填”属于应用层业务规则，超出了 HTML/CSS 的职责边界——这是 Web 表单设计的基本原则之一。
立即学习“前端免费学习笔记（深入）”；