jquery 登录html代码
时间: 2023-12-18 12:01:21 浏览: 24
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#login-form").submit(function(event){
event.preventDefault();
var username = $("#username").val();
var password = $("#password").val();
// 在这里可以加入登录逻辑,比如发送Ajax请求到服务器进行验证
if(username === "admin" && password === "123456"){
alert("登录成功!");
} else {
alert("用户名或密码错误,请重试");
}
});
});
</script>
</head>
<body>
<form id="login-form">
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="登录">
</form>
</body>
</html>
```
这是一个简单的使用jQuery实现的登录页面,当用户在表单中输入用户名和密码后,点击登录按钮时,jQuery会拦截表单的提交事件,并获取输入的用户名和密码。然后可以加入登录逻辑,比如发送Ajax请求到服务器进行验证。在这个例子中,如果用户名是"admin",密码是"123456",则会弹出"登录成功"的提示框;否则会弹出"用户名或密码错误,请重试"的提示框。这段代码演示了使用jQuery来实现简单的表单提交拦截和处理逻辑。