JSP之登录验证码

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" οnclick="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>

View Code

 

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);
    }
}

View Code

实际使用中注意导入tomcat服务器，本人使用的测试版本为Apache Tomcat v8.0。

　

 

更多专业前端知识，请上 【猿2048】www.mk2048.com