javascript - 使用验证码脚本进行表单验证

Question

我已经使用 Ajax 创建了自定义联系人并在 WordPress 中实现。现在我想添加自定义 captcha 脚本。

目前我正在使用此验证码脚本作为我的联系表单 9lessons phpcaptcha但实现后我每次都会收到verification Wrong警报框。我不知道我的代码有什么问题。

仅供引用:我已经创建了插件文件，因此我已将所有代码添加到一个文件中。

我的代码:

<?php
session_start();
$cap = 'notEq';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if ($_POST['captcha'] == $_SESSION['cap_code']) {
        // Captcha verification is Correct. Do something here!
        $cap = 'Eq';
    } else {
        // Captcha verification is wrong. Take other action
        $cap = '';
    }
}
?>

<?php
    function saleContactForm() {
    ?>
        <form method="post" action="" id="SaleForm">            
            <ul class="cnt-frm">
                <li><input name="sa_first_name" id="sa_first_name" type="text" value="First Name*" class="sl-txbx" maxlength="20"  onchange="return trim(this)"></li>
                <li><input name="sa_last_name" id="sa_last_name" type="text" value="Last Name*" class="sl-txbx" maxlength="20"  onchange="return trim(this)"></li>
                <li><input name="sa_company" id="sa_company" type="text" value="Company*" class="sl-txbx" maxlength="20"  onchange="return trim(this)"></li>
                <li><input name="sa_email" id="sa_email" type="text" value="Email*" class="sl-txbx"  onchange="return trim(this)"></li>
                <li><input name="sa_phone" id="sa_phone" type="text" value="Phone*" class="sl-txbx" maxlength="14"  onchange="return trim(this)"></li>
                <li><textarea name="sa_message" id="sa_message" class="sl-txara" onchange="return trim(this)">Message*</textarea></li>
                <li><input type="hidden" name="action" value="saleAction"/></li>
                <li>
                    <input type="text" name="captcha" id="captcha" maxlength="6" size="6"/>
                    <img src="http://localhost/example/wp-content/plugins/sale/captcha.php"/>
                </li>
                <li><input type="reset" name="reset" value="reset" id="sale_reset" class="re_none"></li>
                <li><input type="submit" name="submit" value="submit" class="submit"></li>
            </ul>
        </form>

        <script type="text/javascript">

            jQuery('#SaleForm').submit(ajaxSubmit);

            function ajaxSubmit(){

                var capch = '<?php echo $cap; ?>';
                if(capch != 'notEq'){
                    if(capch == 'Eq'){
                        alert("Your form is successfully Submitted ");
                    }else{
                        alert("verification Wrong!");
                        return false;
                    }
                }                           

                var SaleForm = jQuery(this).serialize();

                jQuery.ajax({
                    type:"POST",
                    url: "<?php echo esc_url( home_url( '/' ) ); ?>wp-admin/admin-ajax.php",
                    data: SaleForm,
                    success:function(data){
                        alert('Thanks! Your request has been sent.');
                        jQuery( "#sale_reset" ).trigger( "click" );
                    },
                    error: function(errorThrown){
                        alert(errorThrown);
                    }  
                });

                return false;
            }
        </script>
        <?php
    }

function widget_saleContactForm() {
  saleContactForm();
}

wp_enqueue_script('jquery');

add_action('wp_ajax_saleAction', 'saleAction');
function saleAction() {
    $sa_first_name = $_POST['sa_first_name'];

    die();
}
add_action('wp_ajax_nopriv_saleAction', 'saleAction');
?>

验证码.php:

<?php
session_start();
$ranStr = md5(microtime());
$ranStr = substr($ranStr, 0, 6);
$_SESSION['cap_code'] = $ranStr;
$newImage = imagecreatefromjpeg("cap_bg.jpg");
$txtColor = imagecolorallocate($newImage, 0, 0, 0);
imagestring($newImage, 5, 5, 5, $ranStr, $txtColor);
header("Content-type: image/jpeg");
imagejpeg($newImage);
?>

如果您能帮助解决这个问题，我将不胜感激。

谢谢。

Answer 1

正如我看到你的代码，它不会调用验证码验证。

1. 将提交按钮名称更改为其他名称，否则 jquery 提交将不会触发。

2. 在表单提交事件上使用 ajax 验证验证码。

3. 当验证码正确时，再次发送ajax请求来存储数据。如果错误，则刷新验证码图像。