:用户登陆界面,负责提供用户名与密码输入框,输入用户名与密码后进行提交,验证成功后进入超市购物首页,否则提示相应的错误。
时间: 2024-03-16 21:42:54 浏览: 27
以下是一个简单的用户登录界面的 HTML 和 JavaScript 代码,用于输入用户名和密码,提交表单并进行验证:
```html
<!DOCTYPE html>
<html>
<head>
<title>用户登录</title>
</head>
<body>
<h1>用户登录</h1>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="登录" onclick="validateLogin()">
</form>
<p id="error-message"></p>
<script>
function validateLogin() {
// 获取用户名和密码输入框的值
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 进行验证,这里使用了一个假的用户名和密码进行验证
if (username === "admin" && password === "123456") {
// 验证成功,跳转到超市购物首页
window.location.href = "market.html";
} else {
// 验证失败,显示错误消息
var errorMessage = document.getElementById("error-message");
errorMessage.innerHTML = "用户名或密码错误,请重新输入";
}
}
</script>
</body>
</html>
```
在这个代码中,我们使用 HTML 的表单元素来提供用户名和密码输入框,并添加了一个提交按钮。当用户点击提交按钮时,我们会调用 `validateLogin()` 函数进行验证。
在 `validateLogin()` 函数中,我们首先获取用户名和密码输入框的值,然后进行验证。这里我们使用了一个假的用户名和密码进行验证,如果输入的用户名和密码与假的用户名和密码匹配,则跳转到超市购物首页,否则显示一个错误消息。
在 HTML 中,我们还添加了一个 `<p>` 元素,用于显示错误消息。当验证失败时,我们会动态修改这个元素的内容,以显示错误消息。