使用Javascript写登录注册html网页
时间: 2024-02-24 13:56:11 浏览: 23
以下是一个使用 JavaScript 编写的登录注册网页示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login and Registration Page</title>
<script>
// 显示登录表单
function showLoginForm() {
document.getElementById("loginForm").style.display = "block";
document.getElementById("registerForm").style.display = "none";
}
// 显示注册表单
function showRegisterForm() {
document.getElementById("registerForm").style.display = "block";
document.getElementById("loginForm").style.display = "none";
}
// 验证登录表单
function validateLoginForm() {
var username = document.forms["loginForm"]["username"].value;
var password = document.forms["loginForm"]["password"].value;
if (username == "") {
alert("Please enter your username.");
return false;
}
if (password == "") {
alert("Please enter your password.");
return false;
}
return true;
}
// 验证注册表单
function validateRegisterForm() {
var username = document.forms["registerForm"]["username"].value;
var password = document.forms["registerForm"]["password"].value;
var confirmPassword = document.forms["registerForm"]["confirmPassword"].value;
if (username == "") {
alert("Please enter a username.");
return false;
}
if (password == "") {
alert("Please enter a password.");
return false;
}
if (confirmPassword == "") {
alert("Please confirm your password.");
return false;
}
if (password != confirmPassword) {
alert("Passwords do not match.");
return false;
}
return true;
}
</script>
</head>
<body>
<h1>Login and Registration Page</h1>
<div>
<button onclick="showLoginForm()">Login</button>
<button onclick="showRegisterForm()">Register</button>
</div>
<!-- 登录表单 -->
<form id="loginForm" action="" onsubmit="return validateLoginForm()" style="display: none;">
<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="submit" value="Login">
</form>
<!-- 注册表单 -->
<form id="registerForm" action="" onsubmit="return validateRegisterForm()" style="display: none;">
<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>
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" name="confirmPassword"><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
```
在这个示例中,我们使用 JavaScript 为登录和注册表单添加了以下功能:
- 使用 `showLoginForm()` 和 `showRegisterForm()` 函数在登录和注册表单之间进行切换。
- 使用 `validateLoginForm()` 和 `validateRegisterForm()` 函数验证表单输入。这些函数将检查必填字段是否已填写,并验证两次输入的密码是否匹配。如果表单验证失败,将显示一个警告框并阻止表单提交。
请注意,此示例代码仅用于演示如何使用 JavaScript 编写登录注册网页,而不是一个完整的、安全的实现。在实践中,您应该使用更强大、更安全的验证和加密方法来保护用户数据和身份。