HTML＋CSS＋JS 登录页面的代码结构入门_登录页面js代码

// 页面加载完成后执行的函数
window.onload = function() {
    // 获取登录按钮
    var loginButton = document.getElementById('login-button');
    // 为登录按钮添加点击事件监听器
    loginButton.addEventListener('click', function() {
        // 获取用户名和密码输入框的值
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
 
        // 简单的验证，如果用户名和密码都不为空，则提示登录成功
        if (username !== '' && password !== '') {
            alert('登录成功！');
            // 在这里可以添加登录成功后的代码，例如跳转到另一个页面
        } else {
            // 否则提示用户输入不能为空
            alert('用户名和密码不能为空！');
        }
    });
};

这段代码在用户点击登录按钮时，会检查用户名和密码是否为空。如果不为空，则提示登录成功；如果为空，则提示用户输入不能为空。这是一个非常基础的登录验证例子，实际应用中需要根据需求进行扩展和完善，比如加入表单验证、异步请求后端接口等。