详解JS实现系统登录页的登录和验证

2023年6月10日下午7:00 • JavaScript

下面是我对于“详解JS实现系统登录页的登录和验证”的完整攻略，具体包含以下内容：

一、前置准备

在开始讲解实现系统登录页的登录和验证的具体流程之前，我们需要进行一些前置准备：

1.1 编辑器

首先，我们需要使用一款文本编辑器来编写我们的代码，常见的编辑器有Visual Studio Code、Sublime Text、Atom等，您可以根据自己的习惯选择任意一款。

1.2 HTML、CSS、JavaScript基础

在进行具体实现之前，我们需要掌握基础的HTML、CSS和JavaScript知识，如果您对这些知识还不太熟悉，建议您先补充一下相关知识再进行该攻略的学习。

1.3 AJAX

实现登录验证一般使用AJAX技术，因此我们需要了解AJAX相关的知识。

二、实现登录页HTML代码

我们需要先完成登录页HTML代码的编写，HTML代码如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录页</title>
    <style type="text/css">
        body {
            background: #f1f1f1;
            font-family: Arial, sans-serif;
            color: #666;
            font-size: 14px;
        }

        .login-box {
            width: 400px;
            border: 1px solid #ccc;
            margin: 50px auto;
            background: #fff;
            padding: 10px;
        }

        .login-box input[type="text"],
        .login-box input[type="password"] {
            display: block;
            margin: 10px 0;
            padding: 5px;
            width: 100%;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            outline: none;
        }

        .login-box input[type="submit"] {
            display: block;
            margin: 10px 0;
            padding: 5px;
            width: 100%;
            border: none;
            background: #00a0e9;
            color: #fff;
            border-radius: 4px;
            box-sizing: border-box;
            outline: none;
            cursor: pointer；
        }

        .login-box input[type="submit"]:hover {
            background: #008fd6;
        }
    </style>
</head>
<body>
    <div class="login-box">
        <h2>系统登录页</h2>
        <form action="" id="login-form">
            <label for="username">用户名：</label>
            <input type="text" name="username" id="username" placeholder="请输入用户名">
            <label for="password">密码：</label>
            <input type="password" name="password" id="password" placeholder="请输入密码">
            <input type="submit" value="登录">
        </form>
    </div>
</body>
</html>

该代码实现一个简单的系统登录页，包括用户名和密码输入框以及提交按钮。

三、实现登录验证的JavaScript代码

接下来，我们需要编写验证用户输入的JavaScript代码，代码如下：

window.onload = function() {
    var loginForm = document.querySelector("#login-form"); // 获取登录表单
    var usernameInput = document.querySelector("#username"); // 获取用户名输入框
    var passwordInput = document.querySelector("#password"); // 获取密码输入框

    loginForm.onsubmit = function(event) {
        event.preventDefault(); // 阻止表单默认提交行为
        var username = usernameInput.value.trim(); // 获取用户名
        var password = passwordInput.value.trim(); // 获取密码

        if (username === "") { // 用户名为空
            alert("用户名不能为空");
            return false;
        }

        if (password === "") { // 密码为空
            alert("密码不能为空");
            return false;
        }

        // 发送AJAX请求验证用户名和密码是否正确
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/login", true);
        xhr.setRequestHeader("Content-type", "application/json;charset=utf-8"); // 设置请求头
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) { // 登录成功，跳转到首页
                    window.location.href = "/index";
                } else { // 登录失败，提示错误信息
                    alert("登录失败，请检查用户名和密码是否正确！");
                }
            }
        }
        var data = {
            "username": username,
            "password": password
        };
        xhr.send(JSON.stringify(data)); // 将数据转换为JSON格式发送
    }   
}

该代码通过AJAX技术向服务器发送用户名和密码，并对返回结果进行验证，如果登录成功则跳转到首页，否则提示错误信息。

值得注意的是，这里我们需要向服务器发送一个POST请求，因此需要在服务器端设置对应的路由和处理该请求的代码。

下面给出一个基于Node.js和Express框架的服务器端处理代码示例：

app.post("/login", function (req, res) {
    var username = req.body.username;
    var password = req.body.password;

    // 在这里进行用户名和密码验证
    // ...

    // 登录成功
    if (username === "admin" && password === "admin123") {
        res.status(200).send("success");
    } else { // 登录失败
        res.status(401).send("error");
    }
})

该代码通过Express框架，针对/login路由进行处理，获取请求中的用户名和密码，进行对应的验证操作，如果登录成功则返回状态码200和success信息，否则返回401和error信息。