当前位置：首页 > JavaScript

js实现简单的登陆功能

2026-04-05 01:28:19JavaScript

实现简单登录功能的步骤

HTML部分
创建基本的登录表单，包含用户名和密码输入框以及提交按钮。

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

JavaScript部分
监听表单提交事件，验证用户名和密码。

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');

    // 模拟验证逻辑（实际项目中需对接后端API）
    if (username === 'admin' && password === '123456') {
        messageElement.textContent = '登录成功！';
        messageElement.style.color = 'green';
        // 实际项目中此处可跳转页面或存储token
    } else {
        messageElement.textContent = '用户名或密码错误！';
        messageElement.style.color = 'red';
    }
});

扩展功能

本地存储验证信息
使用localStorage模拟持久化登录状态。

// 登录成功后存储信息
localStorage.setItem('isLoggedIn', 'true');
localStorage.setItem('username', username);

// 页面加载时检查登录状态
window.onload = function() {
    if (localStorage.getItem('isLoggedIn') === 'true') {
        alert(`欢迎回来, ${localStorage.getItem('username')}`);
    }
};

密码显示切换
增加密码可见性切换按钮。

js实现简单的登陆功能

<input type="password" id="password" required>
<button type="button" id="togglePassword">显示</button>

document.getElementById('togglePassword').addEventListener('click', function() {
    const passwordField = document.getElementById('password');
    if (passwordField.type === 'password') {
        passwordField.type = 'text';
        this.textContent = '隐藏';
    } else {
        passwordField.type = 'password';
        this.textContent = '显示';
    }
});