Easy jQuery AJAX PHP Captcha - 2 minute setup

This tutorial shows how to quickly implement a basic AJAX CAPTCHA using PHP, jQuery, and Bootstrap. While not highly secure, it offers a simple, customizable solution for preventing automated form submissions. It's ideal for situations where a quick, easy CAPTCHA is needed without the complexity of reCAPTCHA.

Key Features:

• Easy Setup: Minimal code, ready to integrate in minutes.
• jQuery Validate Integration: Seamlessly works with the popular jQuery Validate plugin.
• Customizable: Control font, size, color, and background color.
• PHP-based: Generates CAPTCHAs on the server-side, no external APIs needed.

Demo:

A demo showcasing the CAPTCHA functionality is available (link to demo would go here if provided).

[Image of CAPTCHA demo would go here if provided]

Download:

The complete source code is available on GitHub (link to GitHub repo would go here if provided).

Implementation:

The CAPTCHA implementation consists of HTML, jQuery, and PHP components.

1. HTML (using 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:

This jQuery code handles CAPTCHA refresh and validation using AJAX. It leverages the jQuery Validate plugin's remote rule for server-side verification.

$(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):

This PHP script generates a new CAPTCHA image and stores the code in a session variable.

<?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):

This script verifies the user's CAPTCHA input against the session variable.

<?php
session_start();

if (isset($_REQUEST['code'])) {
    echo json_encode(strtolower($_REQUEST['code']) == strtolower($_SESSION['captcha']));
} else {
    echo 0;
}
?>

Remember to adjust file paths and font settings to match your project structure. This provides a functional, though basic, CAPTCHA system. For higher security, consider using a more robust solution like reCAPTCHA.

The above is the detailed content of Easy jQuery AJAX PHP Captcha - 2 minute setup. For more information, please follow other related articles on the PHP Chinese website!