当前位置：首页 > JavaScript

js实现简单的登陆功能

2026-03-02 00:37:45JavaScript

实现登录功能的基本步骤

HTML部分需要创建表单，包含用户名和密码输入框以及提交按钮。

<!DOCTYPE html>
<html>
<head>
    <title>登录页面</title>
</head>
<body>
    <form id="loginForm">
        <div>
            <label for="username">用户名:</label>
            <input type="text" id="username" required>
        </div>
        <div>
            <label for="password">密码:</label>
            <input type="password" id="password" required>
        </div>
        <button type="submit">登录</button>
    </form>
    <div id="message"></div>
    <script src="login.js"></script>
</body>
</html>

JavaScript验证逻辑

创建login.js文件处理表单提交事件，验证输入并模拟登录过程。

document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault();

    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    const messageElement = document.getElementById('message');

    if (!username || !password) {
        messageElement.textContent = '用户名和密码不能为空';
        messageElement.style.color = 'red';
        return;
    }

    // 模拟验证逻辑
    if (username === 'admin' && password === '123456') {
        messageElement.textContent = '登录成功！';
        messageElement.style.color = 'green';
        // 实际项目中这里会跳转页面或设置登录状态
    } else {
        messageElement.textContent = '用户名或密码错误';
        messageElement.style.color = 'red';
    }
});

添加本地存储功能

可以使用localStorage保存登录状态，实现页面刷新后保持登录。

// 登录成功后保存状态
localStorage.setItem('isLoggedIn', 'true');
localStorage.setItem('username', username);

// 页面加载时检查登录状态
window.addEventListener('load', function() {
    if (localStorage.getItem('isLoggedIn') === 'true') {
        document.getElementById('loginForm').style.display = 'none';
        document.getElementById('message').textContent = 
            `欢迎回来, ${localStorage.getItem('username')}!`;
    }
});

添加密码显示切换功能

增强用户体验，添加密码可见性切换按钮。

<div>
    <label for="password">密码:</label>
    <input type="password" id="password" required>
    <button type="button" id="togglePassword">显示</button>
</div>

document.getElementById('togglePassword').addEventListener('click', function() {
    const passwordField = document.getElementById('password');
    const toggleButton = document.getElementById('togglePassword');

    if (passwordField.type === 'password') {
        passwordField.type = 'text';
        toggleButton.textContent = '隐藏';
    } else {
        passwordField.type = 'password';
        toggleButton.textContent = '显示';
    }
});

表单输入验证增强

添加更详细的输入验证，如长度限制和字符限制。

function validateInput(username, password) {
    const errors = [];

    if (username.length < 4) {
        errors.push('用户名至少需要4个字符');
    }

    if (password.length < 6) {
        errors.push('密码至少需要6个字符');
    }

    if (!/^[a-zA-Z0-9_]+$/.test(username)) {
        errors.push('用户名只能包含字母、数字和下划线');
    }

    return errors;
}

// 在提交处理函数中使用
const validationErrors = validateInput(username, password);
if (validationErrors.length > 0) {
    messageElement.textContent = validationErrors.join('\n');
    messageElement.style.color = 'red';
    return;
}

js实现简单的登陆功能