简易jQuery AJAX PHP验证码– 2分钟设置

在几分钟内设置可正常使用的AJAX验证码。 当您需要超级快速的验证码来处理表单而又不会遇到难以理解的reCaptcha之类的问题时，此功能适用于这种情况。 验证Captcha系统并非难事，它只是提供了一个由PHP生成的非常基本的验证码。 但是，使用此方法确实可以选择合适的大小，字体，颜色，背景色。 我还通过远程ajax请求将其与jQuery Validate插件集成在一起，以检查验证码是否正确。

特征

• 与jQuery Validate插件集成。
• 自定义验证码字体，大小，颜色，背景色。
• 由PHP唯一生成的后端。
• 无需麻烦，只需几秒钟即可完成设置，无需API密钥。

演示版

该演示基于我使用jQuery，jQuery.validate，Require.js，Backbone.js，Bootstrap创建的轻量级引导程序。

验证码演示

下载

在GitHub上有一个完整的工作下载包。 随心所欲地添加星叉。 :)

在GITHUB上查看

设定

的HTML

使用Bootstrap标记。

*Please enter the verication code shown below.

  
  

    
   
    
   
   

  
  

jQuery的

验证是从WEBAPP对象运行的，该对象缓存DOM元素并设置事件以进行验证码刷新。 我已经使用远程验证规则来使用ajax检查验证码是否正确。

$(function()
{

    //jQuery Captcha Validation
    WEBAPP = {

        settings: {},
        cache: {},

        init: function() {

            //DOM cache
            this.cache.$form = $('#captcha-form');
            this.cache.$refreshCaptcha = $('#refresh-captcha');
            this.cache.$captchaImg = $('img#captcha');
            this.cache.$captchaInput = $(':input[name="captcha"]');

            this.eventHandlers();
            this.setupValidation();

        },

        eventHandlers: function() {

            //generate new captcha
            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: {
                    "firstname": {
                        "required": true
                    },
                    "lastname": {
                        "required": true
                    },
                    "email": {
                        "required": true
                    },
                    "captcha": {
                        "required": true,
                        "remote" :
                        {
                          url: '/php/checkCaptcha.php',
                          type: "post",
                          data:
                          {
                              code: function()
                              {
                                  return WEBAPP.cache.$captchaInput.val();
                              }
                          }
                        }
                    }
                },
                messages: {
                    "firstname": "Please enter your first name.",
                    "lastname": "Please enter your last name.",
                    "email": {
                        "required": "Please enter your email address.",
                        "email": "Please enter a valid email address."
                    },
                    "captcha": {
                        "required": "Please enter the verifcation code.",
                        "remote": "Verication code incorrect, please try again."
                    }
                },
                submitHandler: function(form)
                {
                    /* -------- AJAX SUBMIT ----------------------------------------------------- */

                    var submitRequest = $.ajax({
                         type: "POST",
                         url: "/php/dummyScript.php",
                         data: {
                            "data": WEBAPP.cache.$form.serialize()
                        }
                    });

                    submitRequest.done(function(msg)
                    {
                        //success
                        console.log('success');
                        $('body').html('
captcha correct, submit form success!
');
                    });

                    submitRequest.fail(function(jqXHR, textStatus)
                    {
                        //fail
                        console.log( "fail - an error occurred: (" + textStatus + ")." );
                    });

                }

            });

        }

    }

    WEBAPP.init();

});

的PHP

newCaptcha.php文件仅基于提供的字体和颜色设置创建一个新的验证码图像。 它将验证码代码存储在名为captcha的PHP会话变量中。

< ?php
session_start();

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

$_SESSION['captcha'] = $string; //store the captcha

$dir = '../fonts/';
$image = imagecreatetruecolor(165, 50); //custom image size
$font = "PlAGuEdEaTH.ttf"; // custom font style
$color = imagecolorallocate($image, 113, 193, 217); // custom color
$white = imagecolorallocate($image, 255, 255, 255); // custom background color
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);

?>

checkCaptcha.php –这很简单。 它检查代码是否匹配并将结果返回到前端。

< ?php
session_start();

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

我希望这可以帮助您设置快速验证码！ 如果是这样，请发表评论！ :)

From: https://www.sitepoint.com/easy-jquery-php-captcha/