在thinkphp中制作验证码非常容易,因为系统已经把相关的类都封装好了,只需要简单的调用就可以啦.下面来说下如何在前台页面中如何显示验证码图片,以及提交如何与session中的验证码对比,好像使用的thinkphp的版本不同,稍微有些许区别,不过大体的思路相同.前台输入验证码,通过ajax提交,到后台进行验证,根据后台返回的信息,前台页面进行相关的正确或者错误提示. 首先在模板页面中制作相关表单部分:

function freshVerify(){
     document.getElementById("verifyImg").src="__URL__/vcode/"+Math.random();
 }

<div class="code_box">
    <form method="post" action="__URL__/test" id="myform">
        <input type="text" name="verify" class="text">
        <img style="cursor:pointer" title="刷新验证码" src="__URL__/vcode/" id="verifyImg" onClick = 'freshVerify()'/>
        <a href="javascript:freshVerify()">看不清,点击刷新</a>
        <input type="submit" class="btn" value="确定">
    </form>
</div>

其次就是前台的ajax验证部分代码了.首先要阻止表单提交,即return false,前台ajax部分代码:

$(function() {
    $("#myform").submit(function() {
        var code = $('.text').val();
        //alert(code);
        $.ajax({
             type: "POST",
                        url: "__URL__/test",
                         data : {verify:code},
            success:function(msg) {
                if(msg==1) {
                        alert("验证码输入正确!");
                        $('.text').val('');
                        freshVerify();//刷新验证码
                    } else {
                        alert("验证码输入错误!");
                    }
                }
            });
          return false;
    })
})

之后就是在后台控制器中进行对比了,将前台提交过了的验证码与session中的验证码进行对比,然后返回不同的信息:

public function test() {
      $code = $_POST['verify'];
      if(check_verfiy($code)){
          //返回true,正确;
          echo '1';
        } else {
         echo '0';
        }
    }

其中的 check_verfiy()方法在--网站根目录->前台文件-->Common-->Common里的function.php中,验证函数的代码如下:(也可以参考tp手册)

function check_verfiy($code, $id='') {
    $verfiy = new \Think\Verify();
    return $verfiy->check($code,$id);
}

基本的流程基本上就是这样,要注意传递的数据data参数.根据后台返回的数据,前台来做不同的处理.