帮我写一个登录验证的有提示框的代码
时间: 2023-03-19 20:22:51 浏览: 76
好的,以下是一个简单的登录验证代码示例,包括提示框功能:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<style>
form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
input[type="text"], input[type="password"] {
margin-bottom: 10px;
padding: 5px;
width: 200px;
border-radius: 5px;
border: 1px solid gray;
}
input[type="submit"] {
padding: 5px;
width: 100px;
border-radius: 5px;
border: none;
background-color: #3498db;
color: white;
cursor: pointer;
}
.error {
color: red;
margin-top: 10px;
font-weight: bold;
}
.success {
color: green;
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<form method="post" action="#" onsubmit="return validateForm()">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="submit" value="Login">
</form>
<div id="message"></div>
<script>
function validateForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "" || password == "") {
document.getElementById("message").innerHTML = "<p class='error'>Please enter both username and password.</p>";
return false;
} else if (username != "admin" || password != "password") {
document.getElementById("message").innerHTML = "<p class='error'>Incorrect username or password.</p>";
return false;
} else {
document.getElementById("message").innerHTML = "<p class='success'>Login successful!</p>";
return true;
}
}
</script>
</body>
</html>
```
这个示例中,我们创建了一个表单,包含用户名和密码输入框以及登录按钮。在提交表单时,`validateForm()`函数将被调用进行验证。如果用户名或密码为空,则显示一个红色错误消息,如果用户名或密码不正确,则显示另一个红色错误消息,如果用户名和密码都正确,则显示一个绿色成功消息。
这些消息都将显示在页面上方的`<div>`元素中,该元素具有`message`ID。在HTML中,我们使用了一些基本的CSS样式来使表单看起来更好,并为错误和成功消息添加了不同的类。
注意,这个示例中的验证是非常简单的,仅用于演示目的。在实际应用中,您可能需要更复杂的验证逻辑。