js登录注册界面源代码
时间: 2023-05-15 10:03:17 浏览: 764
在编写前端登录注册界面时,需要使用HTML、CSS和JavaScript来实现。以下是一个简单的登录注册界面的源代码示例,其中使用了jQuery来简化编码:
HTML部分:
```
<!DOCTYPE html>
<html>
<head>
<title>Login/Register Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="form-container">
<div class="form-btn">
<button class="login-btn active-btn">Login</button>
<button class="register-btn">Register</button>
</div>
<form id="login-form">
<input type="text" placeholder="Username" required>
<input type="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
<form id="register-form">
<input type="text" placeholder="Username" required>
<input type="email" placeholder="Email" required>
<input type="password" placeholder="Password" required>
<button type="submit">Register</button>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="app.js"></script>
</body>
</html>
```
CSS部分:
```
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #f0f0f0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.form-container {
padding: 25px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.form-btn {
display: flex;
margin-bottom: 25px;
}
.form-btn button {
flex: 1;
padding: 10px;
font-size: 18px;
border-radius: 8px 8px 0 0;
border: none;
background: none;
cursor: pointer;
}
.active-btn {
background: #f0f0f0;
}
form {
display: none;
}
form input {
display: block;
margin-bottom: 15px;
padding: 10px;
font-size: 18px;
border-radius: 8px;
border: none;
}
form button {
padding: 10px;
font-size: 18px;
border-radius: 8px;
border: none;
background: #3498db;
color: white;
cursor: pointer;
}
```
JavaScript部分:
```
$(document).ready(function() {
$('.form-btn button').click(function() {
var $this = $(this);
$('.form-btn button').removeClass('active-btn');
$this.addClass('active-btn');
var formId = $this.attr('class').split(' ')[0] + '-form';
$('form').hide();
$('#' + formId).show();
});
$('#login-form').submit(function(e) {
e.preventDefault();
var username = $('#login-form input[type="text"]').val();
var password = $('#login-form input[type="password"]').val();
//检查用户名和密码是否匹配
//如果匹配,跳转到主页
//如果不匹配,显示错误消息
});
$('#register-form').submit(function(e) {
e.preventDefault();
var username = $('#register-form input[type="text"]').val();
var email = $('#register-form input[type="email"]').val();
var password = $('#register-form input[type="password"]').val();
//检查用户名和密码是否符合要求
//如果符合,将注册信息存储在数据库
//如果不符合,显示错误消息
});
});
```
以上代码可用于基本的登录注册界面,可以根据要求进行修改和扩展。由于安全性问题,实际应用中需要进行更严格的验证和防护措施。