快捷導(dǎo)航

java 制作驗證碼并進行驗證實例詳解

更新時間：2017年04月24日 11:36:09 投稿：lqh

這篇文章主要介紹了java 制作驗證碼并進行驗證實例詳解的相關(guān)資料,需要的朋友可以參考下

java 制作驗證碼并進行驗證實例詳解

在注冊、登錄的頁面上經(jīng)常會出現(xiàn)驗證碼，為了防止頻繁的注冊或登錄行為。下面是我用java制作的一個驗證碼，供初學(xué)者參考，做完驗證碼之后，我們可以用ajax進行驗證碼驗證。

功能一：驗證碼制作的代碼，點擊圖片，驗證碼進行更換

/**
 * 顯示驗證碼圖片
 */
public void showCheckCode(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  // 調(diào)用業(yè)務(wù)邏輯
  String checkCode = getCheckCode();
  //將驗證碼字符放入session域?qū)ο笾?
  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頁面

<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)驗證驗證碼

/**
 * 驗證驗證碼
 */
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頁面

<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>

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章: