layui登陆验证模板(滑块学习)
sliderVerify的示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>滑动验证 - layui滑动验证</title>
<meta name="renderer" content="webkit">
<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="layui/css/layui.css" />
<style>
.pro_name a{color: #4183c4;}
.osc_git_title{background-color: #fff;}
.osc_git_box{background-color: #fff;}
.osc_git_box{border-color: #E3E9ED;}
.osc_git_info{color: #666;}
.osc_git_main a{color: #9B9B9B;}
</style>
</head>
<body>
<div class="layui-container">
<div class="layui-row" style="margin-top: 50px;">
<div class="layui-col-md6">
<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="title" 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">
<div id="slider"></div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button class="layui-btn" type="button" id="reset">重置滑块</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
layui.config({
base: 'dist/sliderVerify/'//静态资源所在路径
}).use(['sliderVerify', 'jquery', 'form'], function() {
var sliderVerify = layui.sliderVerify,
$ = layui.jquery,
form = layui.form;
var slider = sliderVerify.render({
elem: '#slider',
onOk: function(){//当验证通过回调
layer.msg("滑块验证通过");
}
})
$('#reset').on('click',function(){
slider.reset();
})
//监听提交
form.on('submit(formDemo)', function(data) {
if(slider.isOk()){
layer.msg(JSON.stringify(data.field));
}else{
layer.msg("请先通过滑块验证");
}
return false;
});
})
</script>
</html>
这里失败了自动有相关信息弹出,不需要去配置
springboot个人登录页面模板测试(这里使用了thymeleaf模板,为了前后端交互)
这里使用了X-admin前端模板 ,所以要下载相关的资源包
页面效果图
代码
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>后台登录-blog</title>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="stylesheet" th:href="@{/static/X-admin/css/font.css}">
<link rel="stylesheet" th:href="@{/static/X-admin/css/login.css}">
<link rel="stylesheet" th:href="@{/static/X-admin/css/xadmin.css}">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" th:src="@{/static/X-admin/lib/layui/layui.js}" charset="utf-8"></script>
</head>
<body onkeydown="enterSubmit(event)" class="login-bg">
<div class="login layui-anim layui-anim-up">
<div class="message">blog-管理登录</div>
<div id="darkbannerwrap"></div>
<div class="layui-form">
<input name="username" placeholder="用户名" type="text" lay-verify="required" class="layui-input">
<hr class="hr15">
<input name="password" lay-verify="required" placeholder="密码" type="password" class="layui-input">
<hr class="hr15">
<div id="slider"></div>
<hr class="hr15">
<input id="login" value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit">
<hr class="hr20">
</div>
</div>
<script>
function enterSubmit(obj) {
//当enter 键按下后,需要执行的事件
var button = document.getElementById('login');
if (obj.keyCode == 13) {
button.click();
}
}
layui.config({
base: '/X-admin/js/' //这里是拓展layui资源包
}).use(['sliderVerify', 'form', 'layer'], function () {
var form = layui.form,
layer = layui.layer,
sliderVerify = layui.sliderVerify,
$ = layui.jquery;
var slider = sliderVerify.renlogin-3.htmlder({
elem: '#slider',
onOk: function () {//当验证通过回调
layer.msg("滑块验证通过");
}
});
//监听提交
form.on('submit(login)', function (data) {
$.ajax({
url: "/admin/v1/login",
type: "post",
data: data.field,
success: function(s) {
if (s.resultCode == 200) {
//加载层-风格3
layer.load(2);
setTimeout(function () {
layer.closeAll('loading');
}, 1500);
layer.msg(s.message, function () {
//这里是接受了后端数据,并进行页面跳转
location.href = s.data;
});
} else {
layer.msg(s.message, function () {
});
}
},
error:function(){
layer.msg("接口异常!", function () {});
}
});
});
});
</script>
<!-- 底部结束 -->
</body>
</html>
后端json传输数据
{
"resultCode": 200,
"message": "成功",
"data": "/admin/v1/index"
}