如何结合jQuery Validate插件使用最新版隐形Google reCAPTCHA？

我之前也碰到过这个场景，官方示例的按钮绑定方式确实不太适配表单提交（尤其是回车触发的情况），下面是我验证有效的实现方案，核心思路是拦截表单的submit事件，先通过jQuery Validate的字段验证，再触发隐形reCAPTCHA验证，验证通过后再真正提交表单。

1. HTML结构示例 #

<form id="myForm" method="POST" action="/submit">
  <div class="form-group">
    <label>邮箱</label>
    <input type="email" name="email" class="form-control" required>
  </div>
  <!-- 隐形reCAPTCHA容器 -->
  <div class="g-recaptcha" 
       data-sitekey="你的sitekey" 
       data-callback="onRecaptchaSuccess" 
       data-size="invisible">
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

2. JavaScript 实现步骤 #

第一步：初始化jQuery Validate #

先设置表单的字段验证规则，确保用户输入的内容符合要求：

$(document).ready(function() {
  $('#myForm').validate({
    rules: {
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      email: {
        required: "请输入邮箱",
        email: "请输入有效的邮箱格式"
      }
    },
    // 关键：禁用默认的提交行为，我们自己控制提交时机
    submitHandler: function(form) {
      // 这里先不提交，触发reCAPTCHA验证
      grecaptcha.execute();
      return false;
    }
  });
});

第二步：实现reCAPTCHA回调函数 #

当reCAPTCHA验证通过后，手动提交表单：

function onRecaptchaSuccess(token) {
  // 验证通过，提交表单
  $('#myForm')[0].submit();
  
  // 可选：如果需要重置reCAPTCHA（比如用户再次提交）
  grecaptcha.reset();
}

第三步：处理回车键提交的特殊情况 #

其实上面的submitHandler已经覆盖了回车键提交的场景（因为回车会触发表单submit，而jQuery Validate会拦截并进入submitHandler），不过如果有特殊情况，可以额外监听键盘事件确保兼容：

$('#myForm input').keypress(function(e) {
  if (e.which == 13) {
    // 触发表单验证，会自动进入submitHandler
    $('#myForm').valid();
    return false;
  }
});

关键注意事项 #

• 确保你的隐形reCAPTCHA已经正确加载（页面头部引入Google的reCAPTCHA脚本）
• data-sitekey替换成你自己的reCAPTCHA站点密钥
• 如果表单是Ajax提交，只需要把onRecaptchaSuccess里的form.submit()换成你的Ajax请求逻辑即可，同时带上reCAPTCHA的token参数

这样实现后，不管用户点击提交按钮还是按回车键，都会先经过jQuery Validate的字段验证，通过后触发隐形reCAPTCHA验证，验证成功才会提交表单，完美适配你的需求。

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