一、作业要求
自行搭建前端页面并进行解析
二、操作过程
代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易登录表单</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.login-container {
background-color: white;
padding: 2rem 3rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
h1 {
text-align: center;
color: #1a73e8;
margin-bottom: 2rem;
font-size: 24px;
}
.form-group {
margin-bottom: 1.5rem;
}
label {
display: block;
margin-bottom: 0.5rem;
color: #5f6368;
font-size: 14px;
}
input {
width: 100%;
padding: 12px;
border: 1px solid #dadce0;
border-radius: 4px;
font-size: 16px;
transition: border-color 0.2s;
}
input:focus {
outline: none;
border-color: #1a73e8;
}
button {
width: 100%;
padding: 12px;
background-color: #1a73e8;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s;
}
button:hover {
background-color: #1557b0;
}
.error-message {
color: #d93025;
font-size: 13px;
margin-top: 5px;
display: none;
}
.success-message {
color: #137333;
text-align: center;
margin-top: 1rem;
display: none;
}
</style>
</head>
<body>
<div class="login-container">
<h1>用户登录</h1>
<form id="loginForm">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" name="username" required>
<div class="error-message" id="usernameError">请输入用户名</div>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" required>
<div class="error-message" id="passwordError">请输入密码</div>
</div>
<button type="submit">登录</button>
<div class="success-message" id="successMessage">登录成功！</div>
</form>
</div>
<script>
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
let isValid = true;
const username = document.getElementById('username').value.trim();
const password = document.getElementById('password').value.trim();
const usernameError = document.getElementById('usernameError');
const passwordError = document.getElementById('passwordError');
const successMessage = document.getElementById('successMessage');
// 重置错误消息和成功消息
usernameError.style.display = 'none';
passwordError.style.display = 'none';
successMessage.style.display = 'none';
// 验证用户名
if (username === '') {
usernameError.textContent = '请输入用户名';
usernameError.style.display = 'block';
isValid = false;
} else if (username.length < 3) {
usernameError.textContent = '用户名至少需要3个字符';
usernameError.style.display = 'block';
isValid = false;
}
// 验证密码
if (password === '') {
passwordError.textContent = '请输入密码';
passwordError.style.display = 'block';
isValid = false;
} else if (password.length < 6) {
passwordError.textContent = '密码至少需要6个字符';
passwordError.style.display = 'block';
isValid = false;
}
// 如果验证通过，显示成功消息
if (isValid) {
successMessage.style.display = 'block';
// 这里可以添加实际登录逻辑，比如发送请求到服务器
console.log('登录信息:', { username, password });
}
});
</script>
</body>
</html>
- 核心结构与功能
HTML基础架构表单包含用户名和密码输入框、提交按钮，以及隐藏的错误/成功消息容器。required属性实现基础非空验证。
数据提交机制表单通过submit事件触发前端验证，验证通过后模拟登录成功（控制台打印数据）。 - CSS样式设计分析
布局与视觉层次
使用Flex布局居中表单（justify-content: center; align-items: center;），背景色#f0f2f5提升视觉舒适度。
卡片化设计：白色背景+圆角边框（border-radius: 8px）+ 阴影（box-shadow: 0 2px 10px rgba(0,0,0,0.1)）增强立体感。
交互反馈优化
输入框聚焦状态：蓝色边框（input:focus { border-color: #1a73e8; }）。
按钮悬停效果：深蓝色背景（button:hover { background-color: #1557b0; }）提升可点击性。 - JavaScript交互逻辑
验证流程
document.getElementById(‘loginForm’).addEventListener(‘submit’, function(e) {
e.preventDefault(); // 阻止默认提交
const username = document.getElementById(‘username’).value.trim();
// 验证规则：
if (username === ‘’) { /* 显示错误 / }
else if (username.length < 3) { / 显示错误 */ }
// 密码验证类似…
if (isValid) { successMessage.style.display = ‘block’; } // 验证通过
});
规则说明：
用户名：非空且≥3字符（username.length < 3触发错误）。
密码：非空且≥6字符（基础密码安全要求）。
动态反馈机制错误消息通过修改style.display = 'block’动态显示，避免页面刷新。成功消息同理。
运行结果
