验证码是一个很常见的一个功能,验证码可以防止黑客通过某种手段无间隔的注册等等
验证码是通过服务器端生成的一张图片,传到客户端
具体实现步骤(流程):
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);
}
}
}