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

苏承栈

2026-10-15 • 👁 0人浏览过

HTML 表单的 required 属性仅在表单提交（submit）时触发原生验证，若用 click 事件直接跳转页面，会绕过验证，导致必填校验失效。正确做法是监听表单的 submit 事件，并在验证通过后执行跳转。 html 表单的 `required` 属性仅在表单提交（`submit`）时触发原生验证，若用 `click` 事件直接跳转页面，会绕过验证，导致必填校验失效。正确做法是监听表单的 `submit` 事件，并在验证通过后执行跳转。在您提供的登录页代码中，元素已正确添加了 required 属性，样式与结构也无误——但问题根源在于：两个按钮均通过 click 事件直接调用 window.location.href 跳转，完全跳过了表单提交流程。而浏览器的原生 required 验证机制，只会在

元素触发 submit 事件（例如用户点击 type="submit" 按钮或回车提交）时自动执行。一旦使用 click + location.href，表单根本不提交，验证自然不会触发。 ✅ 正确解决方案：统一监听表单 submit 事件，并区分按钮行为首先，为两个按钮明确语义化类型： “Login” 按钮应为 type="submit"，用于触发表单验证与登录逻辑； “Signup” 按钮应为 type="button"（非 submit），避免意外提交，再通过 JavaScript 控制跳转；然后在上监听 submit 事件，通过 event.submitter 判断用户点击的是哪个按钮，再决定后续动作。以下是修复后的关键代码段（仅展示需修改部分，其余 HTML/CSS 保持不变）：使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更下载


  Email
  

  Password
  

  
  

  or if you don't have an account

// 获取表单元素
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 标准。立即学习 “ 前端免费学习笔记（深入） ”；

相关文章