用js写一个登录注册页面
时间: 2024-04-28 20:20:15 浏览: 5
好的,以下是一个简单的登录注册页面示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login/Register Page</title>
</head>
<body>
<h1>Login/Register Page</h1>
<div id="login-form">
<h2>Login</h2>
<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 onclick="login()">Login</button>
</div>
<div id="register-form">
<h2>Register</h2>
<label for="new-username">Username:</label>
<input type="text" id="new-username" name="new-username"><br><br>
<label for="new-password">Password:</label>
<input type="password" id="new-password" name="new-password"><br><br>
<label for="confirm-password">Confirm Password:</label>
<input type="password" id="confirm-password" name="confirm-password"><br><br>
<button onclick="register()">Register</button>
</div>
<script>
function login() {
// Get the username and password from the input fields
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// Make an AJAX request to the server to check if the username and password are valid
// Replace the URL with the URL of your server's login endpoint
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://example.com/login", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// If the login was successful, redirect the user to the home page
window.location.href = "https://example.com/home";
} else if (xhr.readyState === XMLHttpRequest.DONE) {
// If the login failed, display an error message
alert("Invalid username or password");
}
};
xhr.send(JSON.stringify({username: username, password: password}));
}
function register() {
// Get the new username, password, and confirm password from the input fields
var newUsername = document.getElementById("new-username").value;
var newPassword = document.getElementById("new-password").value;
var confirmPassword = document.getElementById("confirm-password").value;
// Check if the passwords match
if (newPassword !== confirmPassword) {
alert("Passwords do not match");
return;
}
// Make an AJAX request to the server to create a new user account
// Replace the URL with the URL of your server's register endpoint
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://example.com/register", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// If the registration was successful, display a success message and clear the input fields
alert("Registration successful");
document.getElementById("new-username").value = "";
document.getElementById("new-password").value = "";
document.getElementById("confirm-password").value = "";
} else if (xhr.readyState === XMLHttpRequest.DONE) {
// If the registration failed, display an error message
alert("Registration failed");
}
};
xhr.send(JSON.stringify({username: newUsername, password: newPassword}));
}
</script>
</body>
</html>
```
这个示例中用了 AJAX 技术来和后端服务器进行交互,所以需要在前端 JavaScript 代码中发送 HTTP 请求。当用户点击 Login 按钮时,前端会发送一个 POST 请求到服务器,包含了用户名和密码信息,服务器会验证用户名和密码是否正确。如果验证成功,则前端会跳转到 home 页面;如果验证失败,则前端会提示用户用户名或密码错误。当用户点击 Register 按钮时,前端会发送一个 POST 请求到服务器,包含了新用户名和密码信息,服务器会创建一个新用户账号。如果创建成功,则前端会提示用户注册成功;如果创建失败,则前端会提示用户注册失败。