代码之家 › 专栏 › 技术社区 › LondonGuy

将RecaptchaAjax API实现到已经使用Ajax的现有Web窗体

codeigniter ajax jquery javascript php

LondonGuy · 技术社区 · 15 年前

我在主页上有一个注册表单,它使用服务器端验证和Ajax,所以在验证时我的页面不会刷新。

当所有验证通过后,我的页面将被带到一个注册的.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);
}

现在我想必须有一种简单的方法来将recaptchajax API实现到我当前的表单中。一开始我试图补充 onclick="showRecaptcha('recaptcha_div');" 在我的输入类型=提交所在的表单末尾,这不起作用。

我表格的结尾

    <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网站上的说明,到目前为止还没有运气。代码片段,任何有用的建议。我很感激。

谢谢

1 回复 | 直到 13 年前

BBonifield 15 年前

你研究过他们的JSLibAPI引用吗? 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;
         }
       }
     );
   }