使用ajax和php在表单提交时验证验证码

时间:2013-12-11 10:36:04

标签: php ajax validation captcha

如何验证用户是否使用ajax输入了正确的验证码?并阻止表单提交$_POST['captchainput'] != $_SESSION['code']

这是标记

<form action="captchaccept.php" method="POST" name="maincontact"> <input type="text" placeholder="Please enter the code" autocomplete="off" id="captchainput" name="captchainput"> <img src="captcha.php" id="captchaimage"> </form>

captcha.php

`

session_start();

$image_width = 135;
$image_height = 30;
$characters_on_image = 8;
$font = 'captchafont/acmesa.ttf'; 

$possible_letters = '23456789abcdfghjkmnpqrstvwxyz';
$random_dots = 10;
$random_lines = 30;
$captcha_text_color="0x142864";
$captcha_noice_color = "0x142864"; 

$code = ''; 

$i = 0;
while ($i < $characters_on_image) { 
    $code .= substr($possible_letters, mt_rand(0, strlen($possible_letters)-1), 1);
    $i++;
}

$_SESSION['code'] = $code;

$font_size = 14; 
$image = @imagecreate($image_width, $image_height);

$background_color = imagecolorallocate($image, 255, 255, 255);

$arr_text_color = hexrgb($captcha_text_color); 
$text_color = imagecolorallocate($image, $arr_text_color['red'], 
$arr_text_color['green'], $arr_text_color['blue']);

$arr_noice_color = hexrgb($captcha_noice_color); 
$image_noise_color = imagecolorallocate($image, $arr_noice_color['red'], 
$arr_noice_color['green'], $arr_noice_color['blue']);

for( $i=0; $i<$random_dots; $i++ ) {
    imagefilledellipse($image, mt_rand(0,$image_width),
    mt_rand(0,$image_height), 2, 3, $image_noise_color);
}

$textbox = imagettfbbox($font_size, 0, $font, $_SESSION['code']); 
$x = ($image_width - $textbox[4])/2;
$y = ($image_height - $textbox[5])/2;
imagettftext($image, $font_size, 0, $x, $y, $text_color, $font , $_SESSION['code']);

header('Content-Type: image/jpeg');
imagejpeg($image);
imagedestroy($image);

function hexrgb ($hexstr) {
    $int = hexdec($hexstr);

    return array( "red" => 0xFF & ($int >> 0x10),
    "green" => 0xFF & ($int >> 0x8),
    "blue" => 0xFF & $int);
}`

captchaaccept.php

`     在session_start();

if(isset($_SESSION['code'])) {
    if(empty($_POST['captchainput']) === false) {
        if($_SESSION['code'] === $_POST['captchainput']) {
                        echo 'ok';
                    }
            }
    }`

有人可以教我如何对此验证码使用ajax验证吗?或者只是告诉我一个例子,提前谢谢:)

2 个答案:

答案 0 :(得分:1)

使用jQuery你可以这样做:

(function($) {
    $('#captchainput').on('submit', function(e) {
        // Prevent the browser submitting the form
        e.preventDefault();

        // Put the form in variable form
        var form = $(this);

        // Do a AJAX post with the form data and check the response
        $.post(form.attr('action'), form.serialize(), function(data) {
            if(data === 'ok') {
                // Captcha passed!
            } else {
                // Captcha failed!
            }
        });
    });
})(jQuery);

同样在你的代码中;
<form action="captchaccept.php" ...应该是 我认为<form action="captchaaccept.php" ...; - )

答案 1 :(得分:0)

也试试这个......

var posted_captcha = $( "#captchainput" ).val();
$.ajax({
          url    : 'captchaaccept.php',
          data   : 'captchainput=' + posted_captcha,
          type   : 'post',
          success: function (res) {
            if(res=='ok'){
                alert('Validation pass');
            }else{
                alert('Validation fail');
            }
          }
        });