layui登陆验证页⾯模板（滑块学习）
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" >
<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">
base:'dist/sliderVerify/'//静态资源所在路径
}).use(['sliderVerify','jquery','form'],function(){
var sliderVerify = layui.sliderVerify,
$ = layui.jquery,
form = layui.form;
var slider = der({
elem:'#slider',
onOk:function(){//当验证通过回调
layer.msg("滑块验证通过");
}
})
$('#reset').on('click',function(){
$('#reset').on('click',function(){
})
//监听提交
<('submit(formDemo)',function(data){
if(slider.isOk()){
layer.msg(JSON.stringify(data.field));
}else{
layer.msg("请先通过滑块验证");
}
return false;
});
})
</script>
</html>
这⾥失败了⾃动有相关信息弹出，不需要去配置
springboot个⼈登录页⾯模板测试(这⾥使⽤了thymeleaf模板，为了前后端交互)
这⾥使⽤了前端模板 ，所以要下载相关的资源包
页⾯效果图
代码
<!doctype html>
<html th=""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"href="@{/static/X-admin/css/font.css}">
<link rel="stylesheet"href="@{/static/X-admin/css/login.css}">
<link rel="stylesheet"href="@{/static/X-admin/css/xadmin.css}">
<script type="text/javascript"src="cdn.bootcss/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript"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" type="submit">
<hr class="hr20">
</div>
</div>
<script>
function enterSubmit(obj){
//当enter 键按下后，需要执⾏的事件
var button = ElementById('login');
if(obj.keyCode ==13){
if(obj.keyCode ==13){
button.click();
}
jquery怎么进行验证
}
base:'/X-admin/js/'//这⾥是拓展layui资源包}).use(['sliderVerify','form','layer'],function(){
var form = layui.form,
layer = layui.layer,
sliderVerify = layui.sliderVerify,
$ = layui.jquery;
var slider = login-3.htmlder({
elem:'#slider',
onOk:function(){//当验证通过回调
layer.msg("滑块验证通过");
}
});
//监听提交
<('submit(login)',function(data){
$.ajax({
url:"/admin/v1/login",
type:"post",
data: data.field,
success:function(s){
sultCode ==200){
//加载层-风格3
layer.load(2);
setTimeout(function(){
layer.closeAll('loading');
},1500);
layer.ssage,function(){
//这⾥是接受了后端数据，并进⾏页⾯跳转                            location.href = s.data;
});
}else{
layer.ssage,function(){
});
}
},
error:function(){
layer.msg("接⼝异常!",function(){});
}
});
});
});
</script>
<!-- 底部结束 -->
</body>
</html>
后端json传输数据
{
"resultCode":200,
"message":"成功",
"data":"/admin/v1/index"
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。