css 将reCaptcha V2集成到网站中

Posted 2021-05-13

// disables form submit button until reCaptcha callback and adds grey button class
jQuery(document).ready(function ($) {
    $('#Submit').attr('disabled', 'disabled').addClass('grey_button');
});

/*
 * Validates reCaptcha response and ensures qform validation is true before submitting the form
 * Disabled submit button should prevent this function from even running.
 */
jQuery(document).ready(function ($) {
    $('#myform').submit(function () {
        var v = grecaptcha.getResponse();
        if (v.length === 0) {
            //reCaptcha not verified
            document.getElementById('captcha').innerHTML = "Please complete captcha";
            return false;
        }
        else {
            //reCaptcha verified
            console.log("reCaptcha verified");
            return true;
        }
    });
});


// reCaptcha response callback to remove possible captcha error html and enable submit button
function clearError() {
    document.getElementById('captcha').innerHTML = "";
    $('#Submit').removeAttr("disabled").removeClass('grey_button');
}

<!-- Place this at the end of your HEAD tag -->
<script src='https://www.google.com/recaptcha/api.js'></script>

<!-- Place this at the end of your form tag but before the submit button -->
<div class="g-recaptcha" id="recaptcha" data-sitekey="your_client_key" data-callback="clearError"></div>
<span id="captcha" style="color:red;"></span>

.grey_button {
    background-color: #c0c0c0 !important;
}