系统登录界面的验证码
一、java后台生成随机验证码
package com.code; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.IOException; import java.util.Random; import javax.imageio.ImageIO; import javax.servlet.ServletException; import javax.servlet.ServletOutputStream; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession;
@SuppressWarnings("serial") public class Check extends HttpServlet {
public String suijima(){ char [] str="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray(); Random rd=new Random(); String suiji=""; int temp=0; for(int i=0;i<4;i++){ temp=rd.nextInt(36); suiji+=str[temp]; } return suiji; }
public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String sjm=suijima(); HttpSession session=request.getSession(); session.setAttribute("check",sjm); //在登录验证的时候会首先检查验证码是否输入正确 BufferedImage buffimg=new BufferedImage(60,20,BufferedImage.TYPE_INT_RGB); Graphics g=buffimg.createGraphics(); Random rd=new Random(); int cr,cg,cb; cr=rd.nextInt(255); cg=rd.nextInt(255); cb=rd.nextInt(255); Color mycolor=new Color(cr,cg,cb); //干扰线 g.setColor(mycolor); for (int i = 0; i < 10; i++){ int x1 = rd.nextInt(60); int x2 = rd.nextInt(60); int y1 = rd.nextInt(20); int y2 = rd.nextInt(20); g.drawLine(x1, y1, x2, y2); } //显示随机码 Font myfont=new Font("times new roman",Font.PLAIN,19); g.setFont(myfont); g.setColor(Color.WHITE); g.drawString(sjm,5,15); //将图像输出到servlet输出流中。 ServletOutputStream sos=response.getOutputStream(); ImageIO.write(buffimg, "jpeg",sos); sos.close(); g.dispose(); } }
二、jsp页面，用jquery验证
<body>
<form method="post">
用户名：<input type="text" name="username" id="username"/> <br>
密 码： <input type="password" name="pwd" id="pwd"/><br>
验证码:<input type="text" name="yzm" id="yzm"/>
<img id="code" src="http://localhost:8080/javacode/check.do" onclick="javascript:change()" title="点击刷新验证码"><br>
<input type="button" onclick="check()" value="登录"/>
<input type="reset" name="reset" value="重置" />
<div id="result"></div>
</form>
</body>
<script language="javascript">
function check()
{
var jqueryobj = $("#username");
var username = jqueryobj.val();
var jqueryobj1 = $("#pwd");
var pwd = jqueryobj1.val();
var jqueryobj2 = $("#yzm");
var yzm = jqueryobj2.val();
var object =username+","+pwd+","+yzm;
$.get("checkcode.do?object="+object,null,callback);
}
function callback(data){
if(data==1){
data = "验证码出错，请重新输入！";
}else if(data==2){
data = "验证码正确！";
}
var resultObj = $("#result");
resultObj.html("<font color=red>"+data+"</font>");
}
function change(){
var dt = new Date();
var img=document.getElementById("code");
img.src="http://localhost:8080/javacode/check.do?dt"+dt; //意思是让图片重新加载一次 效果类似与直接刷新yanzhengma.jsp有了这个，就能让图片重新加载了
}
</script>
</html>
三、后台验证
package com.code;
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;
@SuppressWarnings("serial") public class Checkcode extends HttpServlet{ public void doPost(HttpServletRequest request,HttpServletResponse response) throws IOException, ServletException{ String strYzm=request.getParameter("object"); //用户输入的验证码 String [] str = strYzm.split(","); String stryz=(String)request.getSession().getAttribute("check"); //servlet中生成的验证码 int error; response.setContentType("text/html;charset=GBK"); str[2]=str[2].toUpperCase(); PrintWriter out=response.getWriter(); if(!str[2].equals(stryz)){ error=1; }else{ error=2; } out.println(error); } public void doGet(HttpServletRequest request,HttpServletResponse response) throws IOException, ServletException{ doPost(request,response); }
}
这样就可以完成登录页面的验证！
