invisible reCaptcha v2单组件能否校验同页多个表单

结论先行：单页部署1个<ReCAPTCHA />组件即可覆盖所有表单的安全校验，无需为每个表单单独部署组件。

invisible reCAPTCHA v2的校验逻辑是和当前页面会话、用户全页行为轨迹绑定的，而非和某一个具体表单DOM节点绑定，单实例完全可以支撑同页多表单的校验需求，重复部署多实例反而会引发JS冲突、重复采集行为数据、令牌互相覆盖的问题，拉低校验通过率。

具体配置逻辑如下：

• 页面全局仅引入一次reCAPTCHA官方JS资源，仅渲染1个绑定对应站点密钥的invisible reCAPTCHA实例，将组件挂载到页面公共节点即可，无需嵌入某一个表单内部。
• 拦截所有表单的默认提交行为：用户点击任意表单的提交按钮时，先调用实例的grecaptcha.execute()方法触发静默校验，不要直接发提交请求。
• 待校验完成拿到返回的g-recaptcha-response令牌后，动态将令牌插入当前待提交表单的请求参数中（可以临时插入隐藏域、或放到AJAX请求的参数体中），再发起对应表单的提交请求。
• 每完成一次表单提交（无论提交成功还是失败），都需要调用grecaptcha.reset()方法重置reCAPTCHA实例状态，避免上一次生成的令牌过期，影响后续其他表单的提交校验。

避坑提示：如果你使用的是前端框架封装的<ReCAPTCHA />组件，只要组件全局挂载后可以对外暴露execute、reset方法供所有表单的提交逻辑调用，就完全满足使用要求。如果所用的封装组件强依赖和表单的父子绑定关系、无法跨表单调用方法，才需要给每个表单单独挂载实例，但这种方案性能更差，优先调整组件挂载位置用单实例方案。

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