PHP驗證碼之Ajax驗證實現方法

來源:互聯網
上載者:User

驗證碼產生程式我這裡就不介紹了,大家可參考http://www.111cn.net/phper/phpanqn/46698.htm 下面介紹一個簡單的

 代碼如下 複製代碼

<?php 
session_start();
//設定: 你可以在這裡修改驗證碼圖片的參數
$image_width = 120;
$image_height = 40;
$characters_on_image = 6;
$font = './monofont.ttf'; 
 
//以下字元將用於驗證碼中的字元 
//為了避免混淆去掉了數字1和字母i
$possible_letters = '23456789bcdfghjkmnpqrstvwxyz';
$random_dots = 10;
$random_lines = 30;
$captcha_text_color="0x142864";
$captcha_noice_color = "0x142864"; 
 
$code = ''; 
 
$i = 0;
while ($i < $characters_on_image) { 
    $code .= substr($possible_letters, mt_rand(0, strlen($possible_letters)-1), 1);
    $i++;
}
 
$font_size = $image_height * 0.75; 
$image = @imagecreate($image_width, $image_height);
 
/* 設定背景、文本和幹擾的噪點 */
$background_color = imagecolorallocate($image, 255, 255, 255);
 
$arr_text_color = hexrgb($captcha_text_color); 
$text_color = imagecolorallocate($image, $arr_text_color['red'], 
$arr_text_color['green'], $arr_text_color['blue']);
 
$arr_noice_color = hexrgb($captcha_noice_color); 
$image_noise_color = imagecolorallocate($image, $arr_noice_color['red'], 
$arr_noice_color['green'], $arr_noice_color['blue']);
 
/* 在背景上隨機的產生幹擾噪點 */
for( $i=0; $i<$random_dots; $i++ ) {
    imagefilledellipse($image, mt_rand(0,$image_width),
    mt_rand(0,$image_height), 2, 3, $image_noise_color);
}
 
/* 在背景圖片上,隨機產生線條 */
for( $i=0; $i<$random_lines; $i++ ) {
    imageline($image, mt_rand(0,$image_width), mt_rand(0,$image_height),
    mt_rand(0,$image_width), mt_rand(0,$image_height), $image_noise_color);
}
 
/* 產生一個文字框,然後在裡面寫生6個字元 */
$textbox = imagettfbbox($font_size, 0, $font, $code); 
$x = ($image_width - $textbox[4])/2;
$y = ($image_height - $textbox[5])/2;
imagettftext($image, $font_size, 0, $x, $y, $text_color, $font , $code);
 
/* 將驗證碼圖片在HTML頁面上顯示出來 */
header('Content-Type: image/jpeg');
// 設定圖片輸出的類型
imagejpeg($image);
//顯示圖片
imagedestroy($image);
//銷毀圖片執行個體
$_SESSION['6_letters_code'] = $code;
 
function hexrgb ($hexstr) {
    $int = hexdec($hexstr);
 
    return array( "red" => 0xFF & ($int >> 0x10),
                "green" => 0xFF & ($int >> 0x8),
                "blue" => 0xFF & $int
    );
}
?>

驗證碼

產生後,我們要在實際的項目中應用,通常我們使用ajax可以實現點擊驗證碼時重新整理產生新的驗證碼(有時產生的驗證碼肉眼很難識別),即“看不清換一張”。填寫驗證碼後,還需要驗證所填驗證碼是否正確,驗證的過程是要背景程式來完成,但是我們也可以通過ajax來實現無重新整理驗證。

驗證驗證碼正確或錯誤的方法
驗證碼圖片上的文字被存放到了SESSION 變數裡面,驗證的時候,我們需要將SESSION 裡面的值和使用者輸入的值進行比較即可。

$_SESSION[6_letters_code] – 存放著驗證碼的文字值
$_POST[6_letters_code] – 這是使用者輸入的驗證碼的內容


我們建立一個前端頁面index.html,載入jquery,同時在body中加入驗證碼表單元素:

 代碼如下 複製代碼

<p>驗證碼:<input type="text" class="input" id="code_num" name="code_num" maxlength="4" />  
<img src="code_num.php" id="getcode_num" title="看不清,點擊換一張" align="absmiddle"></p> 
<p><input type="button" class="btn" id="chk_num" value="提交" /></p> 

html代碼中,<img src="code_num.php"即調用了產生的驗證碼,當點擊驗證碼時,重新整理產生新的驗證碼:

 代碼如下 複製代碼

$(function(){ 
    //數字驗證 
    $("#getcode_num").click(function(){ 
        $(this).attr("src",'code_num.php?' + Math.random()); 
    }); 
    ... 
}); 

重新整理驗證碼,其實就是重新請求了驗證碼產生程式,這裡要注意的是調用code_num.php時要帶上隨機參數防止緩衝。接下來填寫好驗證碼之後,點“提交”按鈕,通過$.post(),前端向後台chk_code.php發送ajax請求。

 代碼如下 複製代碼

$(function(){ 
    ... 
    $("#chk_num").click(function(){ 
        var code_num = $("#code_num").val(); 
        $.post("chk_code.php?act=num",{code:code_num},function(msg){ 
            if(msg==1){ 
                alert("驗證碼正確!"); 
            }else{ 
                alert("驗證碼錯誤!"); 
            } 
        }); 
    }); 
}); 


後台chk_code.php驗證:

 代碼如下 複製代碼

session_start(); 
 
$code = trim($_POST['code']); 
if($code==$_SESSION["helloweba_num"]){ 
   echo '1'; 

後台根據提交的驗證碼與儲存在session中的驗證碼比對,完成驗證。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.