html 表单中 required 属性仅在表单提交（submit）时触发浏览器原生验证，若通过按钮 click 事件跳转页面而未真正提交表单，验证将被绕过。解决方法是监听 form 的 submit 事件，并阻止默认行为后再执行逻辑。
html 表单中 required 属性仅在表单提交（submit）时触发浏览器原生验证，若通过按钮 click 事件跳转页面而未真正提交表单，验证将被绕过。解决方法是监听 form 的 submit 事件，并阻止默认行为后再执行逻辑。
在您提供的登录页代码中， 元素已正确添加 required 属性，且 type=”email” 和 type=”password” 也符合语义化要求——这本身没有问题。但关键缺陷在于：两个按钮（Login 和 Signup）均通过 click 事件直接调用 window.location.href 跳转，完全绕过了表单提交流程。因此，浏览器根本没有机会触发 required 验证，导致“必填校验失效”。
✅ 正确做法是：统一监听
，根据提交按钮的 name 或 id 判断用户意图，并在验证通过后执行对应跳转。
以下是修复后的完整代码（关键修改已高亮说明）：
<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="••••••••"> <!-- 为按钮添加 name 属性以便区分提交意图 --> <button type="submit" name="action" value="login" id="my2Button">Login</button> <div id="text1" style="text-align: center; margin: 12px 0;">or if you don't have an account</div> <button type="submit" name="action" value="signup" id="myButton">Signup</button> </form> <script> const form = document.getElementById('loginForm'); form.addEventListener('submit', function (e) { e.preventDefault(); // ✅ 关键：阻止默认提交（否则页面会刷新或跳转到空URL） // 获取触发提交的按钮值 const submitBtn = e.submitter; const action = submitBtn?.value; // 浏览器原生验证在此刻生效（自动检查 required、email 格式等） if (!form.checkValidity()) { // 若验证失败，浏览器会显示默认提示（如 "Please fill in this field"） return; } // 验证通过后，按需跳转 if (action === 'login') { window.location.href = 'payement.html'; } else if (action === 'signup') { window.location.href = 'Signup.html'; } }); </script>? 重要说明与最佳实践：
立即学习“前端免费学习笔记（深入）”；
- e.preventDefault() 不可省略：它阻止表单默认提交行为（如 GET 请求到当前 URL），确保我们能自主控制后续逻辑；
- 使用 e.submitter 获取点击的按钮：现代浏览器支持该属性，精准识别用户是点了 Login 还是 Signup（兼容性良好，chrome 58+/firefox 76+/edge 79+）；
- 保留 required + type=”email”：它们仍发挥核心作用——只要触发 submit，浏览器就会自动校验并聚焦错误字段；
- 避免多个 type=”submit” 按钮共用同一表单却无区分逻辑：否则无法判断用户意图，易引发误跳转；
- 增强健壮性（可选）：可补充 form.addEventListener(‘invalid’, …) 自定义错误提示，或用 setCustomValidity() 实现更灵活的验证规则。
? 总结：required 不是“点击即校验”，而是“提交时校验”。把交互逻辑从 button.click 迁移到 form.submit，既修复了验证失效问题，也符合 HTML 表单设计规范，是前端表单开发的基石原则。