ThinkPHP5验证码的实现

关于如何创建tp5的工程,本文就不在赘述,不懂的可以google查找相关内容,本文直接是在已经创建好的tp5环境进行实现的

如果已经安装 think-captcha扩展包,则跳过第一个步骤。

1.使用composer安装 think-captcha 扩展包

关于如何安装composer,可以访问网址进行正确安装。

使用cmd,切换到ThinkPHP的应用根目录下,执行:

composer require topthink/think-captcha

出现以下界面则表明安装成功:

说明:

如果出现以下错误:

表示本地下载ThinkPHP版本不支持默认下载的think-captcha版本,需要自己指定版本

composer require topthink/think-captcha=1.*

2.前端代码,文件名index.test.html,最为简单的方式,没有使用到css

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Test/title>
 6     <script type="text/javascript"src="http://code.jquery.com/jquery-latest.js"></script>
 7 </head>
 8 <body>
 9 <div class="codeImg">
10     <img src="{:url('index/index/newCode',['t'=>time()])}" title="点击更换" alt="captcha" class="captcha_img" id="captcha_img" onclick="changeCode()"/>
11 </div>
12 <input type="text" id="code">
13 <input type="button" id="submit" onclick="submitCode()" value="验证">
14 <script>
15     function submitCode() {
16         // 获取用户输入的值
17         code = $("#code").val();
18         // 使用ajax请求后台
19         $.ajax({
20             type : "POST",
21             dataType:"json",
22             data:{
23                 'code':code
24             },
25             url :"/index/index/verfycode",
26             success : function(rs) {
27                 // 简单输出验证成功还是失败
28                 alert(rs);
29             }
30         });
31     }
32     // 用户点击验证码图片,改变验证码
33     function changeCode(){
34         $("#captcha_img").attr("src",'{:url("index/index/newCode")}?t='+parseInt(40*Math.random()));
35     }
36 </script>
37 </body>
38 </html>

3.接下来是实现后端PHP代码

 1 <?php
 2 namespace app\index\controller;
 3 use think\captcha\Captcha;
 4 use think\Controller;
 5 class Index extends Controller
 6 {
 7     public function test(){
 8         // 自动定位到 index.test.html 文件
 9         // 具体config.php配置文件这里不细说
10         this->fetch();
11     }
12     public function verfycode(){
13         // 获取ajax请求的值
14         $code = input("code");
15         // 进行验证码的验证
16         if (captcha_check($code)){
17             return '验证成功';
18         } else {
19             return '验证失败';
20         }
21     }
22     public function newCode(){
23         // 配置验证码的显示方式和内容
24         $config =    [
25             // 验证码位数
26             'length'      =>    4,
27             // 验证码过期时间
28             'expire'      =>    300,
29             // 是否添加杂点
30             'useNoise' => true,
31             // 是否画混淆曲线
32             'useCurve' => false,
33             // 是否使用背景图片
34             'useImgBg' => false,
35             // 使用字体
36             'fontttf' => '3.ttf'
37         ];
38         $captcha = new Captcha($config);
39         return $captcha->entry();
40     }
41 }

详细阐述验证码的配置:

4.运行结果:

posted on 2018-08-15 20:01  seizemiss  阅读(4029)  评论(0编辑  收藏  举报