html登录注册页面代码js
时间: 2023-08-31 20:06:24 浏览: 42
下面是一个简单的HTML登录注册页面代码,包括了一些JavaScript的逻辑实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>登录/注册</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// 点击登录按钮的处理逻辑
$("#login-btn").click(function() {
// 获取用户输入的用户名和密码
var username = $("#username").val();
var password = $("#password").val();
// TODO: 进行登录验证
// 登录成功后跳转到主页
window.location.href = "index.html";
});
// 点击注册按钮的处理逻辑
$("#register-btn").click(function() {
// 获取用户输入的用户名、密码和确认密码
var username = $("#username").val();
var password = $("#password").val();
var confirmPassword = $("#confirm-password").val();
// TODO: 进行注册验证
// 注册成功后跳转到登录页面
window.location.href = "login.html";
});
});
</script>
</head>
<body>
<h1>登录</h1>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<button type="button" id="login-btn">登录</button>
</form>
<h1>注册</h1>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<label for="confirm-password">确认密码:</label>
<input type="password" id="confirm-password" name="confirm-password"><br>
<button type="button" id="register-btn">注册</button>
</form>
</body>
</html>
```
在这个代码中,点击登录按钮和注册按钮时,分别会触发对应的处理逻辑。其中,登录逻辑中需要进行登录验证,注册逻辑中需要进行注册验证。在验证通过后,登录逻辑会跳转到主页,注册逻辑会跳转到登录页面。需要注意的是,这里的跳转页面也需要根据实际情况进行修改。