121 lines
3.6 KiB
JavaScript
121 lines
3.6 KiB
JavaScript
/**
|
||
* 登录功能实现
|
||
* 原生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);
|
||
}
|
||
}); |