最近公司網站搞個查詢功能，上網找了些這方面的例子。 簡單分析下，可以用兩種方法，一個是php生成圖片，並寫入session裏，在服務器那邊檢驗， 一個是直接通過js驗證，後臺不需要驗證這個。很多人說後一種很不安全，嗯，這是不太安全，但是我總覺得交給服務器檢驗很慢，而且體驗不好。自己拋磚引玉吧。看看大家有沒有更好的想法。我的例子也是很簡單。沒有使用到ajax 。
第一種：
需要3個頁面:
index.php
<form method="post" action="tt.php">
<p>
<textarea name="contents" cols="" rows=""></textarea>
</p>
<p> </p>
<p>
<input type="text" name="muth" id="muth" /><img id="refresh" src="muth.php" onclick="document.getElementById('refresh').src='lib/muth.php'"/>
</p>
<p> </p>
<p>
<input type="submit" name="button" id="button" value="提交" />
</p>
</form>muth.php
<?php
session_start();
//生成驗證碼圖片
Header("Content-type: image/PNG");
$im = imagecreate(44,18); // 畫一張指定寬高的圖片
$back = ImageColorAllocate($im, 245,245,245); // 定義背景顏色
imagefill($im,0,0,$back); //把背景顏色填充到剛剛畫出來的圖片中
$vcodes = "";
srand((double)microtime()*1000000);
//生成4位數字
for($i=0;$i<4;$i++){
$font = ImageColorAllocate($im, rand(100,255),rand(0,100),rand(100,255)); // 生成隨機顏色
$authnum=rand(1,9);
$vcodes.=$authnum;
imagestring($im, 5, 2+$i*10, 1, $authnum, $font);
}
$_SESSION['VCODE'] = $vcodes;
for($i=0;$i<100;$i++) //加入干擾象素
{
$randcolor = ImageColorallocate($im,rand(0,255),rand(0,255),rand(0,255));
imagesetpixel($im, rand()%70 , rand()%30 , $randcolor); // 畫像素點函數
}
ImagePNG($im);
ImageDestroy($im);
?>
tt.php
<?php
session_start();
if($_SESSION['VCODE'] == $_POST['muth']){
echo $_SESSION['VCODE'];
echo '驗證碼輸入正確';
}else{
echo '驗證碼輸入不正確';
}
?>第二種方式：
也是三個頁面
login.html
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache,must-revalidate">
<title>js---判斷驗證碼碼是否正確</title>
<script >
function yzm(form){
var num1=Math.round(Math.random()*10000000);
var num=num1.toString().substr(0,4);
document.write("<img name=codeimg width=50 heigh=20 src='yzm.php?num="+num+"'>");
}
//刷新驗證碼
function code(form){
var num1=Math.round(Math.random()*10000000);
var num=num1.toString().substr(0,4);
document.codeimg.src="yzm.php?num="+num;//這裏面的num就是驗證碼的值
}
function checkYzm(form){
var i = document.codeimg.src.slice(-4);
if(form.check.value == ""){
document.getElementById('result').innerHTML = "驗證碼不能爲空";
}else if(form.check.value != i){
document.getElementById('result').innerHTML = "驗證碼錯誤，請重新輸入";
}else{
document.getElementById('result').innerHTML = "驗證碼輸入正確";
}
}
function postForm(form) {
var i = document.codeimg.src.slice(-4);
if(form.check.value == "" || form.check.value != i)
{
document.getElementById('check').value = '';
document.getElementById('check').focus();
}
else
{
form.submit();
}
}
</script>
<style type="text/css">
#result {height:240px;width:150px;background-color:red;}
</style>
</head>
<body>
<form id="login" name="login" method="post" action="wow.php">
<table>
<tr>
<td width="46" height="18">
<input id="check" name="check" type="text" width="46" onBlur="return checkYzm(login)" >
</td>
<td width="52" height="18" onClick="javascript:code(login)">
<script>yzm(login);</script>
</td>
</tr>
<tr>
<td colspan=2>
<input type="button" id="btnSubmit" name="btnSubmit" value="提交" onclick="postForm(login)"/>
</td>
</tr>
</table>
<div id="result"></div>
</form>
</body>
</html>yzm.php
<?php
srand((double)microtime()*1000000);
$im=imagecreate(50,20); // 新建一個基於調色板的圖像
$gray=imagecolorallocate($im,200,200,200);//imagecolorallocate -- 爲一幅圖像分配顏色
imagefill($im,0,0,$gray); //imagefill -- 區域填充
for($i=0;$i<4;$i++){
$str=mt_rand(1,3);
$size=mt_rand(3,6);
$authnum=substr($_GET['num'],$i,1);
imagestring($im,$size,(2+$i*10),$str,$authnum,imagecolorallocate($im,rand(0,130),rand(0,130),rand(0,130)));
} //imagestring -- 水平地畫一行字符串
imagepng($im);
imagedestroy($im);
?>wow.php
<?php
echo "驗證碼輸入正確!";
?>