Ruby on Rails表单验证错误后重置reCAPTCHA问题求助

问题根源 #

reCAPTCHA V2的响应令牌是一次性有效的，首次提交后就会失效。当前代码先验证reCAPTCHA再检查模型有效性，导致模型验证失败重渲染页面时，reCAPTCHA组件没有重置，再次提交时无法生成新的令牌，g-recaptcha-response参数为空，触发验证失败；同时reCAPTCHA的错误会覆盖其他表单验证错误。

解决方案 #

1. 调整控制器验证顺序，优先验证模型有效性 #

修改create方法，先检查用户模型是否有效，再验证reCAPTCHA，避免模型验证失败时消耗reCAPTCHA令牌：

def create
  @user = User.new(user_params)

  # 先验证模型，再验证reCAPTCHA
  if @user.valid? && verify_recaptcha(model: @user) && @user.save
    @user.send_activation_email
    flash[:info] = "Please check your email to activate your account"
    redirect_to root_url
  else
    # 若模型验证失败，移除可能存在的reCAPTCHA错误，避免覆盖表单提示
    @user.errors.delete(:recaptcha) if @user.errors.key?(:recaptcha) && !@user.valid?
    render 'new', status: :unprocessable_entity
  end
end

2. 页面重渲染时重置reCAPTCHA组件 #

在注册页面（new.html.erb）末尾添加JavaScript，确保页面加载时重置reCAPTCHA，强制用户重新完成验证：

<script>
document.addEventListener('DOMContentLoaded', function() {
  const recaptchaBox = document.querySelector('.g-recaptcha');
  if (recaptchaBox && window.grecaptcha) {
    grecaptcha.reset();
  }
});
</script>

3. 配置reCAPTCHA回调处理过期/验证状态 #

修改视图中的recaptcha_tags，添加回调函数处理令牌过期和验证完成的情况：

<center><%= recaptcha_tags callback: 'onRecaptchaSuccess', 'expired-callback': 'onRecaptchaExpired' %></center>

同时添加对应的JS函数：

<script>
function onRecaptchaSuccess(response) {
  // 可选：验证成功后启用提交按钮等操作
}

function onRecaptchaExpired() {
  if (window.grecaptcha) {
    grecaptcha.reset();
    alert('reCAPTCHA已过期，请重新验证');
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const recaptchaBox = document.querySelector('.g-recaptcha');
  if (recaptchaBox && window.grecaptcha) {
    grecaptcha.reset();
  }
});
</script>

效果验证 #

完成以上修改后：

• 表单字段错误时，重渲染页面会保留所有表单错误提示，且reCAPTCHA会被重置，用户需要重新勾选
• 只有当表单字段全部验证通过后，才会触发reCAPTCHA验证，避免令牌浪费
• 令牌过期时会自动重置并提示用户，确保提交时始终有有效令牌

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