feat: 登录页面表单验证与模拟登录功能

js/login.js

@@ -0,0 +1,121 @@
+/**
+ * 登录功能实现
+ * 原生JavaScript，不依赖框架
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+    const loginForm = document.getElementById('loginForm');
+    const usernameInput = document.getElementById('username');
+    const passwordInput = document.getElementById('password');
+    const usernameError = document.getElementById('username-error');
+    const passwordError = document.getElementById('password-error');
+    const formMessage = document.getElementById('form-message');
+    
+    // 用于演示的模拟用户数据
+    const mockUsers = [
+        { username: 'admin', password: 'admin123' },
+        { username: 'user', password: 'user123' }
+    ];
+    
+    /**
+     * 表单提交处理
+     */
+    loginForm.addEventListener('submit', function(e) {
+        e.preventDefault();
+        
+        // 重置错误信息
+        resetErrors();
+        
+        // 获取输入值
+        const username = usernameInput.value.trim();
+        const password = passwordInput.value.trim();
+        
+        // 验证表单
+        let isValid = validateForm(username, password);
+        
+        if (isValid) {
+            // 模拟登录请求
+            mockLogin(username, password);
+        }
+    });
+    
+    /**
+     * 表单验证
+     */
+    function validateForm(username, password) {
+        let isValid = true;
+        
+        // 验证用户名
+        if (username === '') {
+            displayError(usernameError, '请输入用户名');
+            isValid = false;
+        } else if (username.length < 3) {
+            displayError(usernameError, '用户名长度必须至少为3个字符');
+            isValid = false;
+        }
+        
+        // 验证密码
+        if (password === '') {
+            displayError(passwordError, '请输入密码');
+            isValid = false;
+        } else if (password.length < 6) {
+            displayError(passwordError, '密码长度必须至少为6个字符');
+            isValid = false;
+        }
+        
+        return isValid;
+    }
+    
+    /**
+     * 显示错误信息
+     */
+    function displayError(element, message) {
+        element.textContent = message;
+    }
+    
+    /**
+     * 重置错误信息
+     */
+    function resetErrors() {
+        usernameError.textContent = '';
+        passwordError.textContent = '';
+        formMessage.textContent = '';
+        formMessage.className = 'form-message';
+    }
+    
+    /**
+     * 模拟登录
+     */
+    function mockLogin(username, password) {
+        // 显示加载状态
+        formMessage.textContent = '登录中...';
+        formMessage.className = 'form-message';
+        
+        // 模拟网络延迟
+        setTimeout(function() {
+            // 检查用户是否存在
+            const user = mockUsers.find(user => 
+                user.username === username && user.password === password
+            );
+            
+            if (user) {
+                // 登录成功
+                formMessage.textContent = '登录成功，即将跳转...';
+                formMessage.className = 'form-message success';
+                
+                // 保存登录状态到本地存储
+                localStorage.setItem('isLoggedIn', 'true');
+                localStorage.setItem('username', username);
+                
+                // 重定向到首页
+                setTimeout(function() {
+                    window.location.href = 'index.html';
+                }, 1000);
+            } else {
+                // 登录失败
+                formMessage.textContent = '用户名或密码错误';
+                formMessage.className = 'form-message error';
+            }
+        }, 1000);
+    }
+});