js实现简单的登陆功能
实现登录功能的基本步骤
HTML部分需要创建表单，包含用户名和密码输入框以及提交按钮。
<!DOCTYPE html>
<html>
<head>
<title>登录页面</title>
</head>
<body>
<form id="loginForm">
<div>
<label for="username">用户名:</label>
<input type="text" id="username" required>
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" required>
</div>
<button type="submit">登录</button>
</form>
<div id="message"></div>
<script src="login.js"></script>
</body>
</html>JavaScript验证逻辑
创建login.js文件处理表单提交事件，验证输入并模拟登录过程。
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const messageElement = document.getElementById('message');
if (!username || !password) {
messageElement.textContent = '用户名和密码不能为空';
messageElement.style.color = 'red';
return;
}
// 模拟验证逻辑
if (username === 'admin' && password === '123456') {
messageElement.textContent = '登录成功！';
messageElement.style.color = 'green';
// 实际项目中这里会跳转页面或设置登录状态
} else {
messageElement.textContent = '用户名或密码错误';
messageElement.style.color = 'red';
}
});添加本地存储功能
可以使用localStorage保存登录状态，实现页面刷新后保持登录。
// 登录成功后保存状态
localStorage.setItem('isLoggedIn', 'true');
localStorage.setItem('username', username);
// 页面加载时检查登录状态
window.addEventListener('load', function() {
if (localStorage.getItem('isLoggedIn') === 'true') {
document.getElementById('loginForm').style.display = 'none';
document.getElementById('message').textContent =
`欢迎回来, ${localStorage.getItem('username')}!`;
}
});添加密码显示切换功能
增强用户体验，添加密码可见性切换按钮。
<div>
<label for="password">密码:</label>
<input type="password" id="password" required>
<button type="button" id="togglePassword">显示</button>
</div>document.getElementById('togglePassword').addEventListener('click', function() {
const passwordField = document.getElementById('password');
const toggleButton = document.getElementById('togglePassword');
if (passwordField.type === 'password') {
passwordField.type = 'text';
toggleButton.textContent = '隐藏';
} else {
passwordField.type = 'password';
toggleButton.textContent = '显示';
}
});表单输入验证增强
添加更详细的输入验证，如长度限制和字符限制。
function validateInput(username, password) {
const errors = [];
if (username.length < 4) {
errors.push('用户名至少需要4个字符');
}
if (password.length < 6) {
errors.push('密码至少需要6个字符');
}
if (!/^[a-zA-Z0-9_]+$/.test(username)) {
errors.push('用户名只能包含字母、数字和下划线');
}
return errors;
}
// 在提交处理函数中使用
const validationErrors = validateInput(username, password);
if (validationErrors.length > 0) {
messageElement.textContent = validationErrors.join('\n');
messageElement.style.color = 'red';
return;
}
