在注冊、登錄的頁面上經(jīng)常會出現(xiàn)驗證碼，為了防止頻繁的注冊或登錄行為。下面是我用java制作的一個驗證碼，供初學(xué)者參考，做完驗證碼之后，我們可以用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 { // 調(diào)用業(yè)務(wù)邏輯 String checkCode = getCheckCode(); //將驗證碼字符放入session域?qū)ο笾?/code> req.getSession().setAttribute("checkCode", checkCode); //圖片寬 int width = 80; //圖片高 int height = 30; //在內(nèi)存中創(chuàng)建一個圖片 BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB); //獲取一個畫筆 Graphics g = image.getGraphics(); //設(shè)置畫筆顏色，用灰色做背景 g.setColor(Color.GRAY); //向Image中填充灰色 g.fillRect(0,0,width,height); Random r = new Random(); //設(shè)置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)); } //設(shè)置驗證碼字符串的顏色 g.setColor(new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255))); //設(shè)置字符的大小 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(){ //驗證碼中的字符由數(shù)字和大小寫字母組成 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動態(tài)驗證驗證碼
|
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 { //獲取從頁面中接收到的驗證碼參數(shù) String checkCode = req.getParameter("checkCode"); //從session域?qū)ο笾蝎@取驗證碼 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
