本文针对HTML表单中使用JavaScript的if语句进行页面重定向失效的问题，提供了清晰的解决方案。通过修正this.form的引用错误，并建议使用onsubmit事件来触发JavaScript函数，从而确保在用户名和密码验证成功后，页面能够正确地重定向到目标URL。同时，强调了防止表单默认提交行为的重要性，确保JavaScript逻辑能够完全控制页面的跳转。
在html表单中，我们经常需要根据用户输入的信息来决定是否重定向到另一个页面。例如，在登录页面中，只有当用户输入的用户名和密码正确时，才应该跳转到主页。然而，在实际操作中，可能会遇到使用javascript的if语句进行重定向时失效的问题。本文将详细介绍如何解决这个问题，并提供一个可行的解决方案。
问题分析
问题的核心在于如何正确地将表单元素传递给JavaScript函数，以及如何防止表单的默认提交行为干扰我们的重定向逻辑。原始代码中，通过onclick事件调用testResults函数，并将this.form作为参数传递，这可能导致函数无法正确获取表单对象。
解决方案
以下是一个修正后的代码示例，它解决了上述问题，并提供了一个更可靠的重定向方法：
<!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.href = "redirected.html"; // 使用 window.location.href 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>
关键修改：
- 使用 onsubmit 事件： 将 onclick 事件替换为 onsubmit 事件，并将 testResults(this) 作为事件处理函数。 onsubmit 事件会在表单提交时触发，并将表单对象 this 传递给函数。
- 阻止表单提交： 在 testResults 函数中，无论验证成功与否，都返回 false。这可以阻止表单的默认提交行为，确保页面只在JavaScript的控制下进行重定向。
- 使用 window.location.href： 使用 window.location.href 属性进行重定向。这是一种更常用且可靠的方法。
- 添加<!DOCTYPE html>: 确保HTML文档使用正确的文档类型声明，避免浏览器进入怪异模式，从而影响JavaScript的执行。
解释说明
- onsubmit 事件： onsubmit 事件在表单提交时触发，允许我们在提交前执行一些验证或处理逻辑。通过返回 false，我们可以阻止表单的默认提交行为。
- window.location.href： window.location.href 属性用于获取或设置当前窗口的URL。通过设置该属性，我们可以将页面重定向到新的URL。
注意事项
- 安全性： 在实际应用中，不要在客户端存储或验证敏感信息，如用户名和密码。应该将这些信息发送到服务器进行验证。
- 用户体验： 在重定向之前，可以向用户显示一些反馈信息，例如“正在登录…”或“验证成功，正在跳转…”。
- 错误处理： 在实际应用中，应该添加适当的错误处理机制，以处理各种可能出现的问题，例如网络错误或服务器错误。
总结
通过使用 onsubmit 事件和 window.location.href 属性，我们可以更可靠地控制HTML表单的重定向行为。同时，通过阻止表单的默认提交行为，我们可以确保页面只在JavaScript的控制下进行跳转。在实际应用中，还应该考虑安全性、用户体验和错误处理等因素，以提供更好的用户体验。
立即学习“Java免费学习笔记（深入）”；
大家都在看：
css javascript word java html 浏览器 win html表单 表单提交 red JavaScript html if 对象 事件 this location href