Google reCAPTCHA 验证 jQuery

Question

我正在尝试使用表单验证 google reCAPTCHA 如果 reCAPTCHA 为假，它应该显示警报并且按钮应该变为假 我尝试了一些代码但它不起作用有人知道吗？

这是我的代码

<div class="lets-talk-out"> </div>
        <div class="slide-popup-box-form-main">
            <div class="slide-popup-box-form">

                <form id="lets-talk-frm" action="contactus.php" method="post" >
                <input type="text"  name="name" id="name" placeholder="Name:" >
                <input type="text"  name="email"  id="email" placeholder="Email:" >
                <input type="text"  name="skype" id="skype" placeholder="Skype" >
                <input type="text"  name="mobile" id="mobile" placeholder="Mobile:" >
                <input type="hidden" name="slider_unlock" value="02" >
                <input type="text"  name="date"   placeholder="Date:" id="ldate" >
                <input type="text"  name="time"  placeholder="Time:" id="ltime" >
                <div class="g-recaptcha" data-sitekey="6Lfc4xETAAAAALO-3I6chqeyOrpfDPRl1u7fW2XD"></div>

                <input type="submit" id="lets-talk" value="submit" name="submit">
                </form>
                </div>

            </div>
<script> 
var k=  jQuery.noConflict();

k(document).ready(function() { 
    var options = { 
        target:        '#lets-talk-out',   // target element(s) to be updated with server response 
    }; 
    k('#ltime').datetimepicker({ 
                        datepicker:false,
                        format:'H:i'
                        });
    k('#ldate').datetimepicker({ 
                        timepicker:false,
                        format: 'Y/m/d',
                         minDate:'-1970/01/01'
                        }); 


    // bind form using 'ajaxForm' 
    k('#lets-talk-frm').ajaxForm({success:function(responseText, statusText, xhr, $form){ 
                                k('.slide-popup-box-form-main').prepend('<h4>'+responseText+'</h4>');
                                k('.slide-popup-box-form').hide();

                                //alert(responseText);
                                //showSlidingDiv();
                                //document.getElementById("lets-talk-out").html(responseText);
                            //  k('#lets-talk-out').html(responseText);
                                },
                                }); 
}); 
     k("#lets-talk-frm").validate({
        rules: {



        name: "required",
        email: {
            required: true,
            email: true
        },

        //skype: "required",
        mobile:{
        required: true,
        digits: true,
         minlength: 7
        },
        date: "required",
        time: "required",



        },
        messages:{
            name: '',
            email: '', skype: '', mobile: '', date: '', time: '', phone: '',
        },




        });






    k( '#slider_full_1' ).sliderCaptcha({
            type: "filled",
            textFeedbackAnimation: 'swipe_overlap',
            hintText: "Swipe to submit",
            width: '300px',
            height: '55px',
            styles: {
                knobColor: "#72ba1c",
                knobColorAfterUnlock: "#000000",
                backgroundColor: "#444",
                textColor: "#fff",
                textColorAfterUnlock: "#fff"
            },
            face: {
                top: 0,
                right: 9,
                icon: 'tisind\images\arrow.png',
                textColor: '#ddd',
                textColorAfterUnlock: '#72ba1c',
                topAfterUnlock: 0,
                rightAfterUnlock: 9,                
                iconAfterUnlock: 'flag'
            },
            events: {
                submitAfterUnlock: 0,
                validateOnServer: 1,
                validateOnServerParamName: "slider_unlock"

            }
        }); 
    var $ = jQuery.noConflict();

</script>

Answer 1

您需要在 事件 中触发您的 if 语句。非常简单：

$('form').on('submit', function(e) {
  if(grecaptcha.getResponse() == "") {
    e.preventDefault();
    alert("You can't proceed!");
  } else {
    alert("Thank you");
  }
});

在此处查看工作示例：JSFiddle

在 JavaScript 中这样做的问题是，如果用户愿意，他们可以很容易地伪造结果。如果您真的想检查用户是否是机器人，您仍然应该使用您的 reCAPTCHA 密钥在服务器端比较用户（通过 POST）提交的结果。

Answer 2

要检查 google recaptcha v2 是否被选中，您可以通过以下代码完成：

var checkCaptch = false;
         var verifyCallback = function(response) {
            if (response == "") {
             checkCaptch = false;
         }
         else {
             checkCaptch = true;
         }
         };
         $(document).ready(function() {
             $("#btnSubmit").click(function() {
                 if (checkCaptch && grecaptcha.getResponse()!="") {
                      //Write your success code here
                 }
             });
         })