用js做一个登录注册的网页
时间: 2023-12-13 19:06:11 浏览: 26
好的,以下是一个简单的登录注册网页的示例代码:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Login/Register Page</title>
<script src="login.js"></script>
</head>
<body>
<h1>Login/Register Page</h1>
<div id="login-form">
<h2>Login</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<button type="submit" onclick="login()">Login</button>
</form>
</div>
<div id="register-form">
<h2>Register</h2>
<form>
<label for="new-username">New Username:</label>
<input type="text" id="new-username" name="new-username"><br><br>
<label for="new-password">New Password:</label>
<input type="password" id="new-password" name="new-password"><br><br>
<button type="submit" onclick="register()">Register</button>
</form>
</div>
<div id="message"></div>
</body>
</html>
```
JS代码:
```
// 登录函数
function login() {
// 获取输入的用户名和密码
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// TODO: 发送登录请求到服务器进行验证
// 简单的验证示例
if (username == "admin" && password == "admin") {
document.getElementById("message").innerHTML = "Login successful!";
} else {
document.getElementById("message").innerHTML = "Incorrect username or password.";
}
}
// 注册函数
function register() {
// 获取输入的新用户名和新密码
var newUsername = document.getElementById("new-username").value;
var newPassword = document.getElementById("new-password").value;
// TODO: 发送注册请求到服务器进行处理
// 简单的处理示例
document.getElementById("message").innerHTML = "Registration successful!";
}
```
这个示例代码中,我们使用了两个表单分别用于登录和注册,每个表单中都有一个提交按钮。当用户点击登录按钮时,会调用 `login()` 函数;当用户点击注册按钮时,会调用 `register()` 函数。在这两个函数中,我们可以获取用户的输入,并进行相应的处理。这里我们只是进行了简单的验证和处理,实际中还需要将用户名和密码发送到服务器进行验证和处理。同时,我们还在页面中添加了一个 `<div>` 元素,用于显示处理结果。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)