[英]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.