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

2024-05-04 21:58:46

字體：大中小

來源：轉載

供稿：網友

在網站開發中為了提供用戶體驗我們多數都使用ajax來做一些操作,下面我來介紹一個利用ajax實現無刷新頁面的驗證碼ajax驗證有需要的朋友可參考.

下面介紹一個簡單的PHP驗證碼,代碼如下:

<?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;

//開源代碼Vevb.com

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("驗證碼錯誤！");

            }

        });

    });

});