登录窗口代码HTML
<section class="mainlogin">
<div class="container">
<div class="col-md-4 col-md-offset-7 logincontent">
<h4>员工登录</h4>
<form class="form-horizontal" id="loginform" name="loginform" method="post" action="">
<div class="form-group" id="idInputLine">
<label for="inputPassword3" class="col-sm-3 control-label">账号</label>
<div class="col-sm-8">
<input id="loginform:idInput" type="text" name="username" class="form-control" placeholder="请输入手机号/邮箱/用户名">
</div>
</div>
<div class="form-group" id="pwdInputLine">
<label id="loginform:pwdInput" class="col-sm-3 control-label">密码</label>
<div class="col-sm-8">
<input for="pwdInput" type="password" name="password" class="form-control" id="inputaccount" placeholder="请输入您的密码">
</div>
</div>
<div class="form-group">
<label for="inputvalidate" class="col-sm-3 control-label">验证码</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputaccount" placeholder="请输入验证码">
</div>
<div class="col-sm-4">
<img id="loginform:vCode" src="validatecode.jsp" onclick="javascript:document.getElementById('loginform:vCode'). src='validatecode.jsp?'+Math.random();" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-4">
<input type="checkbox"><span class="size12"> 记住用户名</span>
</div>
<div class="col-sm-4">
<a href="#"><span class="size12 forget">忘记密码</span></a>
</div>
</div>
<div class="col-md-offset-3 col-md-8">
<a href="./index.html" id="loginform:j_id19" name="loginform:j_id19"
class="btn btn-danger" target="_blank">立即登录</a>
</div>
</form>
</div>
</div>
</section>
validatecode.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.Random"%>
<%@ page import="java.io.OutputStream"%>
<%@ page import="java.awt.Color"%>
<%@ page import="java.awt.Font"%>
<%@ page import="java.awt.Graphics"%>
<%@ page import="java.awt.image.BufferedImage"%>
<%@ page import="javax.imageio.ImageIO"%>
<%
int width = 100;
int height = 32;
//create the image
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();
// set the background color
g.setColor(new Color(0xDCDCDC));
g.fillRect(0, 0, width, height);
// draw the border
g.setColor(Color.black);
g.drawRect(0, 0, width - 1, height - 1);
// create a random instance to generate the codes
Random rdm = new Random();
String hash1 = Integer.toHexString(rdm.nextInt());
// make some confusion
for (int i = 0; i < 50; i++) {
int x = rdm.nextInt(width);
int y = rdm.nextInt(height);
g.drawOval(x, y, 0, 0);
}
// generate a random code
String capstr = hash1.substring(0, 4);
session.setAttribute("key", capstr);//将验证码存储到session中
g.setColor(new Color(0, 100, 0));
g.setFont(new Font("Candara", Font.BOLD, 24));
g.drawString(capstr, 8, 24);
g.dispose();
response.setContentType("image/jpeg");
out.clear();
out = pageContext.pushBody();
OutputStream strm = response.getOutputStream();
ImageIO.write(image, "jpeg", strm);
strm.close();
%>
后台对验证码的验证
// 判断验证码 是否正确
String key = (String) ServletActionContext.getRequest().getSession().getAttribute("key");// session中验证码
if (key == null || !key.equals(ServletActionContext.getRequest().getParameter("checkcode"))) {
// 验证码无效
ServletActionContext.getRequest().setAttribute("msg", "验证码错误");
return "input";
}