使用 JavaScript 进行条件重定向：解决 HTML 表单提交问题-html教程-PHP中文网

使用 JavaScript 进行条件重定向：解决 HTML 表单提交问题

碧海醫心

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

原创

484人浏览过

使用 javascript 进行条件重定向：解决 html 表单提交问题

本文旨在解决 HTML 表单提交后，使用 JavaScript 的 if 语句进行条件重定向时遇到的问题。通过分析常见的错误原因和提供正确的代码示例，帮助开发者理解如何正确地获取表单元素以及如何使用 onsubmit 事件处理程序，确保用户在满足特定条件后才能成功跳转到目标页面。

在使用 JavaScript 处理 HTML 表单提交和页面重定向时，经常会遇到一些问题，特别是当需要根据用户输入进行条件判断时。以下将详细介绍如何正确地实现这一功能，并避免常见的错误。

正确获取表单对象

在原始代码中，通过 onclick="testResults(this.form)" 传递表单对象的方式是不正确的。this.form 在 input 元素的上下文中可能无法正确引用到表单对象。更可靠的方法是使用 onsubmit 事件处理程序，并将表单对象作为参数传递给 JavaScript 函数。

使用 onsubmit 事件处理程序

onsubmit 事件处理程序会在表单提交时触发。通过将 JavaScript 函数绑定到 onsubmit 事件，可以确保在提交表单之前执行验证和重定向逻辑。

立即学习“Java免费学习笔记（深入）”；

以下是修改后的 HTML 代码示例：

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

<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>

登录后复制