写一个两个用户角色的注册登录页面
时间: 2024-05-10 08:15:14 浏览: 5
以下是一个简单的两个用户角色的注册登录页面的示例:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>注册/登录页面</title>
</head>
<body>
<h1>欢迎来到我们的网站!</h1>
<h3>请选择您的身份</h3>
<form>
<input type="radio" name="role" value="user" checked> 用户<br>
<input type="radio" name="role" value="admin"> 管理员<br>
<br>
<input type="button" value="注册" onclick="register()">
<input type="button" value="登录" onclick="login()">
</form>
<div id="registerForm" style="display: none">
<h3>注册</h3>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<input type="button" value="提交" onclick="submitRegistration()">
</div>
<div id="loginForm" style="display: none">
<h3>登录</h3>
<label for="username">用户名:</label>
<input type="text" id="loginUsername" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="loginPassword" name="password"><br>
<input type="button" value="提交" onclick="submitLogin()">
</div>
<script src="script.js"></script>
</body>
</html>
```
JavaScript:
```javascript
let role;
let username;
function register() {
document.getElementById("registerForm").style.display = "block";
document.getElementById("loginForm").style.display = "none";
}
function login() {
document.getElementById("loginForm").style.display = "block";
document.getElementById("registerForm").style.display = "none";
}
function submitRegistration() {
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
if (role === "user") {
// 用户注册逻辑
} else if (role === "admin") {
// 管理员注册逻辑
}
}
function submitLogin() {
const loginUsername = document.getElementById("loginUsername").value;
const loginPassword = document.getElementById("loginPassword").value;
if (role === "user") {
// 用户登录逻辑
} else if (role === "admin") {
// 管理员登录逻辑
}
}
document.getElementsByName("role").forEach(function (radio) {
radio.addEventListener("click", function () {
role = this.value;
username = null;
});
});
```
以上代码展示了一个简单的流程。用户首先选择他们的身份(用户或管理员),然后单击“注册”或“登录”按钮。单击这些按钮会显示相应的表单。用户填写表单并单击提交按钮,将分别调用 submitRegistration() 或 submitLogin() 函数。这两个函数包含了具体的注册/登录逻辑,可以根据实际需求进行修改。