[英]Captcha Validation using jquery
我有一个申请表格,我需要使用jquery验证验证码。 如果输入的验证码是错误的,那么将显示一个警告框, 请再次输入验证码。输入的验证码是错误的。如何使用jquery做到这一点? 请帮我。 我是jquery新手。
这是代码:
$(function() {
$("#XISubmit").click(function(){
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_image.php'>"); }
else{
document.getElementById("XIForm").submit();
}
}
});
});
});
document.getElementById("XIForm").submit();
});
**Html page :**
<label>Security Validation</label>
<span><img src="captcha_image.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_image.php**
<?
// *** CAPTCHA image generation ***
// *** http://frikk.tk ***
session_start();
// *** Tell the browser what kind of file is come'n at 'em! ***
header("Content-Type: image/jpeg");
// *** Send a generated image to the browser ***
die(create_image());
// *** Function List ***
function create_image()
{
// *** Generate a passcode using md5
// (it will be all lowercase hex letters and numbers ***
$md5 = md5(rand(0,9999));
$pass = substr($md5, 10, 5);
// *** Set the session cookie so we know what the passcode is ***
$_SESSION["pass"] = $pass;
// *** Create the image resource ***
$image = ImageCreatetruecolor(100, 20);
// *** We are making two colors, white and black ***
$clr_white = ImageColorAllocate($image, 255, 255, 255);
$clr_black = ImageColorAllocate($image, 0, 0, 0);
// *** Make the background black ***
imagefill($image, 0, 0, $clr_black);
// *** Set the image height and width ***
imagefontheight(15);
imagefontwidth(15);
// *** Add the passcode in white to the image ***
imagestring($image, 5, 30, 3, $pass, $clr_white);
// *** Throw in some lines to trick those cheeky bots! ***
imageline($image, 5, 1, 50, 20, $clr_white);
imageline($image, 60, 1, 96, 20, $clr_white);
// *** Return the newly created image in jpeg format ***
return imagejpeg($image);
// *** Just in case... ***
imagedestroy($image);
}
?>
verify-captcha.php
<?php
session_start();
if ($_POST["code"] != $_SESSION["cap_code"] || $_SESSION["cap_code"]=='') {
echo 'false';
}else{
echo 'true';}
您可以执行的步骤
这是您修改过的脚本(未经测试):
$(function() {
$("#XISubmit").click(function(){
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").submit();
}
}
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.