关于tp3.2.3验证码简单使用

在Application/Admin/View/Index下添加index.html

关于tp3.2.3验证码简单使用

在index.html里把表单写出来

 关于tp3.2.3验证码简单使用

关于tp3.2.3验证码简单使用

编辑IndexController.class.php显示验证码图片

关于tp3.2.3验证码简单使用

在index.php里面添加<img>验证码图片的地址使用U函数生成,用于页面显示验证码图片

 关于tp3.2.3验证码简单使用

关于tp3.2.3验证码简单使用

在index.html中实现点击验证码图片切换的两种方法

1、使用JQuery实现验证码的切换(在public下js里面装有jQuery文件),写title能让使用者更加清楚

关于tp3.2.3验证码简单使用

2、直接在<img>里面添加onclick

关于tp3.2.3验证码简单使用

当表单index.html编写完毕,此时编写服务端处理逻辑,编辑IndexController.class.php,添加check方法,主要是验证验证码是否正确

关于tp3.2.3验证码简单使用

验证码正确样式:

关于tp3.2.3验证码简单使用

验证码错误样式:

关于tp3.2.3验证码简单使用

代码如下:

IndexController.class.php:

<?php

namespace Admin\Controller;

use Think\Controller;

class IndexController extends Controller {

    public function index(){

        $this->display();

    }

 

    public function verify(){

            $Verify = new \Think\Verify();

       $Verify->length   = 4;   //验证码个数

                 $Verify->entry(1);

    }

   

    public function check(){

            header("Content-type: text/html; charset=utf-8");

            $code=I('code');

              $verify = new\Think\Verify();

            if($verify->check($code, 1)){

          $this->success("验证码正确") ;

            }else{

                     $this->error("验证码错误");

            }

    }

}

 

 

 

Index.html:

<!DOCTYPE html>

<html lang="en">

<head>

        <meta charset="UTF-8">

        <title></title>

        <scriptsrc="__PUBLIC__/js/jquery-1.6.2.min.js"></script>

        </script>

        <script>

                 $(function(){

          $('img').click(function(){

               $('img').attr('src',"__URL__/verify/random/"+Math.random());//点击事件改变图片地址

           });

                 });

        </script>

</head>

<body>

        <formmethod="post" action="__URL__/check">

                 <label>用户名:</label><inputtype="text" name="username"><br><br>

                 <label>密码:</label><inputtype="password" name="password"><br><br>

                 <label>验证码:</label><inputtype="text" name="code"><br><br>

                 <imgsrc="{:U('Index/verify')}" title="看不清,换一张"><br><br>

                 <inputtype="submit" name="登录">

        </form>

</body>

</html>