使用 JavaScript 和 HTML 实现用户登录验证和页面重定向-html教程-PHP中文网

使用 JavaScript 和 HTML 实现用户登录验证和页面重定向

霞舞

发布： 2025-09-14 19:15:15

原创

359人浏览过

使用 javascript 和 html 实现用户登录验证和页面重定向

本文档旨在指导开发者如何使用 JavaScript 和 HTML 实现一个简单的用户登录验证功能，并在验证成功后将用户重定向到另一个页面。我们将重点介绍如何正确地获取表单数据、进行条件判断，以及使用 window.location.assign() 方法实现页面跳转。同时，本文还将讨论如何避免常见错误，并提供一些最佳实践建议。

实现用户登录验证和页面重定向

以下是一个完整的 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");
            } 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

查看详情

HTML 结构：
- 一个包含用户名和密码输入框的表单。
- 一个提交按钮，用于触发登录验证。
JavaScript 函数 testResults(form)：
- 获取用户输入的用户名和密码。
- 定义正确的用户名和密码（示例中为 "123"）。
- 使用 if 语句检查用户输入的用户名和密码是否正确。
- 如果正确，使用 window.location.assign("redirected.html") 将用户重定向到 redirected.html 页面。
- 如果错误，弹出一个警告框，提示用户名或密码错误。
- return false; 阻止表单的默认提交行为，避免页面刷新。
表单的 onsubmit 事件：
- onsubmit="return testResults(this)" 将 testResults 函数绑定到表单的 onsubmit 事件。
- this 关键字指向表单元素本身，将其作为参数传递给 testResults 函数。
- return false 阻止表单的默认提交行为，确保页面不会刷新。

关键点和注意事项

this 的使用： 在 onsubmit 事件中，this 关键字指向触发事件的表单元素。这使得我们可以将表单元素作为参数传递给 JavaScript 函数，从而访问表单中的输入字段。
window.location.assign()： 这是 JavaScript 中用于重定向页面的常用方法。它会将当前页面替换为指定的 URL。
阻止表单提交： 在 JavaScript 中处理表单提交时，通常需要阻止表单的默认提交行为，以避免页面刷新。这可以通过在 onsubmit 事件处理函数中返回 false 来实现。
安全性： 请注意，在客户端存储用户名和密码是非常不安全的做法。在实际应用中，应该使用服务器端验证来确保用户身份的安全性。此外，密码应该进行哈希处理，以防止泄露。
用户体验： 提供清晰的错误提示信息，帮助用户了解登录失败的原因。可以使用 CSS 来美化登录表单，提高用户体验。

总结

本文档介绍了如何使用 JavaScript 和 HTML 实现一个简单的用户登录验证和页面重定向功能。通过正确地获取表单数据、进行条件判断，以及使用 window.location.assign() 方法，我们可以实现基本的登录验证功能。然而，请务必注意安全性问题，并在实际应用中使用服务器端验证来确保用户身份的安全。同时，关注用户体验，提供清晰的错误提示信息和美观的界面，可以提高用户满意度。

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

以上就是使用 JavaScript 和 HTML 实现用户登录验证和页面重定向的详细内容，更多请关注php中文网其它相关文章！