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