如何实现客户端侧reCAPTCHA V2简单验证？表单验证码验证失效问题求助

我最近碰到个糟心的问题：我做的表单里，Google reCAPTCHA V2的验证完全没生效——用户哪怕不碰验证码，也能直接提交表单。但其他输入框（姓名、邮箱、电话这些）的验证都好好的，空着或者格式不对都会拦住提交，唯独验证码这块被彻底无视了，有没有大佬能帮忙看看咋回事？

先贴一下我的表单HTML代码：

<form id="of_form_empresa">
    <div class="both">
        <input type="text" name="name" id="of_nome" class="of_inputtext_s" placeholder="Nome" onfocus="clearinput(this)">
        <input type="text" name="mail" id="of_mail" class="of_inputtext_s" placeholder="E-mail" onfocus="clearinput(this)">
    </div>
    <div class="both">
        <input type="text" name="phone" id="of_fone" class="of_inputtext" placeholder="Telefone" onfocus="clearinput(this)">
    </div>
    <div class="both">
        <textarea name="msg" id="of_msg" class="of_textarea" placeholder="Mensagem" onfocus="clearinput(this)"></textarea>
    </div>
    <div class="col-md-12 alcenter">
        <div id="recaptcha-empresa" class="g-recaptcha" data-sitekey="MY-SITE-KEY"></div>
    </div>
    <div class="both">
        <input type="button" value="Enviar" class="of_inputbutton" onclick="sendcontato()">
    </div>
</form>

对应的提交验证JS代码：

function sendcontato(){
    form_ok = true;
    var form = document.getElementById("of_form_empresa");
    var name = form.elements['of_nome'].value;
    var mail = form.elements['of_mail'].value;
    var phone = form.elements['of_fone'].value;
    var msg = form.elements['of_msg'].value;
    
    var atpos=mail.indexOf("@");
    var dotpos=mail.lastIndexOf(".");
    
    if (name == ""){
        $("#of_nome").addClass("of_invalid");
        form_ok = false;
    }else{
        $("#of_nome").removeClass("of_invalid");
    }
    if (mail == "" || atpos<1 || dotpos<atpos+2 || dotpos+2>=mail.length){
        $("#of_mail").addClass("of_invalid");
        form_ok = false;
    }else{
        $("#of_mail").removeClass("of_invalid");
    }
    if (phone == ""){
        $("#of_fone").addClass("of_invalid");
        form_ok = false;
    }else{
        $("#of_fone").removeClass("of_invalid");
    }
    if (msg == ""){
        $("#of_msg").addClass("of_invalid");
        form_ok = false;
    }else{
        $("#of_msg").removeClass("of_invalid");
    }
    
    // Validate Captcha
    const captchaResponse = grecaptcha.getResponse();
    if (captchaResponse == "") {
        alert("Please complete the captcha.");
        form_ok = false;
    }
    
    if (form_ok){ 
        $.post("includes/envia.php",{name:name,mail:mail,phone:phone,msg:msg},function(data){
            // console.log(data);
            $("#of_okconsulta").fancybox().trigger('click');    
            document.getElementById("of_form_empresa").reset();
        }); 
    }
}

问题原因分析&修复方案 #

我帮你捋了下，大概率是踩了这几个坑：

• reCAPTCHA脚本未加载或加载异常
  你可能没在页面里引入Google reCAPTCHA的官方脚本，或者加载顺序不对。如果grecaptcha对象不存在，执行grecaptcha.getResponse()时会直接报错，函数后续代码全停，form_ok还是true，自然就直接提交了。

  修复：先确保表单前加载了reCAPTCHA脚本，然后给验证码验证加个安全判断避免报错：

  // 验证码验证部分修改为
  let captchaResponse = "";
  // 先检查grecaptcha是否存在，防止报错中断逻辑
  if (typeof grecaptcha !== "undefined") {
      captchaResponse = grecaptcha.getResponse();
  }
  if (captchaResponse === "") {
      alert("请先完成验证码验证！");
      form_ok = false;
      // 给验证码容器加红色边框提示用户
      document.getElementById("recaptcha-empresa").style.border = "1px solid #ff4444";
  } else {
      document.getElementById("recaptcha-empresa").style.border = "";
  }
  

• 站点密钥是占位符，未生效
  你HTML里的data-sitekey="MY-SITE-KEY"是占位符，必须替换成你在Google reCAPTCHA控制台生成的有效站点密钥，否则验证码根本不会渲染出来，自然没法验证。

• 用回调函数优化验证逻辑（可选）
  比起主动调用getResponse()，用reCAPTCHA的回调函数标记验证状态更稳妥。修改验证码容器的HTML：

  <div id="recaptcha-empresa" class="g-recaptcha" data-sitekey="你的有效站点密钥" data-callback="onCaptchaSuccess"></div>
  

  然后在JS里加全局变量和回调函数：

  let isCaptchaVerified = false;
  function onCaptchaSuccess() {
      isCaptchaVerified = true;
      document.getElementById("recaptcha-empresa").style.border = "";
  }
  

  最后在sendcontato()里验证这个变量：

  if (!isCaptchaVerified) {
      alert("请先完成验证码验证！");
      form_ok = false;
      document.getElementById("recaptcha-empresa").style.border = "1px solid #ff4444";
  }
  

这样调整后，验证码验证应该就能正常生效，拦住未验证的提交了。

备注：内容来源于stack exchange，提问作者TheVipZo123