验证码是一个很常见的一个功能,验证码可以防止黑客通过某种手段无间隔的注册等等

验证码是通过服务器端生成的一张图片,传到客户端


具体实现步骤(流程):

1)由服务器端比如servlet,随机产生几个字符数字等等,把这几个字符拼接成一个字符串,存到session域中


2)以图片的方式传给客户端,验证码上的具体值是在服务器端验证的,如果具体值在客户端验证的话,恐怕不太方便比如第一次访问静态登录界面的话,去取session的值是为空的,除非你再次刷新整个页面


3)客户端对验证码,验证是否为空,输入的字符的长度是否达到标准,


4)把输入的验证码传到服务器端,服务端在session中取到值,做具体判断


5)根据输入对否,跳转到另一界面,如果输入错误,一般跳回当前界面,验证码改变又被刷新一次


具体实现的页面

产生验证码的 Response_3类​

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'ValidateLogin.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->

</head>

<BODY style="background-color:66CCFF" >
<table cellspacing="10"
border=1 background="" align="center">
<tr>
<td>

<b style="font-size:20;color:green;" >会员--登录</b>
<hr width=220 align=left>

<form name=form1 Action="LoginServlet" method="get" >



<br />
用户名:
<input type="text" name="usename" value=543806053@qq.com size=19 maxlength=16 />
<br />
<br />
密 码:
<input type="password" name="password" maxlength=16 />
<br /><br />
认证码: <input type="text" name="validateValue" size=19 onblur="checkVlidte(this)"/><br>

<img id="image" src="servlet/Response_3"/>
<a href="javascript:changeimage()" >看不清?换一张</a>
<br /><br />


<br /><br />
<input type="submit" value="登录"/>
<input type="reset" value="重置" />
<hr width=220 align=left>
</form>
</td>
</tr>

</table>


</body>

<script type="text/javascript">
function validate_required(field,alerttxt)
{
with(field)
{

/*if(value==null||value=="")
{
alert(alerttxt);
return false ;
}
else
return true ;
*/

i = value.indexOf("@"); //邮箱认证
j = value.lastIndexOf(".");
if(i < 1 || j-i <2)
{
alert(alerttxt) ;
return false ;
}
else
return true ;
}
}

function password_validate (_pass,alerttxt)
{
with(_pass)
{
if(value!="")
return true ;
else
{
alert(alerttxt) ;
return false ;
}
}
}


function validate_form(thisform)
{
with(thisform)
{
if(validate_required(name1,"请输入有效的邮箱账号!") == false)
{
name1.focus();
return false ;
}

if(password_validate(pass,"请输入正确的密码!") == false)
{
pass.focus();
return false ;
}

}
}

</script>

<script type="text/javascript">

function proving()
{
if(form1.pass.value!="")
window.open("http://www.baidu.com/","_self");
else
window.open("http://www.google.com/","_self");


}

</script>

<!--认证码按钮脚本-->
<script type="text/javascript">
function changeimage()
{
var img = document.getElementById("image") ;
if(img)
img.src=img.src+ "?" + new Date().getTime();
}

function checkVlidte(object)
{

if(object.value.length != 4 )
{
alert("验证码错误!");

//object.focus() ;//重新定位到该输入框
//object.select() ;//把已有的内容选中
}
}

</script>

</html>

服务器端验证,这里只对验证码进行验证

package cn.request;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
//主要 服务器端验证码 的验证
public class LoginServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

this.doPost(request, response);


}


public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

String usename = request.getParameter("usename");
String password = request.getParameter("password");
String validateValue = request.getParameter("validateValue");

String vv = (String)request.getSession().getAttribute("validateValue");

//把验证码全转为小写在进行比较
if( (validateValue.toLowerCase()).equals(vv.toLowerCase()) )
{
response.sendRedirect("index.jsp");
}
else
{
request.getRequestDispatcher("ValidateLogin.jsp").forward(request, response);
}


}

}