如何将表单从 google 验证码 v2 升级到验证码 v3

Question

我在一个页面上有两个表单，我目前正在使用 google 验证码 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>

Answer 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>

如何将表单从 google 验证码 v2 升级到验证码 v3

How to upgrade forms from google captcha v2 to captcha v3

html

javascript

jquery

captcha

recaptcha