HTML JavaScript 使用 if 语句进行重定向无效的解决方案-html教程-PHP中文网

HTML JavaScript 使用 if 语句进行重定向无效的解决方案

霞舞

发布： 2025-09-14 18:54:01

原创

802人浏览过

HTML JavaScript 使用 if 语句进行重定向无效的解决方案

本文针对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>

登录后复制

关键修改：

降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

113

查看详情

使用 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免费学习笔记（深入）”；

以上就是HTML JavaScript 使用 if 语句进行重定向无效的解决方案的详细内容，更多请关注php中文网其它相关文章！