当进入登录界面时，验证码图片自动生成，验证码图片颜色随机，字母颜色随机，该代码只是随机生成小写英文字母，没有设置大写字母和数字
点击验证码图片重新生成验证码
验证码输入错误时，提示出来
验证码输入正确后才进行登录账号和密码的验证
中大型项目中用到的，现把关键代码展示如下
login.jsp界面（注意此时已经导入过jquery包了）
<img src="CheckCodeServlet" width="100%" height="30" id="checkCodeImg"/><script type="text/javascript">$("#checkCodeImg").click(function () {//重新设置属性的值，当点击该图片时$("#checkCodeImg").attr("src","CheckCodeServlet?m="+Math.random());});</script>
CheckCodeServlet类
package com.it.servlets;import javax.imageio.ImageIO;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import java.awt.*;import java.awt.image.BufferedImage;import java.io.IOException;import java.util.Random;@WebServlet("/CheckCodeServlet")public class CheckCodeServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req,resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//通过java中awt中提供的类绘制验证码图片// 1.创建一张图片int height=90;//验证码高度int width=300;//验证码宽度BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);//实例化一个图片对象// 2.绘制图片对象，从图片对象中获取绘制图片的笔Graphics2D pen = image.createGraphics();//a.绘制背景pen.setColor(getRandomColor());pen.fillRect(0,0,width,height);//绘制实心矩形//b.绘制验证码字符串int letterNum=4;//验证码图片上的字符的个数int space=20;//验证码图片上两个字母之间的空隙int letterWidth=(width-(letterNum+1)*space)/letterNum;//计算每个字母占据的宽度// for循环每循环一次，绘制一个字母（小写字母的ascii码：97-122）Random random = new Random();String code ="";for (int i=0;i<letterNum;i++){// 随机生成一个小写字母int ascii = random.nextInt(26) + 97;//97-122byte[] bytes={(byte) ascii};String letter=new String(bytes);code = code + letter;//为了保存验证码字符到session// 绘制字母pen.setColor(getRandomColor());pen.setFont(new Font("Gulim",Font.BOLD,70));pen.drawString(letter,space+(letterWidth+space)*i,height-space);//把该字母写在画布上}HttpSession session = req.getSession();session.setAttribute("code",code);//添加图片干扰，防止机器自动识别// 图片绘制完成后，将图片通过response输出流响应到客户端ImageIO.write(image,"png",resp.getOutputStream());}private Color getRandomColor() {Random random = new Random();int r=random.nextInt(256);int g = random.nextInt(256);int b = random.nextInt(256);Color color = new Color(r, g, b);return color;}}
ManagerLoginServlet类
String checkCode = req.getParameter("checkCode");//先校验验证码，只有验证码正确时，才校验登录的账号和密码//首先获取session,再获取session中的code属性的值，与输入框的值进行比较if (req.getSession().getAttribute("code").equals(checkCode)){//验证码正确时，执行登录名和登录密码的验证}else {//验证码错误req.setAttribute("tips","<label style='color:red'>登录失败，验证码错误！</label>");req.getRequestDispatcher("login.jsp").forward(req,resp);}
下面是完整类中的代码
login.jsp界面（注意此时已经导入过jquery包了）
<%--Created by IntelliJ IDEA.User: lijianglinDate: /5/19Time: 17:32To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="assets/css/bootstrap.min.css" rel="stylesheet" /><link rel="stylesheet" href="assets/css/ace.min.css" /><link rel="stylesheet" href="assets/css/ace-rtl.min.css" /><link rel="stylesheet" href="assets/css/ace-skins.min.css" /><link rel="stylesheet" href="css/style.css"/><script src="assets/js/ace-extra.min.js"></script><script src="js/jquery-1.9.1.min.js"></script><script src="assets/layer/layer.js" type="text/javascript"></script><title>登录</title></head><body class="login-layout Reg_log_style" style="background: url(images/login_bg.png);"><div class="logintop"><span>欢迎后台管理界面平台</span><ul><li><a href="#">返回首页</a></li><li><a href="#">帮助</a></li><li><a href="#">关于</a></li></ul></div><div class="loginbody"><div class="login-container"><div class="center"></div><div class="space-6"></div><div class="position-relative"><div id="login-box" class="login-box widget-box no-border visible" style="margin-top: 50px;"><div class="widget-body" ><div class="widget-main" ><h4 class="header blue lighter bigger"><i class="icon-coffee green"></i>管理员登录</h4><div class="login_icon"><img src="images/login.png" /></div><form class="" id="form1" action="ManagerLoginServlet" method="post"><fieldset><ul><li class="frame_style form_error"><label class="user_icon"></label><input name="loginName" title="登录名" type="text" id="username"/><i>用户名</i></li><li class="frame_style form_error"><label class="password_icon"></label><input name="loginPwd" title="登录密码" type="password" id="userpwd"/><i>密码</i></li><li class="frame_style form_error"><label class="Codes_icon"></label><input name="checkCode" title="验证码" type="text" id="Codes_text"/><i>验证码</i><div class="Codes_region"><img src="CheckCodeServlet" width="100%" height="30" id="checkCodeImg"/><script type="text/javascript">$("#checkCodeImg").click(function () {//重新设置属性的值，当点击该图片时$("#checkCodeImg").attr("src","CheckCodeServlet?m="+Math.random());});</script></div></li></ul><div class="space"></div><div class="clearfix"><label class="inline"><input type="checkbox" class="ace"><span class="lbl">保存密码</span></label><button type="submit" class="width-35 pull-right btn btn-sm btn-primary" id="login_btn"><i class="icon-key"></i>登录</button></div><div class="space-4"></div></fieldset></form><div class="social-or-login center"><span class="bigger-110">通知</span></div><div class="social-login center"><%-- 从ManagerLoginServlet类中获取过来提示信息，取属性的value--%>提示 ${tips}</div></div><!-- /widget-main --><div class="toolbar clearfix"></div></div><!-- /widget-body --></div><!-- /login-box --></div><!-- /position-relative --></div></div><div class="loginbm">版权所有 </div><strong></strong></body></html><script>$('#form1').on('submit', function(){var num=0;var str="";$("input[type$='text'],input[type$='password']").each(function(n){if($(this).val()==""){layer.alert(str+=""+$(this).attr("title")+"不能为空！\r\n",{title: '提示框',icon:0,});num++;return false;}});if(num>0){ return false;}else{// 管理员已经输入了密码，登录名，验证码return true;}});$(document).ready(function(){$("input[type='text'],input[type='password']").blur(function(){var $el = $(this);var $parent = $el.parent();$parent.attr('class','frame_style').removeClass(' form_error');if($el.val()==''){$parent.attr('class','frame_style').addClass(' form_error');}});$("input[type='text'],input[type='password']").focus(function(){var $el = $(this);var $parent = $el.parent();$parent.attr('class','frame_style').removeClass(' form_errors');if($el.val()==''){$parent.attr('class','frame_style').addClass(' form_errors');} else{$parent.attr('class','frame_style').removeClass(' form_errors');}});})</script>
CheckCodeServlet类
package com.it.servlets;import javax.imageio.ImageIO;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import java.awt.*;import java.awt.image.BufferedImage;import java.io.IOException;import java.util.Random;@WebServlet("/CheckCodeServlet")public class CheckCodeServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req,resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//通过java中awt中提供的类绘制验证码图片// 1.创建一张图片int height=90;//验证码高度int width=300;//验证码宽度BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);//实例化一个图片对象// 2.绘制图片对象，从图片对象中获取绘制图片的笔Graphics2D pen = image.createGraphics();//a.绘制背景pen.setColor(getRandomColor());pen.fillRect(0,0,width,height);//绘制实心矩形//b.绘制验证码字符串int letterNum=4;//验证码图片上的字符的个数int space=20;//验证码图片上两个字母之间的空隙int letterWidth=(width-(letterNum+1)*space)/letterNum;//计算每个字母占据的宽度// for循环每循环一次，绘制一个字母（小写字母的ascii码：97-122）Random random = new Random();String code ="";for (int i=0;i<letterNum;i++){// 随机生成一个小写字母int ascii = random.nextInt(26) + 97;//97-122byte[] bytes={(byte) ascii};String letter=new String(bytes);code = code + letter;//为了保存验证码字符到session// 绘制字母pen.setColor(getRandomColor());pen.setFont(new Font("Gulim",Font.BOLD,70));pen.drawString(letter,space+(letterWidth+space)*i,height-space);//把该字母写在画布上}HttpSession session = req.getSession();session.setAttribute("code",code);//添加图片干扰，防止机器自动识别// 图片绘制完成后，将图片通过response输出流响应到客户端ImageIO.write(image,"png",resp.getOutputStream());}private Color getRandomColor() {Random random = new Random();int r=random.nextInt(256);int g = random.nextInt(256);int b = random.nextInt(256);Color color = new Color(r, g, b);return color;}}
ManagerLoginServlet类
package com.it.servlets;import com.it.entity.Manager;import com.it.service.ManagerService;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.sql.SQLException;//用于管理员登录验证的servlet@WebServlet("/ManagerLoginServlet")public class ManagerLoginServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// doGet中写了doPost方法，可以所有方法都在doPost方法，这样不管传过来是get还是post都可以成功调用方法doPost(req,resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//1.接收账号、密码、验证码req.setCharacterEncoding("utf-8");// 从输入框中获取输入的内容，参数是输入框的名字。String loginName = req.getParameter("loginName");String loginPwd = req.getParameter("loginPwd");String checkCode = req.getParameter("checkCode");//先校验验证码，只有验证码正确时，才校验登录的账号和密码//首先获取session,再获取session中的code属性的值，与输入框的值进行比较if (req.getSession().getAttribute("code").equals(checkCode)){//验证码正确时，执行登录名和登录密码的验证//2.调用ManagerService进行校验ManagerService managerService = new ManagerService();try {Manager manager = managerService.checkManagerLogin(loginName, loginPwd);// 3.判断验证结果if (manager==null){//登录失败，跳转到登录界面并进行错误提示req.setAttribute("tips","<label style='color:red'>登录失败，密码或账号错误！</label>");req.getRequestDispatcher("login.jsp").forward(req,resp);}else {//登录成功，跳转到index.jsp界面resp.sendRedirect("index.jsp");}} catch (SQLException e) {e.printStackTrace();}}else {//验证码错误req.setAttribute("tips","<label style='color:red'>登录失败，验证码错误！</label>");req.getRequestDispatcher("login.jsp").forward(req,resp);}}}
