验证码学习

验证码学习：

第一步：写一个JSP页面VerifyCode.jsp：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"

contentType="image/jpeg"

import="java.awt.*,  java.awt.image.*,java.util.*,javax.imageio.*"%>

<%

response.setHeader("Cache-Control", "no-cache");

// 在内存中创建图象  

int width = 60, height = 20;

BufferedImage image = new BufferedImage(width, height,

BufferedImage.TYPE_INT_RGB);

//获取画笔  

Graphics g = image.getGraphics();

//设定背景色   

g.setColor(new Color(200, 200, 200));

g.fillRect(0, 0, width, height);

//取随机产生的验证码(4位数字)   

Random rnd = new Random();

int randNum = rnd.nextInt(8999) + 1000;

String randStr = String.valueOf(randNum);

//将验证码存入session   

session.setAttribute("rand", randStr);

//将验证码显示到图象中

g.setColor(Color.black);

g.setFont(new Font("", Font.PLAIN, 20));

g.drawString(randStr, 10, 17);

// 随机产生100个干扰点，使图象中的验证码不易被其他程序探测到

for (int i = 0; i < 100; i++) {

int x = rnd.nextInt(width);

int y = rnd.nextInt(height);

g.drawOval(x, y, 1, 1);

} // 输出图象到页面    

ImageIO.write(image, "JPEG", response.getOutputStream());

out.clear();

out = pageContext.pushBody();

%>

第二步：登录页面加上div块：

<div>

                  <div>验证码：

                    <input id="captcha" class="text w100" type="text" name="captcha" maxlength="4" placeholder="输入验证码" autocomplete="off"/>

                  </div>

                <div style="margin-left: 60px;">

                 <img name="imgValidate" src="VerifyCode.jsp" onclick="refresh()">

                <a href="" onclick="refresh()">看不清，换一张</a>

  </div> 

         </div>

 

第三步：登录页面加上JS，使得点击验证码时能随机换一个：

function refresh(){    

  login_main.imgValidate.src = "VerifyCode.jsp";  

 }  

第四步：验证：

<script type="text/javascript" src="${ctx}/js/jquery-1.3.js"></script>

<script type="text/javascript" src="${ctx}/js/jquery.validate.js"></script>

<script type="text/javascript">

$(function(){

$("#login_main").validate({

   //debug:true,

   onkeyup:true,//当丢失焦点的时候才触发验证请求

   //success:'ok',//成功的样式

   errorPlacement:function(error,element){//定义错误消息存放的位置

   var error_item = element.parent('div');

error_item.append(error);

   },

   rules:{

   username:{

   required:true

  },

   password:{

   required:true

  },

   captcha:{

   required:true,

   remote:{//远程验证

   url:'${ctx}/ajax.action',

   type:"post"//设置成post则不会调用缓存

   }

   }

   },

   messages: {

   username:{

   required:'<font color="red">用户名不能为空</font>'

   },

   password:{

   required:'<font color="red">密码不能为空</font>'

   },

   captcha:{

   required:'<font color="red">验证码不能为空</font>',

   remote:'<font color="red">验证码不正确</font>'

   }

   }

   });

});

</script>

第五步：写controller

/**

 * 登录

 */

@RequestMapping("/user/login2.action")

public String login2(String username,String password,HttpServletRequest request){

User user=this.userService.getName(username);

HttpSession session = request.getSession();

if(user!=null&&user.getPassword().equals(password)){

session.setAttribute("user", user.getUsername());

session.setAttribute("msg","账号密码正确！");

return "/home/fmain.jsp";

}else{

session.setAttribute("msg","<font color='red'>账号或者密码错误！</font>");

return "/index.jsp";

}

}

/**

 * 验证码ajax验证

 */

@RequestMapping("/ajax.action")

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

//得到提交的验证码

String captcha = request.getParameter("captcha");

//获取session中的验证码

HttpSession session = request.getSession();

String randStr = (String)session.getAttribute("rand");

response.setCharacterEncoding("utf-8");

PrintWriter out = response.getWriter();

if(captcha.equals(randStr)){  

out.print(true);

}else{

out.print(false);

}

out.flush();

}