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>
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!