本文旨在解决 HTML 表单提交后，使用 JavaScript 的 if 语句进行条件重定向时遇到的问题。通过分析常见的错误原因和提供正确的代码示例，帮助开发者理解如何正确地获取表单元素以及如何使用 onsubmit 事件处理程序，确保用户在满足特定条件后才能成功跳转到目标页面。
在使用 JavaScript 处理 HTML 表单提交和页面重定向时，经常会遇到一些问题，特别是当需要根据用户输入进行条件判断时。以下将详细介绍如何正确地实现这一功能，并避免常见的错误。
正确获取表单对象
在原始代码中，通过 onclick=”testResults(this.form)” 传递表单对象的方式是不正确的。this.form 在 input 元素的上下文中可能无法正确引用到表单对象。更可靠的方法是使用 onsubmit 事件处理程序，并将表单对象作为参数传递给 JavaScript 函数。
使用 onsubmit 事件处理程序
onsubmit 事件处理程序会在表单提交时触发。通过将 JavaScript 函数绑定到 onsubmit 事件，可以确保在提交表单之前执行验证和重定向逻辑。
立即学习“Java免费学习笔记（深入）”；
以下是修改后的 HTML 代码示例：
<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>
注意以下几点：
- onsubmit=”return testResults(this)”: this 关键字在这里正确地引用了表单对象，并将其作为参数传递给 testResults 函数。return 关键字用于阻止表单的默认提交行为，以便 JavaScript 可以控制页面重定向。
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 false; // 阻止表单的默认提交 } else { alert("Wrong username and/or password."); return false; // 阻止表单的默认提交 } }
关键点：
- form.username.value 和 form.password.value: 通过 form 对象直接访问表单元素的 value 属性。
- return false;: 在 if 和 else 分支中都添加了 return false;，以阻止表单的默认提交行为。这确保了页面重定向完全由 JavaScript 控制。
完整示例代码
以下是完整的 HTML 和 JavaScript 代码示例：
<!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>
注意事项
- 安全性: 在实际应用中，不要在客户端存储或验证密码。应该使用服务器端验证来确保安全性。
- 用户体验: 提供清晰的反馈信息，例如加载指示器，以改善用户体验。
- 错误处理: 添加适当的错误处理机制，以应对各种意外情况。
总结
通过使用 onsubmit 事件处理程序和正确地访问表单元素，可以有效地实现基于用户输入的条件重定向。记住要阻止表单的默认提交行为，并确保提供清晰的反馈信息给用户。在实际应用中，务必考虑安全性和用户体验。
以上就是使用 JavaScript 进行条件重定向：解决 HTML css javascript word java html win 表单提交 red JavaScript html if 对象 事件 this input