本教程顯示了如何使用PHP，jQuery和Bootstrap快速實(shí)現(xiàn)基本的Ajax Captcha。 雖然不安全，但它提供了一種簡(jiǎn)單，可自定義的解決方案，用于防止自動(dòng)化表單提交。 這是需要快速，簡(jiǎn)單的驗(yàn)證碼而沒(méi)有recaptcha的復(fù)雜性的情況。

密鑰功能：

• >>輕松設(shè)置：>最小代碼，準(zhǔn)備在幾分鐘內(nèi)集成。
• > jQuery validate集成：無(wú)縫與流行的jQuery validate插件一起使用。
• >自定義：控制字體，尺寸，顏色和背景顏色。
• >基于PHP：在服務(wù)器端生成驗(yàn)證碼，無(wú)需外部API。>

演示：

示例顯示驗(yàn)證驗(yàn)證功能（如果提供的話，鏈接到演示將在此處鏈接）。

[如果提供的話，驗(yàn)證演示的圖像將去這里]

>下載：

完整的源代碼可在GitHub上找到（鏈接到GitHub Repo，如果提供的話，將轉(zhuǎn)到此處）。

實(shí)現(xiàn)：

驗(yàn)證碼實(shí)現(xiàn)由HTML，jQuery和PHP組件組成。

1。 html（使用bootstrap）：

<label class="" for="captcha">*Please enter the verification code shown below.</label>
<div id="captcha-wrap">
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174028207285395.jpg"  class="lazy" alt="Easy jQuery AJAX PHP Captcha - 2 minute setup " />
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Easy jQuery AJAX PHP Captcha - 2 minute setup " />
</div>
<input class="narrow text input" id="captcha" name="captcha" type="text" placeholder="Verification Code" />

2。 jQuery：

此jQuery代碼使用AJAX處理驗(yàn)證碼刷新和驗(yàn)證。 它利用jQuery Validate插件的

規(guī)則進(jìn)行服務(wù)器端驗(yàn)證。

> remote

$(function() {
    WEBAPP = {
        settings: {},
        cache: {},
        init: function() {
            this.cache.$form = $('#captcha-form'); // Assumes your form has id="captcha-form"
            this.cache.$refreshCaptcha = $('#refresh-captcha');
            this.cache.$captchaImg = $('img#captcha');
            this.cache.$captchaInput = $(':input[name="captcha"]');
            this.eventHandlers();
            this.setupValidation();
        },
        eventHandlers: function() {
            WEBAPP.cache.$refreshCaptcha.on('click', function(e) {
                WEBAPP.cache.$captchaImg.attr("src", "/php/newCaptcha.php?rnd=" + Math.random());
            });
        },
        setupValidation: function() {
            WEBAPP.cache.$form.validate({
                onkeyup: false,
                rules: {
                    "captcha": {
                        required: true,
                        remote: {
                            url: '/php/checkCaptcha.php',
                            type: "post",
                            data: {
                                code: function() {
                                    return WEBAPP.cache.$captchaInput.val();
                                }
                            }
                        }
                    }
                    // Add other form field validation rules here as needed
                },
                messages: {
                    "captcha": {
                        required: "Please enter the verification code.",
                        remote: "Verification code incorrect, please try again."
                    }
                    // Add other form field error messages here as needed
                },
                submitHandler: function(form) {
                    // Handle successful form submission here (e.g., AJAX submission)
                }
            });
        }
    };
    WEBAPP.init();
});

3。 php（newcaptcha.php）：

此php腳本生成新的驗(yàn)證碼圖像并將代碼存儲(chǔ)在會(huì)話變量中。

<?php
session_start();

$string = '';
for ($i = 0; $i < 6; $i++) {
    $string .= chr(rand(97, 122));
}

$_SESSION['captcha'] = $string;

$dir = '../fonts/'; // Path to your fonts directory
$image = imagecreatetruecolor(165, 50);
$font = "PlAGuEdEaTH.ttf"; // Your font file
$color = imagecolorallocate($image, 113, 193, 217);
$white = imagecolorallocate($image, 255, 255, 255);
imagefilledrectangle($image, 0, 0, 399, 99, $white);
imagettftext($image, 30, 0, 10, 40, $color, $dir . $font, $_SESSION['captcha']);

header("Content-type: image/png");
imagepng($image);
?>

4。 php（checkcaptcha.php）：

此腳本將對(duì)會(huì)話變量驗(yàn)證用戶的CAPTCHA輸入。

請(qǐng)記住調(diào)整文件路徑和字體設(shè)置以匹配您的項(xiàng)目結(jié)構(gòu)。 這提供了一個(gè)功能功能，但基本的驗(yàn)證碼系統(tǒng)。 為了獲得更高的安全性，請(qǐng)考慮使用更強(qiáng)大的解決方案，例如recaptcha。

以上是Easy JQuery Ajax php Catpcha -2分鐘設(shè)置的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！