thinkphp 验证码功能(验证验证码)

最新推荐文章于 2024-07-22 08:48:13 发布

原创最新推荐文章于 2024-07-22 08:48:13 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#thinkphp #PHP #jquery #ajax #html5

thinkPHP 同时被 3 个专栏收录

8 篇文章

订阅专栏

jQuery

6 篇文章

订阅专栏

Ajax

2 篇文章

订阅专栏

本文介绍了一个简单的网页登录界面中验证码的生成与验证过程。通过PHP和ThinkPHP框架实现了验证码图片的生成及验证功能，并利用jQuery处理前端交互。文章涵盖了前端HTML、JavaScript代码以及后端PHP逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

    </style>
</head>
<div class="">
    <p class="verify_info"></p>
    <label for="verify">验证码：</label>
    <input id="verify" name="verify" type="text"/>
    <img id="verify_img" src="{:U('login/verify',array())}">
    <button id="login">登陆</button>
</div>
</body>
<script src="__JS__/jquery.min.js"></script>
<script>

    //刷新验证码函数
    function reVerify(){
        var verifyURL = "login/verify";
        var time = new Date().getTime();
        $("#verify_img").attr({
            "src" : verifyURL + "/" + time
        });
    }

    //点击图片刷新验证码
    $("#verify_img").click(function() {
        reVerify();
    });




    //判断验证码长度
    $('#verify').keyup(function(){
        var verifyLength = $('#verify').val().length;
        if(verifyLength != 2 ){
            $('.verify_info').text('验证码长度必须为2位');
        }else{
            $('.verify_info').text('');
        }
    });

    //验证验证码是否正确
    $('#login').click(function(){
        $.post("login/check_verify",{
            code : $("#verify").val()
        },function(data){
            if(data == true){
                alert('登陆成功,准备跳转到主页');
            }else{
                alert('验证码不正确');
                reVerify(); //调用刷新验证码函数
            }
        });
    });

</script>
</html>

controller

<?php
/**
 * Created by PhpStorm.
 * User: outusi
 * Date: 15/9/17
 * Time: 上午9:28
 */
namespace Home\Controller;
use Think\Controller;
use Think\Verify;

class LoginController extends Controller{


    public function index(){

        $this->display();
    }


    /* 生成验证码 */
    public function verify()
    {
        $config = array(
            'fontSize' => 11, // 验证码字体大小
            'length' => 2, // 验证码位数4
            'imageH' => 25,
            'useImgBg' => false,//是否使用背景图片
            'useNoise' => true,//关闭验证码杂点
            'useCurve' => false,//取消曲线混淆
            'codeSet'=> '0123456789',
            'bg' => array(200,200,200),
        );
        $Verify = new Verify($config);
        $Verify->entry();
    }

    /* 验证码校验 */
    public function check_verify($code, $id = '')
    {
        $verify = new \Think\Verify();
        $res = $verify->check($code, $id);
        $this->ajaxReturn($res, 'json');
    }
}