成功验证验证码的事件侦听器答案

【问题标题】：Event listener for successful Captcha verification成功验证验证码的事件侦听器
【发布时间】：2021-07-24 15:35:01
【问题描述】：

我在我的网站中添加了一个 Re captcha v2，我想在它成功解决后调用一个函数，

到目前为止，我的代码如下所示：

<body>
  <div style='visibility: hidden;position:absolute;' class="g-recaptcha" data-sitekey="6Lf2yr4aAAAAAPt4qOYdNAJPAB53lCkcDn">
  </div>

  <button id='submit' onclick="show_captcha()">Submit data</button>

  <div id="stat"></div>

  <script>
    function show_captcha() {
      var btn=document.querySelector('#submit');
      var cap=document.querySelector('.g-recaptcha');
    
      btn.style.visibility='hidden';
      btn.style.position='absolute';
      cap.style.visibility='visible';
      cap.style.position='relative';
    }
    
    
    document.querySelector('.g-recaptcha').addEventListener('change', (event) => {
      console.log('here');
      var cap=document.querySelector('.g-recaptcha');
      data=['xyz',document.querySelector('#g-recaptcha-response').value.toString()];
    
      if(cap.value=='')
       return;
    
      //function after captcha is solved goes here
      
    });
    
  </script>
</body>

change 事件侦听器无法正常工作，那么我该如何实现我想要的呢？

【问题讨论】：

首先，我会将script 块放在body 标记内，例如，就在</body> 之前。
@IhorVyspiansky 哎呀抱歉我现在修好了 :)
@cakelover 确保隐藏 data-sitekey 实际密钥，如果它实际上是正在使用的 prod 密钥
@NagarajTantri 别担心这不是我确定的实际密钥
@cakelover 您可以尝试配置 reCAPTCHA 以在成功验证时提供回调，例如，stackoverflow.com/a/31689541/2224394

标签： javascript html recaptcha

【解决方案1】：

尝试使用成功验证的回调配置 reCAPTCHA。看看ReCaptcha v2 client side events

【讨论】：