1.JSP页面中设置输入选项和验证码
<form action=login.do" method="post" >
<div class="line_1" >
<span class="line_1_span">会员登录</span>
<input type="text" class="form-control line_2_input" id="exampleInputAmount" placeholder="手机号" name="username">
</div>
<div class="line_3" >
<input type="password" class="form-control line_3_input" id="exampleInputPassword3" placeholder="密码" name="password">
</div>
<div class="line_4">
<input type="text" placeholder="验证码" name="code">
<img id="code" alt="点击刷新" src="code.do" onclick="refreshCode()"/>
</div>
</form>
2.login.jsp中设置JS的方法
<script type="text/javascript">
function refreshCode(){
var codeImg = document.getElementById("code");
var rand = Math.random();
codeImg.src="code.do?random="+rand;
}
</script>
3.配置XML文件
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1"> <display-name>D5.10_yanzhengma</display-name> <servlet> <servlet-name>code.do</servlet-name> <servlet-class>com.phone1000.lq.yanzheng.CodeServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name> code.do</servlet-name> <url-pattern>/code.do</url-pattern> </servlet-mapping> </web-app>
4.servlet中代码如下
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.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * * @author lq * */ public class CodeServlet extends HttpServlet{ public static final int NUMBER = 5; //1,0,l,容易混淆故去掉这几个字符 String strs = "qwertyuipasdfghjkzxcvbnm23456789一二三四五六七八九"; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //创建模板大小 BufferedImage bufferImage = new BufferedImage(100, 40, BufferedImage.TYPE_INT_RGB); //创建画笔 Graphics graphics = bufferImage.getGraphics(); //调整画笔颜色 graphics.setColor(Color.green); //设置画笔初始位子和可画区域大小 graphics.fillRect(0, 0, 100, 40); int size = strs.length(); char[] codes = new char[NUMBER]; Random random = new Random(); graphics.setFont(new Font("宋体", Font.PLAIN, 16)); for (int i=0; i<NUMBER; i++){ int index = random.nextInt(size); Character c = strs.charAt(index); codes[i]=c; graphics.setColor(Color.BLUE); //画出单个字符大小位置 graphics.drawString(c.toString(),i*20,30); } //将生成的验证码字符串保存在session中 req.getSession().setAttribute("code", new String(codes)); //回收资源 graphics.dispose(); //显示图像及格式 ImageIO.write(bufferImage, "png", resp.getOutputStream()); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doGet(req,resp); } }
实际使用中注意导入tomcat服务器,本人使用的测试版本为Apache Tomcat v8.0。