PHP開發之驗證碼

很多網站登入時都會有驗證碼，下面我們就來介紹驗證碼功能的實作方法。

在前段登入頁面程式碼中有這麼一段：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no" />
    <title>登录页面实例展示</title>
    <link rel="stylesheet" type="text/css" href="/phpMyAdmin/login.css"/>
</head>
<body>
<p>
    <span>
    <input type="text" name="code" id="code" class="pf_ipt_verify w230"  placeholder="验证码" autocomplete="off" tabindex="3"/>
    <img src="/phpMyAdmin/code.php" onClick="this.src='/phpMyAdmin/code.php?nocache='+Math.random()" style="cursor:hand">
</span>
</p>
</body>
</html>

這個就是我們在頁面上看到的驗證碼的圖片。給驗證碼圖片一個點擊事件，就可以實現點擊一次圖片，更換不同的數字了。

另外，驗證碼是如何產生的呢，就是下面這段程式碼：

<?php
session_start();
Header("Content-type:image/PNG");
$im = imagecreate(150,45);
$back = imagecolorallocate($im, 245, 245, 245);
imagefill($im, 0,0, $back);
$vcodes = "";
for($i = 0; $i < 4; $i++){
    $font = imagecolorallocate($im, rand(100, 255), rand(0, 100), rand(100, 255));
    $authnum = rand(0, 9);
    $vcodes .= $authnum;
    imagestring($im, 5, 50 + $i * 10, 20, $authnum, $font);
}
$_SESSION['VCODE'] = $vcodes;
for($i=0;$i<200;$i++) {
    $randcolor = imagecolorallocate($im, rand(0, 255), rand(0, 255), rand(0, 255));
    imagesetpixel($im, rand()%150, rand()%150, $randcolor); //
}
imagepng($im);
imagedestroy($im);
?>

這是程式碼產生的後台程式。

在登入的後端程式碼中對程式碼進行判斷，一是判斷有沒有輸入，二是判斷輸入的對不對，程式碼如下：

if(!$_POST['code']){
    echo('验证码不能为空');
    return;
}else if($_POST['code']!=$_SESSION['VCODE']){
    echo('验证码不正确');
    return;
}

新建檔案

<?php
session_start();
Header("Content-type:image/PNG");
$im = imagecreate(150,45);
$back = imagecolorallocate($im, 245, 245, 245);
imagefill($im, 0,0, $back);
$vcodes = "";
for($i = 0; $i < 4; $i++){
 $font = imagecolorallocate($im, rand(100, 255), rand(0, 100), rand(100, 255));
 $authnum = rand(0, 9);
 $vcodes .= $authnum;
 imagestring($im, 5, 50 + $i * 10, 20, $authnum, $font);
}
$_SESSION['VCODE'] = $vcodes;
for($i=0;$i<200;$i++) {
 $randcolor = imagecolorallocate($im, rand(0, 255), rand(0, 255), rand(0, 255));
 imagesetpixel($im, rand()%150, rand()%150, $randcolor); //
}
imagepng($im);
imagedestroy($im);
?>
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <meta name="format-detection" content="telephone=no" />
 <title>登录页面实例展示</title>
 <style>
.mar_auto {
 margin-right: auto;
 margin-left: auto;
}
.re {
 position: relative;
}
.mt70 {
 margin-top: 70px;
}
.min_h400 {
 min-height: 400px;
}
.w432 {
 width: 432px;
}
.btn_1 {
 display: inline-block;

 line-height: 16px;
 padding: 15px 0;
 margin-bottom: 30px;
 border-radius: 3px;
 font-family: Microsoft YaHei,SimHei;
 background: #03a9f4;
 border: 1px solid #0398db;
 color: #fff;
 font-size: 20px;
 text-align: center;
 cursor: pointer;
}
.w430 {
 width: 430px;
}
.pf_ipt_user, .pf_ipt_pass, .pf_ipt_verify{
 height: 20px;
 line-height: 20px;
 padding: 13px 20px;
 margin-bottom: 30px;
 width: 390px;
 border: 1px solid #d9d9d9;
 border-radius: 3px;
 color: #888;
 font-size: 16px;
 font-family: Microsoft YaHei,SimHei;
}
.w230{
 width: 230px;
}
</style>
</head>
<body>
<div>
 <img src="http://keep60.com/Project/SxgAdmin/Public/images/platform_login_header_bg.png"/>
</div>
<div class="mt70 w432 mar_auto re min_h400">
 <form name="form1" id="form1" method="post" action="login.php">
 <p><input type="text" class="pf_ipt_user" placeholder="请输入登录账号" autocomplete="off" name="username" id="_username" tabindex="1"/></p>
 <p><input type="password" class="pf_ipt_pass pass_bg_1" placeholder="请输入密码" autocomplete="off" name="password" id="_password" tabindex="2"/></p>
 <p>
 <span>
 <input type="text" name="code" id="code" class="pf_ipt_verify w230" placeholder="验证码" autocomplete="off" tabindex="3"/>
 <img src="/phpMyAdmin/code.php" onClick="this.src='/phpMyAdmin/code.php?nocache='+Math.random()" style="cursor:hand">
 </span>
 </p>
 <!--<p><a href="javascript:void(0)" class="btn_1 w430">登录</a></p> -->
 <p>
 <button class="btn_1 w430">登录</button>
 </p>
 <p><a href="regedit.html">账号注册</a></p>
 </form>
</div>
</body>
</html>

提交重置程式碼

自動運行

全螢幕