簡単なjQuery ajax php captcha -2分セットアップ

このチュートリアルは、PHP、jQuery、およびBootstrapを使用して基本的なAjax Captchaを迅速に実装する方法を示しています。 あまり安全ではありませんが、自動化されたフォームの提出を防ぐためのシンプルでカスタマイズ可能なソリューションを提供します。 Recaptchaの複雑さなしに迅速で簡単なキャプチャが必要な状況に最適です。

主要な機能：

簡単なセットアップ：
• 最小コード、数分で統合する準備ができています。
jQuery検証統合：
• 人気のあるjQuery検証プラグインでシームレスに動作します。 カスタマイズ可能：
フォント、サイズ、色、背景の色を制御します。
• PHPベース：
サーバー側でキャプチャを生成し、外部APIは必要ありません。
• デモ：

キャプチャ機能を紹介するデモが利用可能です（提供されている場合はデモへのリンクはこちらに移動します）。 [CAPTCHAデモの画像は、提供されればここに行きます]

ダウンロード：

完全なソースコードはGithubで利用できます（Github Repoへのリンクは、提供されている場合はこちらに移動します）。

実装：

Captchaの実装は、HTML、jQuery、およびPHPコンポーネントで構成されています。

1。 HTML（Bootstrapを使用）：

2。 jQuery：

このjQueryコードは、Ajaxを使用してCaptchaの更新と検証を処理します。 サーバー側の検証のためのjQuery検証プラグインのルールをレバレッジします。

<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?x-oss-process=image/resize,p_40"  class="lazy" alt="Easy jQuery AJAX PHP Captcha - 2 minute setup " />
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  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" />

3。 php（newcaptcha.php）：

このPHPスクリプトは、新しいCaptcha画像を生成し、セッション変数にコードを保存します。

remote

4。 php（checkcaptcha.php）：

$(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();
});

このスクリプトは、セッション変数に対するユーザーのCAPTCHA入力を検証します。

プロジェクト構造に合わせてファイルパスとフォント設定を調整することを忘れないでください。 これは、基本的ではあるがキャプチャシステムを機能させます。 より高いセキュリティのために、Recaptchaのようなより堅牢なソリューションを使用することを検討してください。

以上が簡単なjQuery ajax php captcha -2分セットアップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。