用js写一个登录,注册页面
时间: 2024-05-12 13:15:27 浏览: 10
好的,以下是一个简单的登录和注册页面的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login and Register</title>
</head>
<body>
<h1>Login</h1>
<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>
<input type="button" value="Login" onclick="login()"><br><br>
</form>
<h1>Register</h1>
<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>
<label for="confirm-password">Confirm Password:</label>
<input type="password" id="confirm-password" name="confirm-password"><br><br>
<input type="button" value="Register" onclick="register()"><br><br>
</form>
<script>
function login() {
// Get the input values
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// Check if the inputs are valid
if (username == "" || password == "") {
alert("Please fill in all fields.");
return;
}
// Send the login request to the server
// ...
}
function register() {
// Get the input values
var newUsername = document.getElementById("new-username").value;
var newPassword = document.getElementById("new-password").value;
var confirmPassword = document.getElementById("confirm-password").value;
// Check if the inputs are valid
if (newUsername == "" || newPassword == "" || confirmPassword == "") {
alert("Please fill in all fields.");
return;
}
if (newPassword != confirmPassword) {
alert("Passwords do not match.");
return;
}
// Send the registration request to the server
// ...
}
</script>
</body>
</html>
```
这里使用了原生的 JavaScript 来获取表单输入的值,并且在提交登录和注册请求之前对用户输入进行了一些简单的验证。在实际项目中,需要将登录和注册请求发送到后端服务器进行处理和验证。