写一个基于layui的前端登录页面
时间: 2024-03-15 08:43:49 浏览: 19
好的,下面是一个基于layui的前端登录页面示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基于layui的前端登录页面</title>
<!-- 引入layui的css文件 -->
<link rel="stylesheet" href="//cdn.layui.com/layui-v2.5.6/css/layui.css">
<style>
.layui-container {
margin-top: 100px;
text-align: center;
}
.layui-card {
width: 400px;
margin: 0 auto;
}
.layui-card-header {
font-size: 20px;
font-weight: bold;
text-align: center;
}
.layui-form-item {
margin-top: 30px;
}
.layui-input {
height: 40px;
line-height: 40px;
padding: 0 15px;
}
.layui-btn {
margin-top: 30px;
width: 100%;
height: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<!-- 定义一个容器 -->
<div class="layui-container">
<!-- 定义一个面板 -->
<div class="layui-card">
<div class="layui-card-header">用户登录</div>
<div class="layui-card-body">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<button class="layui-btn" lay-submit lay-filter="login">登录</button>
</div>
</form>
</div>
</div>
</div>
<!-- 引入layui的js文件 -->
<script src="//cdn.layui.com/layui-v2.5.6/layui.js"></script>
<script>
// 初始化layui
layui.use(['form', 'layer'], function(){
var form = layui.form;
var layer = layui.layer;
// 监听表单提交
form.on('submit(login)', function(data){
// 模拟登录请求
if (data.field.username == 'admin' && data.field.password == '123456') {
layer.msg('登录成功', {icon: 1}, function(){
location.href = 'index.html';
});
} else {
layer.msg('用户名或密码错误', {icon: 2});
}
return false;
});
});
</script>
</body>
</html>
```
这个页面使用了layui的容器、面板、表单和按钮组件,还使用了layui的layer模块进行消息提示。同时引入了layui的css和js文件,并使用了layui的form模块进行表单处理和验证。
您可以将上面的代码复制到一个html文件中并打开,查看效果。当然,为了使登录功能正常工作,您需要将模拟登录请求的代码替换为您的实际登录请求代码。