网络初级安全第三次作业-EW帮帮网

<!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;
        }
        
        input:focus {
            outline: none;
            border-color: #1a73e8;
            box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
        }
        
        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;
        }
    </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>
        </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');

            // 重置错误消息
            usernameError.style.display = 'none';
            passwordError.style.display = 'none';

            // 验证用户名
            if (!username) {
                usernameError.textContent = '请输入用户名';
                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) {
                alert('登录成功！\n用户名: ' + username);
                // 实际应用中，这里会发送登录请求到服务器
                // fetch('/api/login', { method: 'POST', body: JSON.stringify({username, password}) })
            }
        });
    </script>
</body>
</html>

代码标签的作用

<!DOCTYPE html
声明文档类型为 HTML5，告诉浏览器告诉浏览器使用 HTML5 标准解析页面。
<html>
HTML 文档的根标签，所有其他标签都嵌套在其中。lang="zh-CN"属性指定页面主要语言为简体中文，有助于搜索引擎和辅助工具理解内容。
<head>
包含页面的元数据（不直接显示在页面上的信息），如字符集、标题、样式等。
<meta>
- charset="UTF-8"：指定页面字符编码为 UTF-8，支持中文等多语言显示。
- name="viewport" content="width=device-width, initial-scale=1.0"：设置响应式视图，确保页面在移动设备上正确缩放。
<title>
定义页面标题，显示在浏览器标签页上，也用于搜索引擎索引。
<style>
包含 CSS 样式代码，用于控制页面元素的布局和外观（如颜色、大小、间距等）。
<body>
包含页面的所有可见内容，如文本、图片、表单等。
<div>
通用容器标签，用于分组其他元素，便于通过 CSS 统一样式或通过 JavaScript 操作。例如.login-container用于包裹整个登录表单。
<h1>
一级标题标签，用于显示页面的主要标题（此处为 “账户登录”），具有语义化含义，也影响搜索引擎排名。
<form>
表单标签，用于创建用户输入表单。id="loginForm"用于通过 JavaScript 获取表单并绑定提交事件。
<label>
为表单元素定义标签，点击标签会聚焦到对应的输入框（通过for属性与输入框的id关联），提升用户体验。
<input>
输入框标签，用于收集用户输入：
- type="text"：文本输入框（用户名）。
- type="password"：密码输入框（输入内容会被隐藏）。
- required：指定该字段为必填项，浏览器会自动验证。
<button>
按钮标签，type="submit"表示点击后提交表单。
<script>
包含 JavaScript 代码，用于实现交互逻辑（如表单验证、提交处理等）。

该页面由三部分组成：

HTML：构建页面的基本结构和内容
CSS：负责页面的样式和布局设计
JavaScript：实现表单验证和提交逻辑

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样式 -->
</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>
        </form>
    </div>

    <!-- 引入JavaScript脚本 -->
</body>
</html>

使用<form>标签创建了一个登录表单，ID 为loginForm
包含两个输入字段：用户名（text类型）和密码（password类型）
每个输入字段都有对应的错误提示区域（error-message类）
使用required属性进行基本的表单验证

CSS 部分

基础样式重置

* {
    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;
}

JavaScript 部分

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

    // 重置错误消息
    usernameError.style.display = 'none';
    passwordError.style.display = 'none';

    // 验证用户名
    if (!username) {
        usernameError.textContent = '请输入用户名';
        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) {
        alert('登录成功！\n用户名: ' + username);
        // 实际应用中，这里会发送登录请求到服务器
        // fetch('/api/login', { method: 'POST', body: JSON.stringify({username, password}) })
    }
});

验证逻辑说明：

阻止表单默认提交行为，使用自定义验证
检查用户名是否为空
检查密码是否为空以及长度是否不少于 6 个字符
验证失败时显示相应的错误消息
验证通过时弹出登录成功提示（实际应用中会发送登录请求到服务器）

网络初级安全第三次作业

网站公告

今日签到

热门文章

最新发布