如何将表单从谷歌验证码 v2 升级到验证码 v3答案

【问题标题】：How to upgrade forms from google captcha v2 to captcha v3如何将表单从谷歌验证码 v2 升级到验证码 v3
【发布时间】：2021-04-14 05:38:45
【问题描述】：

我在一个页面上有两个表单，我目前正在使用谷歌验证码 v2，但我想将表单升级到验证码 v3，有没有简单的方法可以做到这一点。

从我读到的文档中，使用此代码将起作用，但它仅适用于一种形式它忽略了我第一次单击检查表单上所有必填字段的操作。

<script>
      function onClick(e) {
        e.preventDefault();
        grecaptcha.ready(function() {
          grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {
              // Add your logic to submit to your backend server here.
          });
        });
      }
  </script>

<form role='form' method='POST' id='myForm' enctype='multipart/form-data' class='hiddenContent myForm2'>
    <center><div id='myCaptchaDiv1'></div></center> 
    <div class='form-row'> 
        <div class='col-12' id='btn-subtmit'>  
          <button class='btn btn-primary btn-controls'>Submit <i class='fas fa-check'></i></button>
        </div>
    </div>    
</form>


<form role='form' method='POST' id='myForm' enctype='multipart/form-data' class='hiddenContent myForm2'>
    <center><div id='myCaptchaDiv2'></div></center> 
    <div class='form-row'> 
        <div class='col-12' id='btn-subtmit'>  
          <button class='btn btn-primary btn-controls'>Submit <i class='fas fa-check'></i></button>
        </div>
    </div>    
</form>

    <script type="text/javascript">
    var CaptchaCallback = function() {
        grecaptcha.render('myCaptchaDiv1', {'sitekey' : 'myoid'});
        grecaptcha.render('myCaptchaDiv2', {'sitekey' : 'myoid'});
    };
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>

【问题讨论】：

标签： javascript html jquery recaptcha captcha

【解决方案1】：

您是否为两种表单都添加了事件侦听器？表单必须具有唯一的 ID（您将它们都发布为“myForm”），并确保注册 onClick 回调，如下所示：

const form1 = document.getElementById('myForm1');
const form2 = document.getElementById('myForm2');
form1.addEventListener('submit', onClick);
form2.addEventListener('submit', onClick);

您可能要做的任何表单验证（检查必填字段），您可以在之前 grecaptcha.ready(...) 进行。一个例子：

<script>
      function onClick(e) {
        e.preventDefault();

        // DO FIELD CHECKS. If invalid, then return;
        ...
        grecaptcha.ready(function() {
          grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {
              // Add your logic to submit to your backend server here.
          });
        });
      }
</script>

【讨论】：