如何修复 HTML 表单中 required 属性失效的问题

HTML 表单的 required 属性仅在表单提交（submit）时触发原生验证，若用 click 事件直接跳转页面，会绕过验证，导致必填校验失效。正确做法是监听表单的 submit 事件，并在验证通过后执行跳转。

html 表单的 `required` 属性仅在表单提交（`submit`）时触发原生验证，若用 `click` 事件直接跳转页面，会绕过验证，导致必填校验失效。正确做法是监听表单的 `submit` 事件，并在验证通过后执行跳转。

在您提供的登录页代码中， 元素已正确添加了 required 属性，样式与结构也无误——但问题根源在于：两个按钮均通过 click 事件直接调用 window.location.href 跳转，完全跳过了表单提交流程。而浏览器的原生 required 验证机制，只会在

以下是修复后的关键代码段（仅展示需修改部分，其余 HTML/CSS 保持不变）：

FlowMuse AI

节点式AI视觉创作引擎

下载

<form id="loginForm">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required placeholder="your@example.com">

  <label for="password">Password</label>
  <input type="password" id="password" name="password" required placeholder="••••••••">

  <!-- 登录按钮：type="submit" 触发验证 -->
  <button type="submit" id="my2Button" name="action" value="login">Login</button>

  <div id="text1">or if you don't have an account</div>

  <!-- 注册按钮：type="button" 避免提交，仅用于跳转 -->
  <button type="button" id="myButton">Signup</button>
</form>

// 获取表单元素
const form = document.getElementById('loginForm');

// 处理表单提交（登录逻辑）
form.addEventListener('submit', function (e) {
  e.preventDefault(); // 阻止默认提交（避免页面刷新或跳转）

  // 利用 event.submitter 区分按钮
  const clickedButton = e.submitter;
  if (!clickedButton || clickedButton.name !== 'action') return;

  // 只有点击 Login 按钮时才执行登录验证与跳转
  if (clickedButton.value === 'login') {
    // 浏览器原生验证：checkValidity() 返回 true 表示所有 required 字段已填写且格式合法
    if (form.checkValidity()) {
      // 验证通过 → 跳转至支付页（示例）
      window.location.href = 'payement.html';
    }
    // 若验证失败，浏览器会自动显示提示（如“请填写此字段”），无需额外代码
  }
});

// 单独处理注册按钮点击
document.getElementById('myButton').addEventListener('click', function () {
  window.location.href = 'Signup.html';
});

⚠️ 注意事项与最佳实践

• 不要移除 required 或改用 click 模拟验证：原生 required 提供无障碍支持、国际化提示、键盘回车兼容性及最小化 JS 依赖，应优先利用。
• 始终调用 e.preventDefault()：在自定义 submit 处理中必须阻止默认行为，否则表单会以传统方式提交（可能造成页面刷新或 404）。
• form.checkValidity() 是关键：它主动触发并返回验证结果，配合 :valid/:invalid CSS 伪类可实现样式反馈。
• 避免重复 ID 和冗余 标签：原代码中 是非法嵌套（ 不应在
  内），已改为

  ，确保 HTML 结构合规。

  安全性提醒：前端验证仅为用户体验优化，所有敏感操作（如登录、注册）必须由后端二次校验，防止绕过。

  通过以上调整，您的登录表单将真正发挥 required 属性的作用：空提交时自动高亮错误字段并提示用户，仅当邮箱和密码均有效时才跳转目标页面——简洁、健壮、符合 Web 标准。

  立即学习“前端免费学习笔记（深入）”；