在進行表單設計中，驗證碼的增加恰恰可以實現是否為“人為”操作，增加驗證碼可以防止網站數據庫信息的冗雜等...
現在，我將講述通過servlet實現驗證碼：
驗證碼作為一個圖片，在頁面中為“畫”出來的，它是如何畫出來的呢？
<生成圖片>
{
生成圖片的類：
1.BufferedImage圖像數據緩沖區
2.Graphics繪制圖片
3.color獲取顏色
4.Random獲取隨機數
5.ImageIO輸出圖片
}
///////////////////////////////////////////////////////////////////////////
<生成驗證碼圖片>
1.在index.jsp中寫入以下代碼
<form method="get" action="demo5" onsubmit="return isvalidate();" > 姓名：<input type="text" placeholder="請輸入姓名" name="myname"> 密碼：<input type="password" placeholder="請輸入密碼" name="mypassword"> 驗證碼:<input type="text" name="checkCode"/>
<img alt="驗證碼" id="imagecode" src="demo4"/>
<a href="javascript:reloadCode()">看不清楚</a><br>
<input type="submit" value="提交"/>
</form>
2.在src中創建ServletDemo4類
public class ServletDemo4 extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException { //這個方法實現驗證碼的生成
BufferedImage bi = new BufferedImage(68, 22, BufferedImage.TYPE_INT_RGB);//創建圖像緩沖區
Graphics g = bi.getGraphics(); //通過緩沖區創建一個畫布
Color c = new Color(255, 255, 255); //創建顏色
/*根據背景畫了一個矩形框 */ g.setColor(c);//為畫布創建背景顏色
g.fillRect(0, 0, 68, 22); //fillRect:填充指定的矩形 // X和Y用於指定矩形左上角也就是相對於原點的位置，width和height用於指定矩形的寬和高。
char[] ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray();//轉化為字符型的數組
Random r = new Random(); int len = ch.length; int index; //index用於存放隨機數字
StringBuilder sb = new StringBuilder(); for (int i = 0; i < 4; i++) { index = r.nextInt(len);//產生隨機數字
g.setColor(new Color(r.nextInt(88), r.nextInt(188), r.nextInt(255))); //設置顏色隨機
g.drawString(ch[index] + "", (i * 15) + 3, 18);//畫數字以及數字的位置
sb.append(ch[index]); } request.getSession().setAttribute("piccode", sb.toString()); //將數字保留在session中，便於后續的使用
ImageIO.write(bi, "JPG", response.getOutputStream()); } }
3.在WEB-INF進行配置文件
<servlet-name>ServletDemo4</servlet-name>
<servlet-class>com.neunb.servlet.ServletDemo4</servlet-class>
</servlet>
<servlet>
<servlet-mapping>
<servlet-name>ServletDemo4</servlet-name>
<url-pattern>/demo4</url-pattern>
</servlet-mapping>
------華麗分割線-------
<輸入信息及驗證碼與進行校驗>
1.創建ServletDemo5類、
public class ServletDemo5 extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException //用於驗證驗證碼
{ String name=request.getParameter("myname"); String password=request.getParameter("mypassword"); String piccode = (String) request.getSession().getAttribute("piccode"); String checkCode = request.getParameter("checkCode"); //取值 //checkCode=checkCode.toUpperCase(); //把字符全部轉換為大寫的（此語句可以用於驗證碼不區分大小寫）
response.setContentType("text/html;charset=gbk");//解決亂碼問題
PrintWriter out = response.getWriter(); Map<String,String> map=new HashMap<>(); map.put("小紅","123");//存入用戶名，密碼
map.put("小麗","123"); map.put("小張","123"); String html = "<html><head><title></title></head><body><p>登錄成功</p><a href='index.jsp'>返回</a></body></html>";//設置登錄成功頁面
if (checkCode.equals(piccode)) { if(map.containsKey(name)){ if(map.get(name).equals(password)){ out.write(html);//信息驗證成功，跳轉
} else out.println("密碼錯誤！！！"); } else out.println("用戶名不存在！！！"); } else { out.println("驗證碼輸入錯誤！！！"); } out.flush();//將流刷新
out.close();//將流關閉
} }
2.配置WEB-INF
<servlet-name>ServletDemo5</servlet-name>
<servlet-class>com.neunb.servlet.ServletDemo5</servlet-class>
</servlet>
<servlet>
<servlet-mapping>
<servlet-name>ServletDemo5</servlet-name>
<url-pattern>/demo5</url-pattern>
</servlet-mapping>
------華麗分割線-----
在點擊頁面中的看不清楚時，需要進行刷新，在頁面中書寫一段JS代碼
<script type="text/javascript"> function reloadCode() {//切換驗證碼
var time = new Date().getTime(); document.getElementById("imagecode").src = "demo4?d=" + time; } function isvalidate() {//對輸入信息合格性進行判斷
if(document.getElementsByName("myname")[0].value.length<2||document.getElementsByName("myname")[0].value.length>12) { alert("用戶名不合法(提示：長度在2-12個字符組成)"); return false; } if(document.getElementsByName("mypassword")[0].value.length<3) { alert("密碼長度至少為3位"); return false; } if(document.getElementsByName("checkCode")[0].value.length!=4) { alert("驗證碼為4位"); return false; } return true; } </script>
運行結果截圖：
