使用jQuery验证的Google reCAPTCHA

Question

我试图用表格验证谷歌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)提交的结果.