我們在做驗證碼的時候往往由於要反作弊，驗證有時故意加入多的幹擾因素，這時驗證碼顯示不很清楚，使用者經常輸入錯誤。這樣不但要重新重新整理頁面，導致使用者沒有看清楚驗證碼而重填而不是修改，而且如果沒有用session儲存下使用者輸入的其它資料的話(如姓名)，使用者剛剛輸入的內容也不存在了，這樣給使用者造成不好的體驗。
本例在原有驗證方式基礎之上增加一段js，通過xmlhttp來擷取傳回值，以此來驗證是否有效，這樣即使使用者瀏覽器不支援js，也不會影響他的正常使用了。
為了防止作弊，當使用者串連3次輸入錯誤時則重載一下圖片，這樣也利於使用者因為圖片上的驗證碼辨認不清而使終無法輸入正確。
本例還特別適合檢驗使用者名稱是否有效，只要從後台做個sql查詢，返回一個值或是xml即可。(這種例子太多，就在此不贅述了)。
本例的優點在於非常方便使用者輸入，而且減少對伺服器端的請求，可以說既改善使用者體驗而且略會節省頻寬成本，但相應地要在頁面上增加一段JavaScript代碼，在目前網速越來越快人們要求便捷舒適的 今天，似乎我們更應注意提供給使用者良好的使用感受。
代碼如下，
1、img.jsp,輸入首頁面
程式碼
<%@ page contentType="text/html; charset=GBK" language="java"
import="java.sql.*" errorPage="" pageEncoding="GBK"%>
<%
//set Chinese Char
//Cody by JarryLi@gmail.com;
//homepage:jiarry.126.com
request.setCharacterEncoding("GBK");
response.setCharacterEncoding("GBK");
response.setContentType("text/html; charset=GBK");
%>
<html>
<head>
<title>圖片驗證</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script src="net.js"></script>
</head>
<body>
AJAX(無重新整理及時提示)驗證碼執行個體！cody by jarry
<hr>
<%
String num=request.getParameter("num");
String random=(String)session.getAttribute("random");
String name=request.getParameter("name");
if(num!=null&&random!=null&&name!=null)
{
if(num.equals(random))
{
out.println("<font style="color:green;font-weight:bold">
恭喜您，驗證碼輸入成功，這裡是提交結果頁面，可以寫入資料庫了！</font>
<a href="img.jsp">返回再測試</a><br>");
out.println("您的名字是："+name);
out.println("<br>");
out.println("您輸入的是："+num);
out.println("驗證碼是："+random);
out.println("</body>");
return;//javascript:history.go(-1)
}
}
%>
<script type="text/javascript">
var times=0;
function subform(){
var gtext=this.req.responseText;
var info=document.getElementById("info");
if(gtext.indexOf("validate_successful")!=-1){
//info.innerHTML="<font color=green>驗證碼通過</font>";
document.forms["myform"].submit();
//當得到的值表示合法，則驗證碼通過。
}elseelse{
info.innerHTML="第"+times+"次驗證碼錯誤,請注意區分大小寫 ";
}
document.forms["myform"].num.select();
}
}
function validata(obj){
var enter=true;
var info=document.getElementById("info");
var msg="";
if(obj.name.value.match(/^s*$/g))
if(obj.num.value.match(/^s*$/g)){//如果未輸入驗證碼，提示
msg+="請輸入驗證碼<br>";enter=false
}
if(enter==false){
info.innerHTML=msg;
return false;
}
var url="num.jsp?num="+obj.num.value;
var newxmlhttp=new net.ContentLoader(url,subform,"","get",null,null);
return false;
}
function show(o){
//重載驗證碼
var timenow = new Date().getTime();
o.src="random.jsp?d="+timenow;
/*
//逾時執行;
setTimeout(function()
,20);
*/
}
</script>
<form action="img.jsp" name="myform" method="post"
onsubmit="return validata(this);">
您的姓名：<input type="text" name="name" size=10> (為了更好地說明此例，特加姓名一項)<br>
驗 證 碼：<input type="text" name="num" size=10 maxlength="4">
<img src="random.jsp" id="random" align="" valign="absmiddle" hspace="5">
<a href="javascript:show(document.getElementById('random'))">驗證碼看不清</a><br>
<br> <input type="submit" value=" 提交 "><br>
<div id=info style="color:red;padding:10px;font-size:12px;"></div>
</form>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
