谷歌隐形ReCaptcha在同一页中的多种形式 - PHP

我在我的php网站上关注这个隐形ReCaptcha文档：http://www.pinnacleinternet.com/installing-invisible-recaptcha/一切正常。但是同时在同一个页面上实现多个表单时，Captcha只能在第一个表单上工作，不知道第二个表单中发生了什么，我很想知道它是如何在单个页面中使用多个表单的。或者任何人都请为多种表单建议一份工作文档？谷歌隐形ReCaptcha在同一页中的多种形式 - PHP

//this is @Geordy's javascript portion modified according to jquery.validate 
    <script type="text/javascript"> 

    $().ready(function() { 
    var demo1Call = 0; 
    var demo2Call = 0; 

     // validate and submit 1st form 
     $("#demo-form1").validate({ 
      rules: { 

        pass: { 
        required: true, 
        pwcheck: true, 
        minlength: 5 
        }, 
      }, 
      messages: { 
        pass: { 
        required: "Please provide a password", 
        pwcheck: "<br />*Minimum length 8<br />*Maximum length 24<br />*Atleast a digit<br />*Atleast an upper case<br />*Atleast a lowercase<br />*Atleast a special character from these [email protected]#$%", 
        minlength: "Your password must be at least 5 characters long" 
        }, 
      }, 
      success: function(error){ 
       console.log("Successfully validated"); 
      }, 
      submitHandler: function(form) { 

       demo1Call++; 
       if(demo1Call==1){ 
        widgetId1 = grecaptcha.render('recaptcha1', { 
        'sitekey' : '<?php echo $config['client-key']; ?>', 
        'callback' : onSubmit1, 
        'size' : "invisible" 
        }); 
       } 
       grecaptcha.reset(widgetId1); 
       grecaptcha.execute(widgetId1); 
      }, 
     }); 

     //validate and submit 2nd form 
     $("#demo-form2").validate({ 
      rules: { 

        pass: { 
        required: true, 
        pwcheck: true, 
        minlength: 5 
        }, 
      }, 
      messages: { 
        pass: { 
        required: "Please provide a password", 
        pwcheck: "<br />*Minimum length 8<br />*Maximum length 24<br />*Atleast a digit<br />*Atleast an upper case<br />*Atleast a lowercase<br />*Atleast a special character from these [email protected]#$%", 
        minlength: "Your password must be at least 5 characters long" 
        }, 
      }, 
      success: function(error){ 
       console.log("Successfully validated"); 
      }, 
      submitHandler: function(form) { 

       demo2Call++; 
       if(demo2Call==1){ 
        widgetId2 = grecaptcha.render('recaptcha2', { 
        'sitekey' : '<?php echo $config['client-key']; ?>', 
        'callback' : onSubmit2, 
        'size' : "invisible" 
        }); 
       } 
       grecaptcha.reset(widgetId2); 
       grecaptcha.execute(widgetId2); 
      }, 
     }); 



    }); 

    $.validator.addMethod("pwcheck", function(value) { 
     var pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[[email protected]#$%])[[email protected]#$%]{8,24}$/; 
     return pattern.test(value); 
    }); 

function onSubmit1(token){ 
     document.getElementById("demo-form1").submit(); 
}; 

function onSubmit2(token){ 
     document.getElementById("demo-form2").submit(); 
}; 

</script>

来源

2017-05-09 Riyas Muhammed

对我来说，下面的代码工作

<?php 
$config = require('config.php'); 
?> 
<html> 
    <head> 
    <title>reCAPTCHA demo</title> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <!-- Boostrap Validator --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js" ></script> 

    <script type="text/javascript"> 
    $(document).ready(function(){ 
     var demo1Call = 0; 
     var demo2Call = 0; 

     $('#demo-form1').validator().on('submit', function (e) { 
      if (e.isDefaultPrevented()) { 
      // handle the invalid form... 
      console.log("validation failed"); 
      } else { 
      // everything looks good! 
      demo1Call++; 

      e.preventDefault();   
      console.log("validation success"); 

      if(demo1Call==1) 
      { 
       widgetId1 = grecaptcha.render('recaptcha1', { 
       'sitekey' : '<?php echo $config['client-key']; ?>', 
       'callback' : onSubmit1, 
       'size' : "invisible" 
       }); 
      } 

      grecaptcha.reset(widgetId1); 

      grecaptcha.execute(widgetId1);   
      } 
     }); 

     $('#demo-form2').validator().on('submit', function (e) { 
      if (e.isDefaultPrevented()) { 
      // handle the invalid form... 
      console.log("validation failed"); 
      } else { 
      // everything looks good! 
      demo2Call++; 

      e.preventDefault(); 
      console.log("validation success"); 

      if(demo2Call==1) 
      { 
       widgetId2 = grecaptcha.render('recaptcha2', { 
       'sitekey' : '<?php echo $config['client-key']; ?>', 
       'callback' : onSubmit2, 
       'size' : "invisible" 
       }); 
      } 

      grecaptcha.reset(widgetId2); 

      grecaptcha.execute(widgetId2); 

      } 
     }); 

    }); 

    function onSubmit1(token){ 
      document.getElementById("demo-form1").submit(); 
    }; 

    function onSubmit2(token){ 
      document.getElementById("demo-form2").submit(); 
    }; 

    </script> 


    </head> 
    <body> 
    <div class="container"> 
    <br> 
     <div class="row"> 
      <div class="col-md-5 col-md-offset-3"> 
       <form id="demo-form1" data-toggle="validator" role="form" action="admin.php" method="POST" > 
        <div class="form-group"> 
         <label for="inputName" class="control-label">Name</label> 
         <input type="text" class="form-control" id="inputName" placeholder="Geordy James" required/> 
        </div> 
        <div id='recaptcha1' ></div> 
        <button class="btn btn-block btn-primary" type="submit">Submit</button> 
       </form> 
      </div> 
     </div> 

    <br> 
     <div class="row"> 
      <div class="col-md-5 col-md-offset-3"> 
       <form id="demo-form2" data-toggle="validator" role="form" action="admin2.php" method="POST" > 
        <div class="form-group"> 
         <label for="inputName" class="control-label">Name</label> 
         <input type="text" class="form-control" id="inputName" placeholder="Geordy James" required/> 
        </div> 
        <div id='recaptcha2' ></div> 
        <button class="btn btn-block btn-primary" type="submit">Submit</button> 
       </form> 
      </div> 
     </div> 
    </div> 
    <script src="https://www.google.com/recaptcha/api.js" async defer ></script> 
    </body> 
</html>

我用谷歌非官方隐形的reCAPTCHA PHP库在这个程序，你可以从https://github.com/geordyjames/google-Invisible-reCAPTCHA下载。如果此方法不适用于您，请在下面评论。

来源

2017-05-10 11:59:40

谢谢，它的真正工作正常，现在我可以在看不见的验证码单页创建多个形式，但是有一两件事我注意到验证码图像窗口不能重新打开，如果有人通过点击关闭外，看到这里http://recordit.co/cTA8RClYD5 –

@RiyasMuhammed我更新了代码，它会正常工作。该错误的主要原因是grecaptcha.render被尝试执行多次。我通过定义全局变量demo1Call来阻止它，以检查函数执行时间，从而防止grecaptcha.render多次执行。 –

哇，你集会摇摆!!!!!现在完美工作:)感谢Geordy。我正在使用jQuery.validate，只是相应地修改了代码，并且还可以正常使用jQuery.validate。 –

谷歌隐形ReCaptcha在同一页中的多种形式 - PHP

回答

相关问题