使用jQuery验证验证码

Question

我有一个申请表格，我需要使用jquery验证验证码。 如果输入的验证码是错误的，那么将显示一个警告框，请再次输入验证码。输入的验证码是错误的。我如何使用jquery来做到这一点。

这是代码

 $(function() {
        $("#XISubmit").click(function(){
    $(document).ready(function(){
$("#XIForm").submit(function(event) {
event.preventDefault()
val=$('#vercode').val()
$.ajax({
        type:"post",
        url:"verify-captcha.php",
        data:{'code':val},
        success:function(data){
                 if(data=='false'){
                alert('Re-enter Captcha, You Entered wrong captcha code')
                $("#cap").html("<img  src='captcha.php'>"); }
                            else{  $("#XIForm").unbind('submit')}
                            }

        });                   
});

});


            document.getElementById("XIForm").submit();

                });

    <label>Security Validation</label>  

      <label>Security Validation</label>    

 <span><img   src="captcha.php"></span><input type="text" name="vercode" id="vercode" size="10" style="margin-top: -1px; float: left; width: 115px; margin-right: 12px;"></li><div id="msg"></div>

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



verify-captcha.php
<?php
session_start(); 
if ($_POST["code"] != $_SESSION["cap_code"] || $_SESSION["cap_code"]=='')  { 
 echo 'false';
}else{
echo 'true';}

Answer 1

HTML代码

<span><img   src="captcha.php"></span><input type="text" name="vercode" id="vercode" size="10" style="margin-top: -1px; float: left; width: 115px; margin-right: 12px;"></li><div id="msg"></div>

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

验证码的jQuery代码

$(document).ready(function(){
$("#form").submit(function(event) {
event.preventDefault()
val=$('#vercode').val()
$.ajax({
        type:"post",
        url:"verify-captcha.php",
        data:{'code':val},
        success:function(data){
                 if(data=='false'){
                alert('Re-enter Captcha, You Entered wrong captcha code')
                $("#cap").html("<img  src='captcha.php'>"); }
                            else{  $("#form").unbind('submit')}
                            }

        });                   
});

});

verify-captcha.php的代码

<?php
session_start(); 
if ($_POST["code"] != $_SESSION["cap_code"] || $_SESSION["cap_code"]=='')  { 
 echo 'false';
}else{
echo 'true';}