谷歌隱形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

回答

相關問題