帮我写一个前端登录界面,包括css和js
时间: 2024-03-20 07:39:01 浏览: 24
好的,以下是一个带有 CSS 样式和 JavaScript 交互的前端登录界面示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<style>
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
form {
background-color: #ffffff;
border-radius: 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin: 50px auto;
padding: 20px;
width: 300px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input[type="text"],
input[type="password"] {
border: 1px solid #cccccc;
border-radius: 3px;
font-size: 14px;
margin-bottom: 10px;
padding: 10px;
width: 100%;
}
button {
background-color: #4CAF50;
border: none;
border-radius: 3px;
color: #ffffff;
cursor: pointer;
font-size: 14px;
padding: 10px;
width: 100%;
}
button:hover {
background-color: #3e8e41;
}
.error-message {
color: #ff0000;
font-size: 12px;
margin-top: 5px;
}
</style>
</head>
<body>
<form>
<label for="username">用户名</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">
<label for="password">密码</label>
<input type="password" id="password" name="password" placeholder="请输入密码">
<button type="submit" id="login-button">登录</button>
<p class="error-message" id="error-message"></p>
</form>
<script>
// 获取表单元素和错误提示元素
const form = document.querySelector('form');
const usernameInput = document.querySelector('#username');
const passwordInput = document.querySelector('#password');
const loginButton = document.querySelector('#login-button');
const errorMessage = document.querySelector('#error-message');
// 提交表单时进行验证
form.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止默认提交行为
// 获取用户名和密码
const username = usernameInput.value.trim();
const password = passwordInput.value.trim();
// 验证用户名和密码是否为空
if (!username || !password) {
errorMessage.textContent = '用户名和密码不能为空';
return;
}
// 发送登录请求,这里只是一个示例,实际使用时应该根据情况进行修改
sendLoginRequest(username, password);
});
// 发送登录请求的函数
function sendLoginRequest(username, password) {
// 这里只是一个示例,实际使用时应该根据情况进行修改
// 使用 fetch API 发送 POST 请求
fetch('/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: username,
password: password
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
// 登录成功,跳转到首页
window.location.href = '/';
} else {
// 登录失败,显示错误信息
errorMessage.textContent = data.message;
}
});
}
</script>
</body>
</html>
```
这个登录界面和之前的示例类似,但是增加了一些 JavaScript 代码来进行表单验证和发送登录请求。这里使用了 fetch API 发送 POST 请求,你可以根据自己的需求选择适合的方式。在这个示例中,如果登录成功,则会跳转到首页;如果登录失败,则会显示错误信息。
注意,这个示例只是一个简单的演示,实际使用时还需要进行更严格的表单验证和安全性保护。