- 两个页面：登录页（#loginPage）和注册页（#registerPag）
- 登录页有一个表单（#loginForm），用于收集用户的用户名（#loginUsername）和密码（#loginPassword），有一个“登录”按钮，点击后会触发名为login()的函数。此外，还有一个“注册新用户”按钮，指向注册页。
- 注册页同样是一个表单（#registerForm），包含了用户名、密码输入字段以及推荐人信息。点击“注册”按钮会执行register()函数。这个页面默认是隐藏的（style=“display: none;”），只有当点击“返回登录”按钮时，才会显示登录页面。
代码如下：
<body>
<div id="loginPage">
<h1>登录页面</h1>
<form id="loginForm">
<label for="loginUsername">用户名:</label>
<input type="text" id="loginUsername" name="loginUsername" required>
<br>
<label for="loginPassword">密码:</label>
<input type="password" id="loginPassword" name="loginPassword" required>
<br>
<button type="button" οnclick="login()">登录</button>
</form>
<button οnclick="showRegister()">注册新用户</button>
<br>
<li>嘿嘿嘿，注册才能看得到喔</li>
</form>
</div>
<div id="registerPage" style="display: none;">
<h1>注册页面</h1>
<form id="registerForm" class="register-form">
<label for="registerUsername">用户名:</label>
<input type="text" id="registerUsername" name="registerUsername" required>
<br>
<label for="registerPassword">密码:</label>
<input type="password" id="registerPassword" name="registerPassword" required>
<br>
<label for="registerReferrer">推荐人:</label>
<input type="text" id="registerReferrer" name="registerReferrer">
<br>
<button type="button" οnclick="register()">注册</button>
</form>
<button οnclick="showLogin()">返回登录</button>
<br>
<li>由于作者太笨只会前端不会后端数据技术，没能用手机注册，望指点</li>
<br>
<li>注册一次更新一次喔</li>
</form>
</div>
-
运行结果：
-
代码如下：
<script>
// 用户模拟数据库
const users = {};
function showRegister() {
document.getElementById('loginPage').style.display = 'none';
document.getElementById('registerPage').style.display = 'block';
}
function showLogin() {
document.getElementById('registerPage').style.display = 'none';
document.getElementById('loginPage').style.display = 'block';
}
function register() {
const username = document.getElementById('registerUsername').value;
const password = document.getElementById('registerPassword').value;
const referrer = document.getElementById('registerReferrer').value;
// 简单的注册逻辑，实际应用中应该有更复杂的验证和服务器端存储
if (users[username]) {
alert('用户名已存在！');
} else if (username.length < 5 || password.length < 8) {
alert('用户名必须不低于5个字符，密码必须不低于8个字符！');
} else {
users[username] = { password, referrer };
alert('注册成功！');
showLogin(); // 注册成功后显示登录页面
}
}
function login() {
const username = document.getElementById('loginUsername').value;
const password = document.getElementById('loginPassword').value;
const user = users[username];
if (user && user.password === password) {
// 登录成功后，将用户信息存储在localStorage中
localStorage.setItem('user', JSON.stringify(user));
document.getElementById('loginPage').style.display = 'none';
document.getElementById('mallPage').style.display = 'block';
} else {
alert('用户名或密码错误！');
}
}
// 检查localStorage中是否有用户信息，如果有，自动填充登录表单
window.onload = function() {
const storedUser = localStorage.getItem('user');
if (storedUser) {
const user = JSON.parse(storedUser);
document.getElementById('loginUsername').value = user.username;
document.getElementById('loginPassword').value = user.password;
}
};
</script>
- 显示注册和登录页面 - showRegister 和 showLogin 函数用于控制注册和登录页面的显示。
- 注册逻辑 - register 函数获取用户输入的用户名、密码和推荐人信息，进行简单验证后，将用户信息存储在模拟的users数据库对象中。
- 登录逻辑 - login 函数验证用户输入的用户名和密码，如果匹配，则将用户信息存储在localStorage中，并显示商城页面。
- 自动填充登录表单 - window.onload 事件在页面加载时触发，用于检查localStorage中是否有用户信息，如果有，则自动填充登录表单。
-
这里有一些改进建议：
- 安全性 - 密码应该进行加密存储，而不是以明文形式。
- 错误处理 - 当前注册和登录错误仅通过alert显示，可以考虑使用更友好的用户界面来显示错误信息。
- 服务器端验证 - 真实环境下的用户信息应该通过服务器端进行验证和存储，而不是仅在前端处理。
- 表单验证 - 可以添加更多的表单验证，比如邮箱格式、密码强度等。
- 用户体验 - 页面切换时可
- 以添加过渡效果，使交互更加平滑
扫一扫
1186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
