php - 将 reCaptcha ajax api 实现到已使用 ajax 的现有 Web 表单

Question

我的主页上有一个注册表单，它使用服务器端验证和 ajax，因此我的页面在验证时不会刷新。

当所有验证都通过后，我的页面将转到一个 Registered.html，目前它是一个临时页面。稍后它将成为一个帐户区域。

我想要什么

我想在实际表单验证之后进行最后一步，这将是我的 reCaptcha 验证。我希望 reCaptcha 弹出 twitter 风格或者只是替换 facebook 风格的表单字段，而不是在验证后提交表单。

只有在验证码验证成功后才会提交表单。我提供了下面的代码，如果有人能建议我实现此目的的最佳方法，我将非常感激。我现在正处于一个迷茫的阶段。

错误检查，在最底部您可以看到 echo 语句，该语句在成功验证后将用户发送到 Registered.html

<?php

// we check if everything is filled in

if(empty($_POST['first_name']) || empty($_POST['last_name']) || empty($_POST['email']) || empty($_POST['password']))
{
 die(msg(0,"All the fields are required"));
}


// is the sex selected?

if(!(int)$_POST['sex'])
{
 die(msg(0,"You have to select your sex"));
}


// is the birthday selected?

if(!(int)$_POST['day'] || !(int)$_POST['month'] || !(int)$_POST['year'])
{
 die(msg(0,"You have to fill in your birthday"));
}


// is the email valid?

if(!(preg_match("/^[\.A-z0-9_\-\+]+[@][A-z0-9_\-]+([.][A-z0-9_\-]+)+[A-z]{1,4}$/", $_POST['email'])))
 die(msg(0,"You haven't provided a valid email"));



// Here I must put your code for validating and escaping all the input data,
// inserting new records in your DB and echo-ing a message of the type:

// echo msg(1,"/member-area.php");

// where member-area.php is the address on my site where registered users are
// redirected after registration.




echo msg(1,"registered.html");


function msg($status,$txt)
{
 return '{"status":'.$status.',"txt":"'.$txt.'"}';
}
?>

JavaScript

$(document).ready(function () {

    $('#fhjoinForm').submit(function (e) {

        register();
        e.preventDefault();

    });

});


function register() {
    hideshow('loading', 1);
    error(0);

    $.ajax({
        type: "POST",
        url: "submit.php",
        data: $('#fhjoinForm').serialize(),
        dataType: "json",
        success: function (msg) {

            if (parseInt(msg.status) == 1) {
                window.location = msg.txt;
            } else if (parseInt(msg.status) == 0) {
                error(1, msg.txt);
            }

            hideshow('loading', 0);
        }
    });

}


function hideshow(el, act) {
    if (act) $('#' + el).css('visibility', 'visible');
    else $('#' + el).css('visibility', 'hidden');
}

function error(act, txt) {
    hideshow('error', act);
    if (txt) $('#error').html(txt);
}   

现在我想必须有一个简单的方法来将 reCaptcha ajax api 实现到我当前的表单中。起初，我尝试将 onclick="showRecaptcha('recaptcha_div');" 添加到我的输入 type=submit 所在的表单末尾，但这不起作用。

我的表格结束

    <td><input type="submit" class="joinButton" value="Join Us" /><img id="loading" src="<?php echo base_url()?>images/join/ajax-loader.gif" alt="working.." /></td>
    <div id="recaptcha_div"></div>
    </tr>

我已按照 recaptcha 网站上的说明进行操作，但到目前为止还没有成功。代码片段，建议任何都会有帮助的。我很感激。

谢谢

Answer 1

您查看过他们的 JS lib API 引用吗？ http://wiki.recaptcha.net/index.php/Overview#AJAX_API

Recaptcha.create("apikey",
  "placeholder_div",
  {
    theme: "red",
    callback: function(){
      // what to do on success, like maybe submit your form
    }
  }
);

您可以在需要的地方创建 reCAPTCHA 元素并添加一些回调来执行您想要的操作。

关于您关于在哪里放置 recaptcha 创建代码的评论，您可以将其放在 AJAX 请求的回调中

   if(parseInt(msg.status)==1)
   {
     Recaptcha.create("apikey",
       "placeholder_div",
       {
         theme: "red",
         callback: function(){
           // what to do on success
           window.location=msg.txt;
         }
       }
     );
   }