如何将 reCAPTCHA v2 添加到 Jquery 和 php 表单

编程问答 2022-08-06

问题描述

我对此比较陌生，一直在构建一个网页，正在寻找一些帮助，将所需的代码添加到 jQuery 以启用 reCAPTCHA v2。

我已经成功地将 reCAPTCHA v2 添加到 HTML 并让该部分正常工作，它按预期运行，但我对 PHP/javascript 有点迷茫，我试图让 reCAPTCHA 验证正常运行，但没有成功。

>

我知道我必须向 jQuery 脚本添加一个变量，但我不确定要添加什么或在哪里添加它。 （我从各种帮助源中尝试了几个选项，但从未奏效。）

我附上了 HTML、mail.PHP 和 contact.js 的当前代码作为参考。

感谢您提供有关添加内容以及添加位置以使验证功能正常工作的帮助/指示。

非常感谢

包含的片段是

jQuery (contact.js) PHP (mail.PHP) HTML（HTML 表单）

jQuery(document).ready(function ($) { // wait until the document is ready
    $('#send').click(function(){ // when the button is clicked the code executes
        $('.error').fadeOut('slow'); // reset the error messages (hides them)

        var error = false; // we will set this true if the form isn't valid

        var name = $('input#name').val(); // get the value of the input field
        if(name == "" || name == " ") {
            $('#err-name').fadeIn('slow'); // show the error message
            error = true; // change the error state to true
        }

        var email_compare = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/; // Syntax to compare against input
        var email = $('input#email').val(); // get the value of the input field
        if (email == "" || email == " ") { // check if the field is empty
            $('#err-email').fadeIn('slow'); // error - empty
            error = true;
        }else if (!email_compare.test(email)) { // if it's not empty check the format against our email_compare variable
            $('#err-emailvld').fadeIn('slow'); // error - not right format
            error = true;
        }

        if(error == true) {
            $('#err-form').slideDown('slow');
            return false;
        }

        var data_string = $('#ajax-form').serialize(); // Collect data from form

        $.ajax({
            type: "POST",url: $('#ajax-form').attr('action'),data: data_string,timeout: 6000,error: function(request,error) {
                if (error == "timeout") {
                    $('#err-timedout').slideDown('slow');
                }
                else {
                    $('#err-state').slideDown('slow');
                    $("#err-state").html('An error occurred: ' + error + '');
                }
            },success: function() {
                $('#ajax-form').slideUp('slow');
                $('#ajaxsuccess').slideDown('slow');
            }
        });

        return false; // stops user browser being directed to the PHP file
    }); // end click function
});
<?PHP

/* Editable entries are bellow */

$send_to = “test@email.com";
$send_subject = "Enquiry";



/*Be careful when editing below this line */

$f_name = cleanupentries($_POST["name"]);
$f_email = cleanupentries($_POST["email"]);
$f_message = cleanupentries($_POST["message"]);
$from_ip = $_SERVER['REMOTE_ADDR'];
$from_browser = $_SERVER['HTTP_USER_AGENT'];

function cleanupentries($entry) {
    $entry = trim($entry);
    $entry = stripslashes($entry);
    $entry = htmlspecialchars($entry);

    return $entry;
}

$message = "This email was submitted on " . date('m-d-Y') .
"\n\nName: " . $f_name .
"\n\nE-Mail: " . $f_email .
"\n\nMessage: \n" . $f_message .
"\n\n\nTechnical Details:\n" . $from_ip . "\n" . $from_browser;

$send_subject .= " - {$f_name}";

$headers = "From: " . $f_email . "\r\n" .
    "Reply-To: " . $f_email . "\r\n" .
    "X-Mailer: PHP/" . PHPversion();

if (!$f_email) {
    echo "no email";
    exit;
}else if (!$f_name){
    echo "no name";
    exit;
}else{
    if (filter_var($f_email,FILTER_VALIDATE_EMAIL)) {
        mail($send_to,$send_subject,$message,$headers);
        echo "true";
    }else{
        echo "invalid email";
        exit;
    }
}

?>
<form name="ajax-form" id="ajax-form" action="mail-it.PHP" method="post">
                        <div class="three columns">
                            <label for="name">Name:
                                <span class="error" id="err-name">please enter name</span>
                            </label>
                            <input name="name" id="name" type="text" />
                        </div>
                        <div class="three columns">
                            <label for="email">E-Mail:
                                <span class="error" id="err-email">enter your e-mail</span>
                                <span class="error" id="err-emailvld">e-mail is not a valid format</span>
                            </label>
                            <input name="email" id="email" type="text" />
                        </div>
                        <div class="four columns">
                            <label for="message">Message:</label>
                            <textarea name="message" id="message"></textarea>
                        </div>
                        <div class="two columns">
                            <div id="button-con"><button class="send_message" id="send">Submit</button></div>
                        </div>
                        <div class="two columns">
                        <div class="g-recaptcha" id="recaptcha" data-theme="light" data-sitekey=“ADD “DATA KEY HERE style="transform:scale(0.65);-webkit-transform:scale(0.65);transform-origin:0 0;-webkit-transform-origin:0 0;"></div>
                        </div>
                        <div class="clear"></div>
                        <div class="error text-align-center" id="err-form">There was a problem validating the form please check!</div>
                        <div class="error text-align-center" id="err-timedout">The connection to the server timed out!</div>
                        <div class="error" id="err-state"></div>
                    </form>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljqueryrecaptcharecaptcha