本文旨在解决 HTML 表单提交时，JavaScript 的 if 语句无法正确执行页面重定向的问题。通过分析常见错误原因，提供基于 onsubmit 事件的正确实现方式，并强调前端验证的局限性，建议结合后端验证确保安全性。
问题分析
在 HTML 表单中，使用 JavaScript 验证用户输入并根据验证结果进行页面重定向是一种常见的需求。然而，在实现过程中，可能会遇到 if 语句无法正确执行，导致页面无法按预期跳转的问题。
常见的错误原因包括：
- this.form 使用错误： 在 onclick 事件中，this 指向的是触发事件的元素，即 <input type=”submit”>，而不是整个表单。因此，this.form 无法正确获取表单对象。
- 表单默认行为： submit 按钮的默认行为是提交表单。如果未阻止默认行为，表单可能会在 JavaScript 执行之前提交，导致重定向失败。
解决方案
为了解决上述问题，推荐使用 onsubmit 事件来处理表单提交，并阻止表单的默认行为。
立即学习“Java免费学习笔记（深入）”；
1. 修改 HTML 结构
将 JavaScript 函数绑定到 <form> 元素的 onsubmit 事件，并移除 <input type=”submit”> 元素上的 onclick 事件。同时，添加 return false 以阻止表单的默认提交行为。
<form action="" method="get" onsubmit="return testResults(this)"> <label for="username"> <i class="fas fa-user"></i> </label> <input type="text" name="username" placeholder="Username" id="username" required> <label for="password"> <i class="fas fa-lock"></i> </label> <input type="password" name="password" placeholder="Password" id="password" required> <input type="submit" value="Login" /> </form>2. 修改 JavaScript 函数
修改 JavaScript 函数，使其接收表单对象作为参数，并使用该参数来访问表单元素。
function testResults (form) { var given_username = form.username.value; var given_password = form.password.value; var correct_username = "123"; var correct_password = "123"; if (given_username == correct_username && given_password == correct_password) { window.location.assign("redirected.html"); return true; // 允许表单提交 } else { alert("Wrong username and/or password."); return false; // 阻止表单提交 } }完整代码示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1"> <title>Login</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"> <link href="login.css" rel="stylesheet" type="text/css"> <script> function testResults (form) { var given_username = form.username.value; var given_password = form.password.value; var correct_username = "123"; var correct_password = "123"; if (given_username == correct_username && given_password == correct_password) { window.location.assign("redirected.html"); return false; } else { alert("Wrong username and/or password."); return false; } } </script> </head> <body> <div class="login"> <h1>Login</h1> <form action="" method="get" onsubmit="return testResults(this)"> <label for="username"> <i class="fas fa-user"></i> </label> <input type="text" name="username" placeholder="Username" id="username" required> <label for="password"> <i class="fas fa-lock"></i> </label> <input type="password" name="password" placeholder="Password" id="password" required> <input type="submit" value="Login" /> </form> </div> </body> </html>注意事项
- 安全性： 前端 JavaScript 验证仅仅是一种客户端的验证方式，并不能保证数据的安全性。恶意用户可以通过绕过 JavaScript 验证来提交非法数据。因此，务必在后端进行服务器端验证，以确保数据的安全性和完整性。
- 用户体验： 在用户体验方面，可以考虑使用 AJAX 技术实现异步验证，避免页面刷新，提升用户体验。
- 错误处理： 在实际应用中，需要添加更完善的错误处理机制，例如，显示更友好的错误提示信息，记录错误日志等。
总结
本文介绍了如何使用 JavaScript 实现用户登录验证和页面重定向，并解决了 if 语句无法正确执行的问题。通过使用 onsubmit 事件和阻止表单默认行为，可以确保 JavaScript 代码能够正确执行，并实现预期的页面跳转。 但是，请务必记住，前端验证仅仅是一种辅助手段，不能替代后端验证。为了确保数据的安全性和用户体验，需要结合前后端验证，并添加完善的错误处理机制。
css javascript word java html 前端 ajax 后端 win 表单提交 red JavaScript ajax html if 对象 事件 this 异步 input