基于Recaptcha成功与超时控制按钮启用/禁用的JS代码失效问题

嘿，我完全懂你现在的崩溃感！你的代码在验证成功时能正常启用按钮，但漏掉了reCAPTCHA超时和重置场景下的处理逻辑——这就是问题所在啦。

问题根源 #

你当前只用到了reCAPTCHA的data-callback（验证成功触发），但它还有两个关键回调没用到：

• data-expired-callback：验证码超时失效时触发
• data-reset-callback：用户手动刷新验证码时触发

这两个场景下，按钮都应该被重新禁用，但你的代码没有处理这些情况。

修复方案 #

我们可以把禁用按钮的逻辑抽成独立函数，然后给reCAPTCHA容器加上这两个回调属性，让超时和重置时自动调用禁用逻辑。

修改后的HTML代码

<div class="g-recaptcha" 
     data-sitekey="LALALALALAL" 
     data-callback="enableBtn"
     data-expired-callback="disableBtn"
     data-reset-callback="disableBtn"></div> <br /> 
<button id="getJSON" type="button" class="btn btn-primary" disabled>Save Form</button>

注意：给按钮默认加上disabled属性，确保页面加载时就是禁用状态，比JS控制更可靠。

修改后的JavaScript代码

<script>
// 验证成功时启用按钮
function enableBtn() {
  document.getElementById('getJSON').disabled = false;
}

// 超时/重置验证码时禁用按钮
function disableBtn() {
  document.getElementById('getJSON').disabled = true;
}
</script>

为什么这样有效？ #

1. 当reCAPTCHA超时失效，data-expired-callback会触发disableBtn，把按钮重新禁用
2. 当用户手动刷新验证码（比如点击验证码右下角的刷新图标），data-reset-callback也会触发disableBtn
3. 拆分独立函数后，逻辑更清晰，也避免了原代码里没必要的判断（因为回调触发时机已经明确了应该执行的操作）

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