用HTML和JS写一个简单的登录页面要有账号密码验证与重置
时间: 2024-03-17 09:42:53 浏览: 45
好的,我可以为您编写一个简单的登录页面,包括账号密码验证和重置功能。以下是代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h2>Login</h2>
<form>
<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="button" value="Reset" onclick="resetForm()">
<input type="submit" value="Login" onclick="validateForm()">
</form>
<script>
function validateForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "" || password == "") {
alert("Please enter both username and password.");
return false;
}
}
function resetForm() {
document.getElementById("username").value = "";
document.getElementById("password").value = "";
}
</script>
</body>
</html>
```
在上面的示例中,我们使用了一个 HTML 表单,包含了两个输入框(一个用于输入用户名,另一个用于输入密码),以及两个按钮(一个用于重置输入框,另一个用于提交表单进行登录验证)。
在 JavaScript 部分,我们定义了两个函数:`validateForm()` 和 `resetForm()`。`validateForm()` 函数用于在提交表单时验证输入的用户名和密码是否为空,如果为空则弹出提示框。`resetForm()` 函数用于重置输入框中的内容。
这只是一个简单的示例,实际的登录页面可能需要更多的功能和安全性措施。