在注册、登录的页面上经常会出现验证码,为了防止频繁的注册或登录行为。下面是我用java制作的一个验证码,供初学者参考,做完验证码之后,我们可以用ajax进行验证码验证。
功能一:验证码制作的代码,点击图片,验证码进行更换
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
/**
* 显示验证码图片
*/
public void showCheckCode(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 调用业务逻辑
String checkCode = getCheckCode();
//将验证码字符放入session域对象中
req.getSession().setAttribute( "checkCode" , checkCode);
//图片宽
int width = 80 ;
//图片高
int height = 30 ;
//在内存中创建一个图片
BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
//获取一个画笔
Graphics g = image.getGraphics();
//设置画笔颜色,用灰色做背景
g.setColor(Color.GRAY);
//向Image中填充灰色
g.fillRect( 0 , 0 ,width,height);
Random r = new Random();
//设置3条干扰线
for ( int i = 0 ; i < 3 ; i++) {
g.setColor( new Color(r.nextInt( 255 ),r.nextInt( 255 ),r.nextInt( 255 )));
g.drawLine(r.nextInt( 80 ), r.nextInt( 30 ), r.nextInt( 80 ), r.nextInt( 80 ));
}
//设置验证码字符串的颜色
g.setColor( new Color(r.nextInt( 255 ),r.nextInt( 255 ),r.nextInt( 255 )));
//设置字符的大小
g.setFont( new Font( "黑体" ,Font.BOLD, 24 ));
//在图片中写入验证码字符串
g.drawString(checkCode, 15 , 20 );
//将Image对象以PNG格式输出给所有的客户端
ImageIO.write(image, "PNG" ,resp.getOutputStream());
}
/**
* 获取4位验证码中的4位随机字符串
*/
public static String getCheckCode(){
//验证码中的字符由数字和大小写字母组成
String code = "0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM" ;
Random r = new Random();
StringBuffer sb = new StringBuffer();
for ( int i = 0 ; i < 4 ; i++) {
sb.append(code.charAt(r.nextInt(code.length())));
}
return sb.toString();
}
|
jsp页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<script type= "text/javascript" >
function changeCodeImage(img){
img.src = "${pageContext.request.contextPath}/UserServlet?method=showCheckCode&time=" + new Date().getTime();
}
</script>
<div class = "form-group" >
<label for = "date" class = "col-sm-2 control-label" >验证码</label>
<div class = "col-sm-3" >
<input type= "text" class = "form-control" id= "writeCode" onkeyup= "checkCodeMethod(this.value)" >
</div>
<div class = "col-sm-2" >
<img src= "${pageContext.request.contextPath}/UserServlet?method=showCheckCode" id= "checkCodeImage" title= "点击换一张" onclick= "changeCodeImage(this)" />
</div>
<span id= "checkCodeSpan" ></span>
</div>
|
功能二:ajax动态验证验证码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
/**
* 验证验证码
*/
public void checkCode(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取从页面中接收到的验证码参数
String checkCode = req.getParameter( "checkCode" );
//从session域对象中获取验证码
String sessionCode = (String) req.getSession().getAttribute( "checkCode" );
//判断验证码是否相同
if (checkCode.equalsIgnoreCase(sessionCode)) {
resp.getWriter().print( true );
} else {
resp.getWriter().print( false );
}
|
jsp页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
< script type = "text/javascript" >
function changeCodeImage(img){
img.src = "${pageContext.request.contextPath}/UserServlet?method=showCheckCode&time="+new Date().getTime();
}
function checkCodeMethod(code){
$.get("${pageContext.request.contextPath}/UserServlet?method=checkCode",
{ checkCode: code},
function(data){
if (data == 'true') {
document.getElementById("checkCodeSpan").innerHTML = "< font >验证码正确!</ font >";
}else {
document.getElementById("checkCodeSpan").innerHTML = "< font >验证码错误!</ font >";
}
}
);
}
</ script >
< div class = "form-group" >
< label for = "date" class = "col-sm-2 control-label" >验证码</ label >
< div class = "col-sm-3" >
< input type = "text" class = "form-control" id = "writeCode" onkeyup = "checkCodeMethod(this.value)" >
</ div >
< div class = "col-sm-2" >
< img src = "${pageContext.request.contextPath}/UserServlet?method=showCheckCode" id = "checkCodeImage" title = "点击换一张" onclick = "changeCodeImage(this)" />
</ div >
< span id = "checkCodeSpan" ></ span >
</ div >
|
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
原文链接:http://blog.csdn.net/shuaicihai/article/details/54730590