登錄驗證碼
jsp:
<div class="middle-box text-center loginscreen animated fadeInDown">
<div>
<div>
<h1 class="logo-name" style="font-size: 50px; font-weight: 300; color: #BBBBBB;" >教 材 申 報 系 統</h1>
</div>
<h3>歡迎使用系統</h3>
<form class="m-t" role="form" id="loginForm" >
<div class="form-group">
<input type="text" id="userCode" class="form-control" name="sysUser.usercode" placeholder="用戶名" required="">
</div>
<div class="form-group">
<input type="password" id="password" class="form-control" name="sysUser.password" placeholder="密碼" required="">
</div>
<div class="form-group">
<span style=" float: left; ">
<input type="text " id="yzm" class="form-control" name="yzm" placeholder="驗證碼" required="" style=" width: 210px;">
</span> <img name="checkimg" id="checkimg" title="看不清楚,換一張" style="cursor: pointer;vertical-align:middle" border="0" onclick="refreshImg();"/>
</div>
</form>
<button class="btn btn-primary block full-width m-b" id="ykLogBut">登 錄</button>
<button class="btn btn-primary block full-width m-b" id="reset" >重 輸</button>
<p class="text-muted text-center"> <a href="boot/login.html#"><small>忘記密碼了?</small></a> | <a href="boot/register.html">註冊一個新賬號</a>
</p>
</div>
</div>
js:
$(function() {
$("#userCode").keydown(function(a){
if(a.keyCode==13){
userSub();
}
});
$("#password").keydown(function(a){
if(a.keyCode==13){
userSub();
}
});
$("#yzm").keydown(function(a){
if(a.keyCode==13){
userSub();
}
});
refreshImg();
$("#ykLogBut").click(function(){
userSub();
});
$("#reset").click(function(){
$("#userCode").val(‘‘);
$("#password").val(‘‘);
$("#yzm").val(‘‘);
});
});
$("#checkimg").attr("src",‘verifyCodeAction!getImage.action?t=‘+Math.random());
java代碼:
public void getImage() {
HttpServletResponse resp = ServletActionContext.getResponse();
// 禁止圖像緩存。
resp.setHeader("Pragma", "no-cache");
resp.setHeader("Cache-Control", "no-store");
resp.setDateHeader("Expires", 0);
resp.setContentType("image/jpeg");
// 將圖像輸出到Servlet輸出流中。
ServletOutputStream out = null;
try {
out = resp.getOutputStream();
BufferedImage buffImg = this.creatImage("");
ImageIO.write(buffImg, "jpeg", out);
out.flush();
// resp.flushBuffer();
// resp.reset();
} catch (IOException e) {
e.printStackTrace();
}finally{
if(out!=null){
try {
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
private BufferedImage creatImage(String sessionName) {
char[] codeSequence = { ‘A‘, ‘B‘, ‘C‘, ‘D‘, ‘E‘, ‘F‘, ‘G‘, ‘H‘, ‘I‘, ‘J‘, ‘K‘, ‘L‘, ‘M‘, ‘N‘, ‘O‘, ‘P‘, ‘Q‘, ‘R‘, ‘S‘, ‘T‘, ‘U‘, ‘V‘, ‘W‘, ‘X‘, ‘Y‘, ‘Z‘ };
// 在內存中創建圖象
int width = 80, height = 30;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
// 獲取圖形上下文
Graphics g = image.getGraphics();
// 生成隨機類
Random random = new Random();
// 設定背景色
g.setColor(getRandColor(100, 250));
g.fillRect(0, 0, width, height);
// 設定字體
g.setFont(new Font("Comic Sans MS", Font.PLAIN, 20));
// 畫邊框
// g.setColor(new Color());
// g.drawRect(0,0,width-1,height-1);
// 隨機產生155條幹擾線,使圖象中的認證碼不易被其它程序探測到
g.setColor(getRandColor(160, 200));
for (int i = 0; i < 160; i++) {
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(12);
int yl = random.nextInt(12);
g.drawLine(x, y, x + xl, y + yl);
}
// 取隨機產生的認證碼(4位數字)
// String rand = request.getParameter("rand");
// rand = rand.substring(0,rand.indexOf("."));
String sRand = "";
for (int i = 0; i < 4; i++) {
// String rand = String.valueOf(random.nextInt(10));
String rand = String.valueOf(codeSequence[random.nextInt(codeSequence.length)]);
sRand += rand;
// 將認證碼顯示到圖象中
g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110))); // 調用函數出來的顏色相同,可能是因為種子太接近,所以只能直接生成
g.drawString(rand, 18 * i + 6, 22);
}
if(StringUtils.isNotEmpty(sessionName)){
ActionContext.getContext().getSession().put(sessionName, sRand);
} else {
ActionContext.getContext().getSession().put("validateCode", sRand);登錄賬戶和密碼和驗證碼判定的方法中通過ActionContext.getContext().getSession().get("validateCode").toString().toLowerCase()獲得驗證碼的值
}
// 圖象生效
g.dispose();
return image;
}
登錄驗證碼