HTMX表单提交前如何正确集成Google reCaptcha v3验证？

你的原有逻辑不生效的核心原因很明确：htmx:configRequest是同步事件，回调执行完成后HTMX会立刻组装参数发起请求，不会等待grecaptcha.execute()的异步Promise返回。等你拿到验证令牌的时候，请求早就发出去了，参数自然带不上去。

用HTMX原生提供的htmx:confirm事件处理异步前置逻辑是最稳妥的方案，这个事件就是专门为提交前需要异步校验、异步拉取参数的场景设计的，不需要额外写复杂的拦截逻辑。

1. 首先给需要校验的表单加data-recaptcha="true"标识，避免全站所有HTMX请求都被reCAPTCHA逻辑拦截，表单原有HTMX属性不需要改动：

<form id="form" hx-post="/page" hx-target="#content" data-recaptcha="true">
    <input id="recaptcha-token" type="hidden" name="ReCaptchaToken" />
    <button type="submit">Submit</button>
</form>

2. 写入事件监听逻辑，注意提前引入reCAPTCHA v3的官方脚本：

<!-- 替换成你自己的reCAPTCHA站点密钥 -->
<script src="https://www.google.com/recaptcha/api.js?render=替换为你的reCAPTCHA_site_key"></script>
<script>
document.body.addEventListener('htmx:confirm', async (e) => {
  // 跳过没有加reCAPTCHA标识的请求
  if (!e.detail.elt.hasAttribute('data-recaptcha')) return
  // 先阻止默认的立即发请求行为
  e.preventDefault()

  // 等待reCAPTCHA SDK加载完成，获取验证令牌
  await new Promise(resolve => grecaptcha.ready(resolve))
  const token = await grecaptcha.execute('替换为你的reCAPTCHA_site_key', {action: 'submit'})
  
  // 把令牌写入提前准备好的隐藏字段
  document.getElementById('recaptcha-token').value = token

  // 所有前置逻辑完成，手动触发请求发送
  e.detail.issueRequest()
})
</script>

• 不要尝试在htmx:configRequest回调里处理异步逻辑，这个事件的设计定位就是同步修改请求参数，没有内置对异步等待的支持
• reCAPTCHA v3的令牌有效期只有2分钟，不要在页面加载时就提前获取令牌存储，必须在用户触发提交的瞬间实时获取，避免令牌过期导致后端校验失败
• 如果需要防重复点击，可以在拿token的过程中给按钮加disabled状态，拿到结果后再恢复，避免用户重复点提交触发多次校验

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