使用验证码脚本进行表单验证答案

【问题标题】：form validation with captcha script使用验证码脚本进行表单验证
【发布时间】：2014-04-21 19:01:28
【问题描述】：

我使用 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');
?>

captcha.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);
?>

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

谢谢。

【问题讨论】：

我在您的 OP 中的任何地方都没有看到 jQuery Validate 插件。请不要使用不相关的标签。
您在ajaxSubmit JS 函数中尝试进行 CAPTCHA 验证当然没有任何意义——因为它依赖于 PHP 中确定的值，甚至在表单被呈现之前给用户。

标签： javascript php jquery wordpress captcha

【解决方案1】：

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

将提交按钮名称更改为其他名称，否则不会触发 jquery 提交。
在表单提交事件中使用 ajax 验证验证码。
如果验证码正确，则再次发送 ajax 请求以存储数据。如果验证码不正确，请刷新验证码图像。

【讨论】：