源代码

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录页面</title><!-- 引入外部CSS文件 --><link rel="stylesheet" href="styles.css">
</head>
<body><!-- 登录页面的容器 --><div class="login-container"><!-- 页面标题 --><h2>登录</h2><!-- 表单元素，用于用户输入 --><form id="loginForm"><!-- 用户名输入框 --><div class="input-group"><label for="username">用户名:</label><!-- 输入框必须填写 --><input type="text" id="username" name="username" required></div><!-- 密码输入框 --><div class="input-group"><label for="password">密码:</label><!-- 输入框必须填写 --><input type="password" id="password" name="password" required></div><!-- 提交按钮 --><button type="submit">登录</button></form><!-- 显示验证信息的容器 --><div id="message"></div></div><!-- 引入外部JavaScript文件 --><script src="script.js"></script>
</body>
</html>

styles.css

/* 整体页面样式 */
body {font-family: Arial, sans-serif;background-color: #f4f4f9;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;
}/* 登录页面容器样式 */
.login-container {background-color: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);width: 300px;text-align: center;
}/* 标题样式 */
h2 {margin-bottom: 20px;
}/* 输入框组样式 */
.input-group {margin-bottom: 15px;text-align: left;
}/* 标签样式 */
label {display: block;margin-bottom: 5px;
}/* 输入框样式 */
input[type="text"],
input[type="password"] {width: 100%;padding: 8px;box-sizing: border-box;border: 1px solid #ccc;border-radius: 4px;
}/* 按钮样式 */
button {width: 100%;padding: 10px;background-color: #007bff;color: #fff;border: none;border-radius: 4px;cursor: pointer;
}/* 按钮悬停样式 */
button:hover {background-color: #0056b3;
}/* 验证信息显示样式 */
#message {margin-top: 15px;color: red;
}

script.js

// 为表单添加提交事件监听器
document.getElementById('loginForm').addEventListener('submit', function(event) {event.preventDefault(); // 阻止表单默认提交行为，防止页面刷新// 获取用户名和密码输入框的值var username = document.getElementById('username').value;var password = document.getElementById('password').value;var messageDiv = document.getElementById('message');// 简单的验证逻辑if (username === '' || password === '') {// 如果用户名或密码为空，显示错误信息messageDiv.textContent = '用户名和密码不能为空';} else if (username === 'admin' && password === 'password') {// 如果用户名和密码匹配预定义值，显示成功信息messageDiv.style.color = 'green';messageDiv.textContent = '登录成功';// 这里可以添加登录成功后的逻辑，比如重定向到其他页面// window.location.href = 'dashboard.html';} else {// 如果用户名或密码不匹配，显示错误信息messageDiv.textContent = '用户名或密码错误';}
});

效果图

分析

1. index.html

此为网页的 HTML 结构，它定义了页面的基本内容与布局。

元数据与标题：借助 <meta> 标签设定字符编码与视口，页面标题为 “登录页面”。
样式引入：通过 <link> 标签引入外部 CSS 文件 styles.css，用于页面样式的美化。
登录表单：构建了一个包含用户名和密码输入框的表单，二者均为必填项。表单的 id 为 loginForm，方便后续 JavaScript 操作。
消息显示区域：利用 <div id="message"> 来显示登录验证的结果信息。
脚本引入：通过 <script> 标签引入外部 JavaScript 文件 script.js，以实现表单提交的交互逻辑。

2. styles.css

为页面提供样式，确保页面具有良好的视觉效果。

整体页面样式：将页面背景颜色设为 #f4f4f9，使用 flexbox 布局让登录容器居中显示。
登录容器样式：设置登录容器的背景颜色为白色，添加圆角和阴影效果，宽度为 300px。
输入框与按钮样式：为输入框和按钮添加了边框、圆角和内边距，按钮悬停时背景颜色会发生变化。
验证信息样式：验证信息默认显示为红色。

3. script.js

实现了表单提交的交互逻辑，包含输入验证和登录结果显示。

事件监听：为表单添加 submit 事件监听器，阻止表单的默认提交行为，避免页面刷新。
输入验证：获取用户名和密码输入框的值，进行简单的验证。若用户名或密码为空，显示错误信息；若用户名和密码匹配预定义值（admin 和 password），显示成功信息；否则，显示错误信息。
登录成功逻辑：在登录成功时，可添加重定向到其他页面的逻辑，如 window.location.href = 'dashboard.html';。