首先，是实现验证码的流程图：

那么需要的知识点有哪些呢？

按步骤来看

－－生成图片，生成干扰元素，合成一张验证码图涉及到GD库

－－生成随机内容，mt_rand()函数的使用

－－数据存储在服务器端需要用到session会话

－－最后的数据比较，需要用到Ajax

第一步：生成验证码，存储数据：

<?php  
    session_start();
    
    //创建一个100*30的图像
    $image = imagecreatetruecolor(100, 30);
    //给图像添加一个白色的背景
    $bgcolor = imagecolorallocate($image, 255, 255, 255);
    //给图像填充颜色
    imagefill($image, 0, 0, $bgcolor);
    $capcha = "";
    //在图像上产生随机数字
    for ($i=0; $i < 4; $i++) { 
        $fontsize=7;
        //字体随机颜色
        $fontcolor = imagecolorallocate($image, rand(0,120), rand(0,120), rand(0,120));
        //$fontcontent = substr(md5(rand()),1,1);//这样的数字字母混合方式容易出现0 o这样易混淆的字符
        $data = "abcdefghijkmnpqrstuvwxy3456789";
        $fontcontent = substr($data,rand(0,strlen($data)-1),1);
        $capcha.=$fontcontent;
        $x = ($i*100/4)+rand(5,10);
        $y = rand(5,10);
        imagestring($image, $fontsize, $x, $y, $fontcontent, $fontcolor);

    }
    $_SESSION['authcode'] = $capcha;
    //在图像上添加 点 干扰元素
    for ($i=0; $i < 200; $i++) { 
        $pointcolor = imagecolorallocate($image, rand(50,200), rand(50,200), rand(50,200));
        imagesetpixel($image, rand(1,99), rand(1,29), $pointcolor);
    }

    //在图像上添加 线 干扰元素
    for ($i=0; $i <3; $i++) { 
        $linecolor = imagecolorallocate($image, rand(80,220), rand(80,220), rand(80,220));
        imageline($image, rand(1,99), rand(1,29),rand(1,99),rand(1,29), $linecolor);
    }
    //输出图像之前要声明页面格式
    header("Content-type:image/png");
    //以png格式输出图像
    imagepng($image);
    //输出后别忘了销毁
    imagedestroy($image);
?>

 

 

 第二步：通过表格校验数据

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证码校验</title>
</head>
<body>
<?php  
    if (isset($_POST['authcode'])) {
        session_start();
        if (($_POST['authcode'])==$_SESSION['authcode']) {
            header("refresh:2;url='./form.php'");
            echo '<font color="#0f0">输入正确！</font>';
        }else{
            echo '<font color="#f00">输入错误！</font';
        }
        exit();
    }
    
?>

    <form action="./form.php" method="post">
        <p>验证码图片：<img src="./capcha.php?r=<?php echo rand();?>" border="1" alt="" width="100" height="30">
            <a href="javascript:void(0)" onclick="document.getElementsByTagName('img')[0].src='./capcha.php?r='+Math.random()">换一个?</a>
        </p>

        <p>请输入图片中的内容：<input type="text" name="authcode" value="" /></p>
        <p><input type="submit" value="提交" style="padding:6px 20px;"></p>
    </form>
    
</body>
</html>

 其中考虑到当验证码看不清时，点击换一个即可更换图片。