首先使用Composer安装think-captcha扩展包:
composer require topthink/think-captcha
注:安装在根目录,使用验证码需要开启Session才可使用,TP6不默认开启Session。
开启路径:app/middleware.php;将其中的session的注释取消
使用
<span>
<input type="text" id="code" placeholder="输入验证码">
<img id="src" src="{:captcha_src()}" alt="captcha" style="height: 40px;width: 100px" onclick=this.src="{:captcha_src()}"+Math.random() style="cursor:pointer;" title="看不清,点击更换验证码"/>
</span>
<button id="sub">登录</button>
<script>
//点击按钮登录
$("#sub").click(function () {
code = $("#code").val();//获取验证码
phone = $("#phone").val();
password = $("#password").val();
//将获取的值传给后台
$.post("/admin/login/login",{code,phone,password},function (res) {
console.log(res.code)
//如果登录成功则跳转页面
if(res.code==1){
window.location.href="/admin/index/index";
}
else {//失败则刷新验证码
obk = document.getElementById('src');
obk.src = '{:captcha_src()}?'+Math.random();
//弹出错误信息
alert(res.msg)
}
})
})
</script>
后台可以使用captcha_check()判断传到的验证码是否与验证码图片上的相同
eg:$code是我前台传来时数据
if(!captcha_check($code)){
return json(['code'=>0 ,'msg'=>'验证码错误']);
}