如何修复jQuery界面中‘reCAPTCHA占位元素必须为元素或ID’错误？

这个问题已经被讨论过很多次，但现有解决方案都不适用，我也搞不清错误到底怎么来的。报错信息如下：

VM12505 recaptcha__en.js:201 not intercepted (in promise) Error: reCAPTCHA placeholder element must be an element or identifier
at VM12505 recaptcha__en.js:201:504
with onloadcallback (template_e1fea8b24e0871ae01c20a8dc3de3052_v1.js?1685481313306076:110:14)

相关代码：

var onloadCallback = function () {
  let mysitekey = 'key';

  grecaptcha.render('recaptcha1', {
    'sitekey': 'key',
    'callback': onRecaptchaSuccess,
    'expired-callback': onRecaptchaExpired,
    'timeout': 120000
  });

  grecaptcha.render('recaptcha2', {
    'sitekey': 'key',
    'callback': onRecaptchaSuccess2,
    'expired-callback': onRecaptchaExpired,
    'timeout': 120000
  });
  grecaptcha.render('recaptcha3', {
    'sitekey': 'key',
    'callback': onRecaptchaSuccess3,
    'expired-callback': onRecaptchaExpired,
    'timeout': 120000, // 此处多了一个逗号，建议删除
  });
};

var isRecaptchaChecked = false; // 标记reCAPTCHA是否通过验证

function onRecaptchaSuccess(response) {
  console.log('reCAPTCHA验证通过1.');
  console.log('响应:', response);
  isRecaptchaChecked = true;
}

function onRecaptchaSuccess2(response) {
  console.log('reCAPTCHA验证通过2.');
  console.log('响应:', response);
  isRecaptchaChecked = true;
}

function onRecaptchaSuccess3(response) {
  console.log('reCAPTCHA验证通过3.');
  console.log('响应:', response);
  isRecaptchaChecked = true;
}

function onRecaptchaExpired() {
  console.log('reCAPTCHA验证已过期.');
  isRecaptchaChecked = false;
}

我试过修改代码，但还是报同样的错。

问题根源与解决办法 #

这个错误的核心是：调用grecaptcha.render时，传入的第一个参数（占位符ID）找不到对应的DOM元素，或者元素还未加载完成。

• 检查HTML容器是否存在
  确保页面中存在三个对应ID的空div容器，ID需完全匹配（大小写敏感）：

  <div id="recaptcha1"></div>
  <div id="recaptcha2"></div>
  <div id="recaptcha3"></div>
  

• 确保DOM加载完成后再渲染
  reCAPTCHA的onload回调可能在DOM未完全加载时触发，导致找不到元素。可以把渲染逻辑包裹在DOM加载完成事件中：

  var onloadCallback = function () {
    document.addEventListener('DOMContentLoaded', function() {
      // 先检查元素是否存在
      const containers = ['recaptcha1', 'recaptcha2', 'recaptcha3'];
      containers.forEach(id => {
        if (!document.getElementById(id)) {
          console.error(`找不到reCAPTCHA容器：${id}`);
          return;
        }
      });
  
      // 执行渲染逻辑
      grecaptcha.render('recaptcha1', {
        'sitekey': '你的实际sitekey',
        'callback': onRecaptchaSuccess,
        'expired-callback': onRecaptchaExpired,
        'timeout': 120000
      });
  
      // 另外两个recaptcha的渲染逻辑同理
      grecaptcha.render('recaptcha2', {
        'sitekey': '你的实际sitekey',
        'callback': onRecaptchaSuccess2,
        'expired-callback': onRecaptchaExpired,
        'timeout': 120000
      });
  
      grecaptcha.render('recaptcha3', {
        'sitekey': '你的实际sitekey',
        'callback': onRecaptchaSuccess3,
        'expired-callback': onRecaptchaExpired,
        'timeout': 120000
      });
    });
  };
  

• 修正语法错误
  第三个render配置里最后一个属性多了一个逗号（'timeout': 120000,），虽然大部分浏览器能兼容，但可能引发解析异常，建议删除该逗号。

• 验证sitekey正确性
  确保代码中的'key'替换成Google reCAPTCHA后台申请的有效sitekey，无效sitekey也可能间接引发异常。

内容的提问来源于stack exchange，提问作者Сергей Мурин