登录验证，复杂验证

最新推荐文章于 2023-02-14 15:26:13 发布

潮阿景

最新推荐文章于 2023-02-14 15:26:13 发布

阅读量326

点赞数

分类专栏： html 文章标签： css html javascript

本文链接：https://blog.csdn.net/m0_74958046/article/details/127852348

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这是一个使用HTML5、CSS和JavaScript实现的后台管理系统登陆页面模板。页面包含用户名和密码输入框，记住密码选项，以及登录按钮。页面设计简洁，具有背景图片和阴影效果，同时有登录验证的AJAX调用。

摘要由CSDN通过智能技术生成

效果如图：

<!DOCTYPE html>
<html lang="en">
<head>
<script>
if(window!==top)
top.location.replace(location.href);
</script>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/static/assets/libs/layui/css/layui.css"/>
{# <link rel="stylesheet" href="{{ url_for('static',filename='plugin/layui/css/layui.css')}}"/>#}
{# <link rel="stylesheet" href="{{ url_for('static',filename='css/admin.css') }}?v=318"/>#}
<title>系统登陆</title>
<style>
body {
background-image: url("{{ url_for('static',filename='images/bg-login.jpg') }}");
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
}

body:before {
content: "";
background-color: rgba(0, 0, 0, .2);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

.login-wrapper {
max-width: 420px;
padding: 20px;
margin: 0 auto;
position: relative;
box-sizing: border-box;
z-index: 2;
}

.login-wrapper > .layui-form {
padding: 25px 30px;
background-color: #fff;
box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.19);
box-sizing: border-box;
border-radius: 4px;
}

.login-wrapper > .layui-form > h2 {
color: #333;
font-size: 18px;
text-align: center;
margin-bottom: 25px;
}

.login-wrapper > .layui-form > .layui-form-item {
margin-bottom: 25px;
position: relative;
}

.login-wrapper > .layui-form > .layui-form-item:last-child {
margin-bottom: 0;
}

.login-wrapper > .layui-form > .layui-form-item > .layui-input {
height: 46px;
line-height: 46px;
border-radius: 2px !important;
}

.login-wrapper .layui-input-icon-group > .layui-input {
padding-left: 46px;
}

.login-wrapper .layui-input-icon-group > .layui-icon {
width: 46px;
height: 46px;
line-height: 46px;
font-size: 20px;
color: #909399;
position: absolute;
left: 0;
top: 0;
text-align: center;
}

.login-wrapper > .layui-form > .layui-form-item.login-captcha-group {
padding-right: 135px;
}

.login-wrapper > .layui-form > .layui-form-item.login-captcha-group > .login-captcha {
height: 46px;
width: 120px;
cursor: pointer;
box-sizing: border-box;
border: 1px solid #e6e6e6;
border-radius: 2px !important;
position: absolute;
right: 0;
top: 0;
}

.login-wrapper > .layui-form > .layui-form-item > .layui-form-checkbox {
margin: 0 !important;
padding-left: 25px;
}

.login-wrapper > .layui-form > .layui-form-item > .layui-form-checkbox > .layui-icon {
width: 15px !important;
height: 15px !important;
}

.login-wrapper > .layui-form .layui-btn-fluid {
height: 48px;
line-height: 48px;
font-size: 16px;
border-radius: 2px !important;
}

.login-wrapper > .layui-form > .layui-form-item.login-oauth-group > a > .layui-icon {
font-size: 26px;
}

.login-copyright {
color: #eee;
padding-bottom: 20px;
text-align: center;
position: relative;
z-index: 1;
}

@media screen and (min-height: 550px) {
.login-wrapper {
margin: -250px auto 0;
position: absolute;
top: 50%;
left: 0;
right: 0;
width: 100%;
}

.login-copyright {
position: absolute;
bottom: 0;
right: 0;
left: 0;
}
}

.layui-btn {
background-color: #5FB878;
border-color: #5FB878;
}

.layui-link {
color: #5FB878 !important;
}
</style>
</head>
<body>
<div class="login-wrapper layui-anim layui-anim-scale layui-hide">
<form class="layui-form">
<h2>后台管理登陆</h2>
<div class="layui-form-item layui-input-icon-group">
<i class="layui-icon layui-icon-username"></i>
<input class="layui-input" id="username" name="username" value="admin" placeholder="请输入登录账号" autocomplete="off"
lay-verType="tips" lay-verify="required" required/>
</div>
<div class="layui-form-item layui-input-icon-group">
<i class="layui-icon layui-icon-password"></i>
<input class="layui-input" id="pwd" name="pwd" value="123456" placeholder="请输入登录密码" type="password"
lay-verType="tips" lay-verify="required" required/>
</div>

</form>
</div>
<div class="login-copyright">copyright © 2020 航天科工系统仿真（北京）有限公司 all rights reserved.</div>
<script src="/static/assets/libs/layui/layui.js"></script>
{#<script src="{{ url_for('static',filename='plugin/layui/layui.js') }}"></script>#}
{#<script src="{{ url_for('static',filename='js/common.js') }}?v=318"></script>#}
<script>
layui.use(['layer','form'],function () {
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form
$('.login-wrapper').removeClass('layui-hide');

//登陆事件
form.on('submit(loginSubmit)',function(data){
console.log('login click');
// 设置按钮文字禁止点击
$(data.elem).attr('disabled',true).text('登陆中....');
// 网络请求
var loadIndex = layer.load(2);
console.log(JSON.stringify(data.field));
$.ajax({
type:'post',
url:'/dologin',
data:JSON.stringify(data.field),
contentType:"application/json",
dataType:'json',
success:function(res){
console.log(res);
//关闭层
layer.close(loadIndex);
// 判断返回数据
if(res.code==0){
// 登录成功
$(data.elem).attr('disabled',true).text('登录成功');
// 使用layer的消息提示功能
layer.msg('登陆成功',{
icon:1,
time:1500
});
// 跳转到index页面
setTimeout(function(){
window.location.href = '/index';
},2000)
}
else{
layer.msg(res.msg,{
icon:2,
anim:6
});
// 把按钮设置成初始可用的状态
setTimeout(function(){
$(data.elem).text("登录").removeAttr("disabled");
},1000);
}
},