能否仅用CSS或HTML实现loginid/email二选一必填（无需JavaScript）

完全可以做到，不需要JavaScript，借助HTML5的表单约束验证API和CSS伪类就能实现loginid与email二选一必填的需求。

实现思路 #

核心逻辑：只要两个输入框中有一个填写了合法内容，表单就允许提交；只有当两个都为空时，才阻止提交。通过CSS的:valid/:invalid伪类和:has()选择器（或兄弟选择器）就能控制表单的有效性状态。

最简实现代码 #

<html>
<body>
<form>
  <label>loginid</label>
  <input type="text" id="loginid" name="loginid">
  <label>email</label>
  <input type="email" id="email" name="email">
  <button type="submit">提交</button>
</form>

<style>
  /* 两个输入框都为空时，禁用提交按钮 */
  form:invalid button[type="submit"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* 只要有一个输入框有效，标记表单为可提交状态 */
  form:has(#loginid:valid),
  form:has(#email:valid) {
    --is-valid: true;
  }

  /* 覆盖默认invalid状态，确保有一个输入有效时表单可提交 */
  form[style*="--is-valid: true"]:invalid {
    all: unset;
    display: block;
  }
</style>
</body>
</html>

代码解释 #

1. 输入框设置：给两个输入框加id和name方便CSS选择。type="email"会自动验证邮箱格式，type="text"只要非空就会被判定为:valid。
2. 提交按钮控制：当表单处于:invalid状态（两个输入都为空），提交按钮会被禁用，无法点击。
3. :has()伪类作用：检测表单内是否存在有效状态的输入框，只要有一个，就通过CSS变量标记表单为有效，覆盖默认的:invalid状态，允许提交。

兼容旧浏览器的写法（不使用:has()） #

如果需要兼容不支持:has()的浏览器（如旧版Firefox），可以用required属性结合兄弟选择器实现：

<html>
<body>
<form>
  <label>loginid</label>
  <input type="text" id="loginid" name="loginid" required>
  <label>email</label>
  <input type="email" id="email" name="email">
  <button type="submit">提交</button>
</form>

<style>
  /* 当email填写内容后，移除loginid的必填样式 */
  #email:not(:placeholder-shown) ~ #loginid:required {
    border-color: initial;
    box-shadow: none;
  }

  /* 标记email为有效状态 */
  #email:valid {
    --email-valid: true;
  }

  /* 只有当loginid无效且email未填写时，禁用提交按钮 */
  form:invalid:not([style*="--email-valid: true"]) button[type="submit"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
</style>
</body>
</html>

注意点 #

• 这种方法依赖HTML5特性，现代主流浏览器（Chrome、Edge、Firefox 121+）都支持，IE11及以下版本不兼容。
• 如果需要自定义错误提示，可以结合title属性或CSS的::after伪元素实现，原生表单验证提示会在输入框为空时触发，但通过CSS已经控制了提交按钮状态，用户无法提交空表单。

内容的提问来源于stack exchange，提问作者user21110355