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

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

碧海醫心

发布： 2025-09-14 18:36:02

原创

160人浏览过

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

本文旨在解决 HTML 表单提交时，JavaScript 的 if 语句无法正确执行页面重定向的问题。通过分析常见错误原因，提供基于 onsubmit 事件的正确实现方式，并强调前端验证的局限性，建议结合后端验证确保安全性。

问题分析

在 HTML 表单中，使用 JavaScript 验证用户输入并根据验证结果进行页面重定向是一种常见的需求。然而，在实现过程中，可能会遇到 if 语句无法正确执行，导致页面无法按预期跳转的问题。

常见的错误原因包括：

this.form 使用错误： 在 onclick 事件中，this 指向的是触发事件的元素，即 <input type="submit">，而不是整个表单。因此，this.form 无法正确获取表单对象。
表单默认行为： submit 按钮的默认行为是提交表单。如果未阻止默认行为，表单可能会在 JavaScript 执行之前提交，导致重定向失败。

解决方案

为了解决上述问题，推荐使用 onsubmit 事件来处理表单提交，并阻止表单的默认行为。

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

1. 修改 HTML 结构

Bracket响应式Bootstrap3后台管理模板

Bracket是一套充分响应式布局后台管理系统模板，基于Bootstrap3和jQuery插件制作，自适应屏幕分辨率大小，兼容PC端和手机、平板等移动端设备，全套模板，包含注册页、登录页、仪表盘、邮件、表格布局、表单验证、窗体向导、文本编辑器、代码编辑器、UI元素、按钮、图标、活版印刷、警报和通知、标签、滑块、图形与图表、面板和部件、地图、日历、媒体管理器、时间表、博客列表、博客单页、用户目录、轮

358

查看详情

将 JavaScript 函数绑定到 <form> 元素的 onsubmit 事件，并移除 <input type="submit"> 元素上的 onclick 事件。同时，添加 return false 以阻止表单的默认提交行为。

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

登录后复制

2. 修改 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 true; // 允许表单提交
    } else {
        alert("Wrong username and/or password.");
        return false; // 阻止表单提交
    }
}

登录后复制

完整代码示例

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

登录后复制

注意事项

安全性： 前端 JavaScript 验证仅仅是一种客户端的验证方式，并不能保证数据的安全性。恶意用户可以通过绕过 JavaScript 验证来提交非法数据。因此，务必在后端进行服务器端验证，以确保数据的安全性和完整性。
用户体验： 在用户体验方面，可以考虑使用 AJAX 技术实现异步验证，避免页面刷新，提升用户体验。
错误处理： 在实际应用中，需要添加更完善的错误处理机制，例如，显示更友好的错误提示信息，记录错误日志等。

总结

本文介绍了如何使用 JavaScript 实现用户登录验证和页面重定向，并解决了 if 语句无法正确执行的问题。通过使用 onsubmit 事件和阻止表单默认行为，可以确保 JavaScript 代码能够正确执行，并实现预期的页面跳转。但是，请务必记住，前端验证仅仅是一种辅助手段，不能替代后端验证。为了确保数据的安全性和用户体验，需要结合前后端验证，并添加完善的错误处理机制。

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