界面的代码为:
<div class="form-group" > <span class="glyphicon glyphicon-check" > </span> <input name="verifyCode" id="verifyCode" class="form-control" style="width:140px;" type="text" placeholder="验证码" /> <img id="verifyPic" src="img" οnclick="this.src='img?'+Math.random()"/> </div>
js代码为(用jQuery实现:)
$(document).ready(function(){ //tooltip设置手动化显示 $(".form-control").tooltip({trigger:'manual'}); //focus后tooltip销毁 $(".form-control").focus(function(){ $(".form-control").tooltip("destroy"); }); var verifyMis = 0; //验证码验证 $("#verifyCode").blur(function(){ var code = $("#verifyCode").val(); if(code.trim().length==0)return; $.get("getVerifyCode",function(data){ if(data!=code){ $("#verifyCode").tooltip({title:'验证码错误'}).tooltip('show'); verifyMis = 1; $("#verifyPic").attr("src","img?"+Math.random()); } }); }); $("#verifyCode").focus(function(){ $("#verifyCode").tooltip('destroy'); verifyMis = 0; }); }
web.xml中的配置为:
<servlet> <servlet-name>VerifyCode</servlet-name> <servlet-class>cn.cslg.microblog.Util.VerifyCode</servlet-class> </servlet> <servlet> <servlet-name>GetVerifyCode</servlet-name> <servlet-class>cn.cslg.microblog.Util.GetVerifyCode</servlet-class> </servlet> <servlet-mapping> <servlet-name>VerifyCode</servlet-name> <url-pattern>/img</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>GetVerifyCode</servlet-name> <url-pattern>/getVerifyCode</url-pattern> </servlet-mapping>
代码文件有三个,分别为:VerifyCode.java
package cn.cslg.microblog.Util; 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.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; import com.sun.image.codec.jpeg.JPEGCodec; import com.sun.image.codec.jpeg.JPEGImageEncoder; public class VerifyCode extends HttpServlet { private static final long serialVersionUID = -775699744475915178L; private Font mFont = new Font("Times New Roman", Font.PLAIN, 18); // 设置字体 // 处理post public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { HttpSession session = request.getSession(false); response.setContentType("image/gif"); response.setHeader("Pragma", "No-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expires", 0); String pairs[] = ConcreteVerifyCode.genCode(); session.setAttribute("VerifyCode", pairs[1]); String code = pairs[0]; int width = code.length() * 15, height = 20;//size ServletOutputStream out = response.getOutputStream();//指向客户端的输出流对象。 BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); // 设置图片大小的 Graphics graphics = image.getGraphics(); Random random = new Random(); random.setSeed(System.currentTimeMillis()); // 取随机产生的认证码(4位数字) graphics.setColor(getRandColor(200, 250)); // 设置背景色 graphics.fillRect(0, 0, width, height); graphics.setColor(Color.black); // 设置字体色 graphics.setFont(mFont); graphics.setColor(new Color(0)); graphics.drawRect(0, 0, width - 1, height - 1); // 随机产生155条干扰线,使图象中的认证码不易被其它程序探测到 graphics.setColor(getRandColor(120, 200)); for (int i = 0; i < 155; i++) { int x = random.nextInt(width); int y = random.nextInt(height); int xl = random.nextInt(25); int yl = random.nextInt(25); graphics.drawLine(x, y, x + xl, y + yl); } for (int i = 0; i < code.length(); i++) { String rand = "" + code.charAt(i); // 将认证码显示到图象中 graphics.setColor(new Color(20 + random.nextInt(110), 20 + random .nextInt(110), 20 + random.nextInt(110))); // 调用函数出来的颜色相同,可能是因为种子太接近,所以只能直接生成 graphics.drawString(rand, 13 * i + 6, 16); } JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out); encoder.encode(image); out.close(); } static Color getRandColor(int fc, int bc) { // 给定范围获得随机颜色 Random random = new Random(); if (fc > 255) fc = 255; if (bc > 255) bc = 255; int r = fc + random.nextInt(bc - fc); int g = fc + random.nextInt(bc - fc); int b = fc + random.nextInt(bc - fc); return new Color(r, g, b); } }
GetVerifyCode.java:
package cn.cslg.microblog.Util; 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; /** * Servlet implementation class GetVerifyCode */ public class GetVerifyCode extends HttpServlet { private static final long serialVersionUID = 1L; public GetVerifyCode() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/plain;charset=utf-8"); PrintWriter out = response.getWriter(); out.print(request.getSession().getAttribute("VerifyCode")); out.close(); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
ConcreteVerifyCode.java:
package cn.cslg.microblog.Util; import java.util.Random; public class ConcreteVerifyCode { public static String[] genCode(){ String s[]=new String[2]; Random rand=new Random(); rand.setSeed(System.currentTimeMillis()); int x=rand.nextInt(100); int y=rand.nextInt(100); char op[]={'+','-','x'}; int mop=rand.nextInt(1000)%2; int result=0; switch(mop){ case 0: result=x+y; break; case 1: result=x-y;break; } s[0]=x+""+op[mop]+y; s[1]=new Integer(result).toString(); return s; } }
以上基本可以完成一个最简单的代码验证,若大家有什么疑问可以在下方留言,或联系博主QQ:924325679,大家可以一起讨论。