将reCaptcha实现为javascript验证表单

时间:2013-03-22 23:28:18

标签: javascript forms validation recaptcha

我有以下表单,我使用javascript来验证表单字段 onsubmit 。如何在此表单中实施 reCaptcha ?我是否必须更改 onsubmit 值来执行带有recaptcha验证和字段验证的php文件?这是目前的形式:

    <form id="breeders" method="post" action="add-breeder?process" onsubmit="return validateForm()">
    Name:<br />
    <input type="text" id="name" name="name" /><br /><br />
    County:<br />
    <select id="address" name="address">
  <option value="Antrim">Antrim</option>
<option value="Armagh">Armagh</option>
</select><br/>
    <br />Please select a point on the map nearest to you.<br />
    <input type="hidden" id="lat" name="lat" /><br />
    <input type="hidden" id="lng" name="lng" />
    Phone No:<br />
    <input type="text" id="phone" name="phone" /><br /><br />
    Description:<br />
    <textarea cols="40" rows="5" name="breeds" id="breeds" /></textarea><br /><br />

    <input type="submit" value="Add Breeder" class="btn btn-primary btn-large" />
    </form>

   </div>


<script type="text/javascript">
       function validateForm()
    {
    var x=document.forms["breeders"]["name"].value;
    if (x==null || x=="")
      {
      alert("Name is required.");
      return false;
      }

      var x=document.forms["breeders"]["address"].value;
    if (x==null || x=="")
      {
      alert("Location is required.");
      return false;
      }

       var x=document.forms["breeders"]["phone"].value;
    if (x==null || x=="")
      {
      alert("Contact phone number is required.");
      return false;
      } 

        var x=document.forms["breeders"]["breeds"].value;
    if (x==null || x=="")
      {
      alert("A description of Breeds is required.");
      return false;
      }  

        var x=document.forms["breeders"]["lat"].value;
    if (x==null || x=="")
      {
      alert("You have to select a location on the map.");
      return false;
      }

         var x=document.forms["breeders"]["lng"].value;
    if (x==null || x=="")
      {
      alert("You have to select a location on the map.");
      return false;
      }
    }
    </script>

欢迎任何帮助,欢呼!

修改

我已在表单上实现了reCaptcha,但是当我单击提交时,操作似乎没有执行。文件“submit.php”位于同一个根目录中。这是带有reCaptcha的表单代码:

        <form id="breeders" method="post" action="submit.php" onsubmit="return validateForm()">
    Name:<br />
    <input type="text" id="name" name="name" /><br /><br />
    County:<br />
    <select id="address" name="address">
  <option value="Antrim">Antrim</option>
<option value="Armagh">Armagh</option>
</select><br/>
    <br />Please select a point on the map nearest to you.<br />
    <input type="hidden" id="lat" name="lat" /><br />
    <input type="hidden" id="lng" name="lng" />
    Phone No:<br />
    <input type="text" id="phone" name="phone" /><br /><br />
    Description:<br />
    <textarea cols="40" rows="5" name="breeds" id="breeds" /></textarea><br /><br /><br /><br /><br />

<script type="text/javascript"
   src="https://www.google.com/recaptcha/api/challenge?k=MY_PUBLIC_KEY">
 </script>
 <noscript>
   <iframe src="https://www.google.com/recaptcha/api/noscript?k=MY_PUBLIC_KEY"
       height="300" width="500" frameborder="0"></iframe><br>
 </noscript>

    <br/><input type="submit" value="Add Breeder" class="btn btn-primary btn-large" />
    </form>

   </div>

以下是“submit.php”文件的内容:

<?php if (!defined('APPLICATION')) exit(); ?>

<?php
 require_once('recaptchalib.php');
 $privatekey = "MY_PRIVATE_KEY";
 $resp = recaptcha_check_answer ($privatekey,
                                 $_SERVER["REMOTE_ADDR"],
                                 $_POST["recaptcha_challenge_field"],
                                 $_POST["recaptcha_response_field"]);
 if (!$resp->is_valid) {
   // What happens when the CAPTCHA was entered incorrectly
   die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
        "(reCAPTCHA said: " . $resp->error . ")");
 } else {
   // Your code here to handle a successful verification
 }
 ?>

  <?php
//connection to my database details etc.
?>


  <?php
if(isset($_GET['process']))
{
$query = "Insert INTO `markers` (name, address, lat, lng, phone, breeds) values('$_POST[name]', '$_POST[address]','$_POST[lat]','$_POST[lng]', '$_POST[phone]', '$_POST[breeds]')";
//echo $query; exit;
$result = mysql_query($query) or die(mysql_error());
if(!$result)
{
$msg = "not Inserted";
}
else
{
$msg = "Inserted";
header("location:breeders?m=".$msg);
}
}

?>

“recaptchalib.php也在同一个文件夹中。您可以在此处查看表单:http://poultry.ie/add-breeder

2 个答案:

答案 0 :(得分:0)

当您提交数据时,CAPTCHA必须在服务器端验证,以确保其安全。您可以在Javascript中保留验证,只要您知道它根本没有强制执行,并且没有什么可以阻止恶意用户将任何荒谬的垃圾发送到他们想要的服务器端脚本。在可能的情况下验证服务器端通常是一种好的做法,但这取决于您正在进行验证的好处。

答案 1 :(得分:0)

Goopps!读出这个http://code.google.com/p/recaptcha/wiki/HowToSetUpRecaptcha
主要在第2部分:安装,然后你的选择!

迎接错误

在表单中更改action="submit.php?process=1" 你有defined('APPLICATION')吗?

<强>更新

Insert INTO `markers`  to Insert INTO markers 
(in the Above Note: "`" )

尝试回应知道执行停止的地方!