如何用JavaScript在单页多表单中实现互不干扰的Google CAPTCHA实例

我完全懂你遇到的这个头疼问题——单页里两个表单的reCAPTCHA互相干扰，提交一个时另一个的错误提示乱跳。其实核心就是要把每个表单的reCAPTCHA实例完全隔离，从渲染、回调到提交验证都绑定到各自的表单上，下面给你一步步的解决方案：

1. 给每个表单和CAPTCHA元素加唯一标识 #

首先在HTML里，给两个表单、对应的CAPTCHA容器、存储token的隐藏字段都加上唯一ID，确保它们能被精准区分：

<!-- 表单1 -->
<form id="form-1" action="/submit-form-1" method="POST">
  <!-- 表单1的其他字段 -->
  <input type="text" name="name" placeholder="姓名" required>
  <!-- 表单1的错误提示容器 -->
  <p class="form-error form-1-error"></p>
  <!-- 表单1的reCAPTCHA容器 -->
  <div id="captcha-container-1"></div>
  <!-- 存储表单1的reCAPTCHA token -->
  <input type="hidden" id="captcha-token-1" name="g-recaptcha-response">
  <button type="submit">提交表单1</button>
</form>

<!-- 表单2 -->
<form id="form-2" action="/submit-form-2" method="POST">
  <!-- 表单2的其他字段 -->
  <input type="email" name="email" placeholder="邮箱" required>
  <!-- 表单2的错误提示容器 -->
  <p class="form-error form-2-error"></p>
  <!-- 表单2的reCAPTCHA容器 -->
  <div id="captcha-container-2"></div>
  <!-- 存储表单2的reCAPTCHA token -->
  <input type="hidden" id="captcha-token-2" name="g-recaptcha-response">
  <button type="submit">提交表单2</button>
</form>

2. 初始化独立的reCAPTCHA实例 #

用grecaptcha.render分别渲染两个实例，每个实例绑定专属的回调函数，把token存入对应表单的隐藏字段，彻底避免共用逻辑：

// 表单1的reCAPTCHA回调：仅更新表单1的token
function onCaptchaSuccessForm1(token) {
  document.getElementById('captcha-token-1').value = token;
  // 验证成功后清空当前表单的错误提示
  document.querySelector('.form-1-error').textContent = '';
}

// 表单2的reCAPTCHA回调：仅更新表单2的token
function onCaptchaSuccessForm2(token) {
  document.getElementById('captcha-token-2').value = token;
  document.querySelector('.form-2-error').textContent = '';
}

// 页面加载完成后初始化两个独立实例
window.onload = function() {
  // 初始化表单1的reCAPTCHA
  grecaptcha.render('captcha-container-1', {
    'sitekey': '你的站点密钥',
    'callback': onCaptchaSuccessForm1
  });

  // 初始化表单2的reCAPTCHA
  grecaptcha.render('captcha-container-2', {
    'sitekey': '你的站点密钥',
    'callback': onCaptchaSuccessForm2
  });
};

3. 隔离表单提交的验证逻辑 #

关键一步：给每个表单绑定独立的提交事件，只验证当前表单的reCAPTCHA状态，完全不涉及另一个表单的逻辑：

// 处理表单1的提交
document.getElementById('form-1').addEventListener('submit', function(e) {
  const token = document.getElementById('captcha-token-1').value;
  const errorEl = this.querySelector('.form-1-error');
  
  // 仅检查当前表单的token，不存在则阻止提交并触发验证
  if (!token) {
    e.preventDefault();
    grecaptcha.execute(grecaptcha.getWid('captcha-container-1'));
    errorEl.textContent = '请完成验证码验证后提交';
    return;
  }
  
  // 有token则正常提交，无需管表单2的状态
});

// 处理表单2的提交
document.getElementById('form-2').addEventListener('submit', function(e) {
  const token = document.getElementById('captcha-token-2').value;
  const errorEl = this.querySelector('.form-2-error');
  
  if (!token) {
    e.preventDefault();
    grecaptcha.execute(grecaptcha.getWid('captcha-container-2'));
    errorEl.textContent = '请完成验证码验证后提交';
    return;
  }
});

为什么之前的方法没起效？ #

你之前创建了cap和caps两个函数，但可能没做到完全隔离：比如回调函数可能还是把token存到了同一个字段，或者提交事件没有针对性地只验证当前表单的CAPTCHA，导致验证逻辑误触了另一个表单的错误提示。

按照上面的方法，每个表单的reCAPTCHA从渲染到验证都完全绑定到自身，就不会出现提交一个表单时触发另一个错误的问题了。

内容的提问来源于stack exchange，提问作者chap man