Mudah jQuery ajax php captcha - persediaan 2 minit

Tutorial ini menunjukkan bagaimana untuk melaksanakan Ajax Captcha asas dengan cepat menggunakan PHP, JQuery, dan Bootstrap. Walaupun tidak sangat selamat, ia menawarkan penyelesaian yang mudah dan disesuaikan untuk mencegah penyerahan bentuk automatik. Ia sesuai untuk situasi di mana captcha yang cepat dan mudah diperlukan tanpa kerumitan recaptcha.

Ciri -ciri Utama:

• Persediaan Mudah: Kod minimum, bersedia untuk diintegrasikan dalam beberapa minit.
• JQuery Validate Integration: berfungsi dengan lancar dengan plugin JQuery Validate yang popular.
• disesuaikan: Font kawalan, saiz, warna, dan warna latar belakang.
• berasaskan php: menjana captchas pada sisi pelayan, tiada API luaran yang diperlukan.

Demo:

Demo yang mempamerkan fungsi CAPTCHA tersedia (pautan ke demo akan pergi ke sini jika disediakan).

[imej demo Captcha akan pergi ke sini jika disediakan]

Muat turun:

Kod sumber lengkap boleh didapati di GitHub (pautan ke repo github akan pergi ke sini jika disediakan).

pelaksanaan:

Pelaksanaan CAPTCHA terdiri daripada komponen HTML, JQuery, dan PHP.

1. Html (menggunakan bootstrap):

<code class="language-html"><label class="" for="captcha">*Please enter the verification code shown below.</label>
<div id="captcha-wrap">
    <img src="/static/imghwm/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/imghwm/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"></code>

2. jQuery:

Kod jQuery ini mengendalikan Captcha Refresh dan pengesahan menggunakan AJAX. Ia memanfaatkan peraturan JQuery Validate Plugin

untuk pengesahan sisi pelayan. remote

<code class="language-javascript">$(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();
});</code>

3. Php (newCaptcha.php):

Skrip PHP ini menghasilkan imej CAPTCHA baru dan menyimpan kod dalam pemboleh ubah sesi.

<code class="language-php"><?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);
?></code>

4. Php (checkcaptcha.php):

Skrip ini mengesahkan input CAPTCHA pengguna terhadap pemboleh ubah sesi.

<code class="language-php"><?php
session_start();

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

ingat untuk menyesuaikan laluan fail dan tetapan fon untuk memadankan struktur projek anda. Ini menyediakan sistem yang berfungsi, walaupun asas, CAPTCHA. Untuk keselamatan yang lebih tinggi, pertimbangkan untuk menggunakan penyelesaian yang lebih mantap seperti Recaptcha.

Atas ialah kandungan terperinci Mudah jQuery ajax php captcha - persediaan 2 minit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!