问题描述:
使用tp5和layui框架结合的登录页面,在首次登录时不出现验证码,只出现用户名及密码,如果失败超过3次则出现验证码验证。
因为使用是layui form局部刷新,再第三次失败后需要返回1002值在前端layui判断后让整个页面刷新出现验证码。
解决办法:
第一各办法:
前端页面layui form代码:
<form class="layui-form">
<div class="login-box-width">
<ul>
<li class="password-input">
<div class="form-box clearfix">
<label></label>
<input type="password" name="password" lay-verify="required" id="loginPassWord" placeholder="密码" />
</div>
</li>
{eq name="showcode" value='1'}
<li class="code-input">
<div class="message" style="display: none;" id="codediv">
<p class="error-tex">请输入验证码</p>
</div>
<div class="form-box clearfix">
<input type="text" name="code" lay-verify="required" id="loginsignincode" placeholder="验证码" />
<div class="fr">
<img onclick="this.src='{:captcha_src()}?'+Math.random()" src="{:captcha_src()}" alt="captcha" class="VcodeImg" />
</div>
</div>
</li>
{/eq}
</ul>
<div class="login-set">
<button lay-submit lay-filter="myform" class="btn" style="width: 100%">登录</button>
</div>
</div>
</form>
<script type="text/javascript">
layui.use(['form'],function(){
var form=layui.form;
//监听提交事件
form.on('submit(myform)',function(obj){
jsonstr=JSON.stringify(obj.field);
$.ajax({
type: "POST",
url: "{:url('login/log')}",
data: {"val": jsonstr},
beforeSend: function (xhr) {
loading=layer.load(1,{shade:[0.3,'#000']});
},
success: function (result) {
layer.close(loading);
if (result.code== 1000) {
layer.msg(result.msg,{icon:1})
location.href="{:url('first/index')}";
}
else if(result.code==1002) {
layer.msg(result.msg,{icon:1},function(){
window.location.reload();
})
} else {
layer.msg(result.msg,{icon:2})
$(".VcodeImg").attr('src',"{:captcha_src()}?"+Math.random())
}
}
});
return false;
})
})
</script>
php代码:
//加载登录页面
public function index(){
if(empty(session('mid'))){
$this->assign('showcode',0);
$logincount=Db::name('mlogin_log')->where('phpsessid',$_COOKIE['PHPSESSID'])->whereTime('login_time','-1 hours')->where(['login_status'=>1,'is_delete'=>1])->count();
if($logincount>=3){
// 登录三次没有成功就出现验证码
$this->assign('showcode',1);
}
return view();
}
$this->redirect('first/index');
}
//ajax执行登录
public function log(){
if(request()->isAjax()){
//获取请求信息
$req=html_entity_decode(input('val')) ;
$request=json_decode($req,true);
$logincount=Db::name('mlogin_log')->where('phpsessid',$_COOKIE['PHPSESSID'])->whereTime('login_time','-1 hours')->where(['login_status'=>1,'is_delete'=>0])->count();
if($logincount>=3){
// 登录三次没有成功就出现验证码
Db::name('mlogin_log')->where('phpsessid',$_COOKIE['PHPSESSID'])->whereTime('login_time','-1 hours')->where('login_status',1)->update(['is_delete'=>1]);
return json(['code'=>1002,'msg'=>'登录失败超过了三次,将输入验证码','data'=>'']);
}
if(isset($request['code'])){
//判断验证码是否正确
if(!captcha_check($request['code'])){
return json(['code'=>1001,'msg'=>'验证码错误,请重新输入!','data'=>'']);
}
}
}
第二种办法:使用cookie
protected $ProisShowAuthCode;
// 前端是否显示验证码,默认不显示
$this->ProisShowAuthCode=2;
if(cookie('loginNum')>=3){
$this->ProisShowAuthCode=1;
}
// 使用cookie记录登录的失败次数
if(cookie('loginNum')!=null){
$nul=cookie('loginNum');
cookie('loginNum',$nul=1+$nul);
}else{
cookie('loginNum',1);
}
if(cookie('loginNum')>=3 && $captcha==null){
return json(['code'=>1002,'msg'=>'您连续登录失败大于3次,如需帮助请联系客服','data'=>'']);
}