整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
ndex.jsp
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" language="java" errorPage="" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax實現無刷新的彩色驗證碼</title>
<link rel="stylesheet" href="css/style.css" />
<script src="js/check.js"></script>
<script language="javascript" src="js/ajaxRequest.js"></script>
<script language="javascript">
function onerror(){
alert("您的操作有誤！");
}
//生成并顯示驗證碼
function getCheckCodeFun(showCheckCode,checkCode){
showCheckCode.style.display='';
if(document.getElementById("resultMessage").innerHTML=="溫馨提示：單擊驗證碼輸入框，獲取驗證碼！驗證碼區分大小寫"){
getCheckCode1(showCheckCode,checkCode); //生成驗證碼
}
checkCode.focus();
}
//生成驗證碼
function getCheckCode1(showCheckCode,checkCode){
let loader1=new net.AjaxRequest("getPictureCheckCode.jsp?nocache="+new Date().getTime(),deal_getCheckCode,onerror,"GET");
showCheckCode.style.display='';
checkCode.focus();
}
function deal_getCheckCode(){
document.getElementById("showCheckCode").innerHTML=this.req.responseText;
}
//隱藏驗證碼顯示框
function showCheckCodeClear(){
showCheckCode.style.display='none';
}
/***********驗證驗證碼是否正確*******************************/
function checkCheckCode(inCheckCode){
if(inCheckCode!=""){
let loader=new net.AjaxRequest("checkCheckCode.jsp?inCheckCode="+inCheckCode+"&nocache="+new Date().getTime(),deal_checkCheckCode,onerror,"GET");
}
}
function deal_checkCheckCode(){
let h=this.req.responseText;
//去除字符串中的Unicode空白符
h=h.replace(/\s/g,"");
if(h==1){
document.getElementById("resultMessage").removeChild(document.getElementById("resultMessage").childNodes[0]);
document.getElementById("resultMessage").appendChild(document.createTextNode(" "));
document.getElementById("messageImg").src="images/dui2.gif";
document.getElementById("resultMessage").removeChild(document.getElementById("resultMessage").childNodes[0]);
document.getElementById("resultMessage").appendChild(document.createTextNode("恭喜您，驗證碼正確！"));
document.getElementById("btn_Submit").disabled=false;
}
else{
document.getElementById("messageImg").src="images/cuo2.gif";
document.getElementById("resultMessage").removeChild(document.getElementById("resultMessage").childNodes[0]);
document.getElementById("resultMessage").appendChild(document.createTextNode("您輸入的驗證碼不正確！"));
}
}
</script>
</head>
<body onblur="showCheckCodeClear()">
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="22" background="images/bg_left.gif"> </td>
<td width="760">
<table width="760" height="646" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td height="126" align="center">
<%@include file="top.jsp"%>
</td>
</tr>
<tr>
<td height="446" valign="top">
<table width="100%" height="164" border="0" cellpadding="0" cellspacing="0" class="tableBorder_LRB">
<tr>
<td height="49" colspan="6" background="images/reply_navigate.gif"> </td>
</tr>
<tr>
<td width="5%" height="143" onClick="showCheckCodeClear()"> </td>
<td colspan="4" align="center" valign="top">
<form name="form1" method="post" action="">
<table width="100%" height="383" border="0" cellpadding="0" cellspacing="0">
<tr onClick="showCheckCodeClear()">
<td width="14%" height="36" align="center">留言人：</td>
<td colspan="3">
<input name="author" type="text" id="author" size="30" value="">
* </td>
</tr>
<tr onClick="showCheckCodeClear()">
<td height="107" align="center">表 情：</td>
<td colspan="3">
<input name="face" type=radio class="noborder" value=0 checked>
<img height=20
src="images/face/face0.gif" width=20 align=middle border=0>
<input name="face" type=radio class="noborder" value=1>
<img height=19
src="images/face/face1.gif" width=19 align=middle border=0>
<INPUT name="face" type=radio class="noborder" value=2>
<img height=20
src="images/face/face2.gif" width=20 align=middle border=0>
<input name="face" type=radio class="noborder" value=3>
<img height=20
src="images/face/face3.gif" width=20 align=middle border=0>
<input name="face" type=radio class="noborder" value=4>
<img height=20
src="images/face/face4.gif" width=20 align=middle border=0>
<input name="face" type=radio class="noborder" value=5>
<img height=20
src="images/face/face5.gif" width=20 align=middle border=0>
<input name="face" type=radio class="noborder" value=6>
<img height=20
src="images/face/face6.gif" width=20 align=middle border=0>
<input name="face" type=radio class="noborder" value=7>
<img height=20
src="images/face/face7.gif" width=20 align=middle border=0><br>
<input name="face" type=radio class="noborder" value=8>
<img height=20
src="images/face/face8.gif" width=20 align=middle border=0>
<input name="face" type=radio class="noborder" value=9>
<img height=20
src="images/face/face9.gif" width=20 align=middle border=0>
<input name="face" type=radio class="noborder" value=10>
<img height=20
src="images/face/face10.gif" width=20 align=middle border=0>
<input name="face" type=radio class="noborder" value=11>
<img height=20
src="images/face/face11.gif" width=20 align=middle border=0>
<input name="face" type=radio class="noborder" value=12>
<img height=20
src="images/face/face12.gif" width=20 align=middle border=0>
<input name="face" type=radio class="noborder" value=13>
<img height=20
src="images/face/face13.gif" width=20 align=middle border=0>
<input name="face" type=radio class="noborder" value=14>
<img height=20
src="images/face/face14.gif" width=20 align=middle border=0>
<input name="face" type=radio class="noborder" value=15>
<img height=20
src="images/face/face15.gif" width=20 align=middle border=0><br>
</td>
</tr>
<tr onClick="showCheckCodeClear()">
<td height="38" align="center">Email：</td>
<td colspan="3"><input name="email" type="text" id="email" size="72"></td>
</tr>
<tr onClick="showCheckCodeClear()">
<td height="160" align="center">留言內容：</td>
<td colspan="3">
<textarea name="content" cols="70" rows="10" class="wenbenkuang" id="content">
</textarea>
*</td>
</tr>
<tr>
<td height="42" align="center" valign="bottom" onClick="showCheckCodeClear()">驗證碼：</td>
<td width="6%">
<div style="position:absolute">
<div id="showCheckCode" style="display:none; padding:3px" align="center" >
<img src="images/checkCodePicture.jpg" id="createCheckCode" width="200" height="60">
<a href="#" style="color:#000000" onClick="getCheckCode1(showCheckCode,checkCode)">看不清?換一個</a>
</div>
<input name="checkCode" type="text" id="checkCode" size="6" value="" title="單擊驗證碼輸入框，獲取驗證碼" onClick="getCheckCodeFun(showCheckCode,checkCode);" onBlur="checkCheckCode(this.value)">
</div>
</td>
<td width="6%" valign="bottom" id="resultCheckCode1" onClick="showCheckCodeClear()">
<img id="messageImg" src='images/tishi2.gif' width='16' height='16'>
</td>
<td width="74%" valign="bottom" id="resultCheckCode2" onClick="showCheckCodeClear()">
<div id="resultMessage">溫馨提示：單擊驗證碼輸入框，獲取驗證碼！驗證碼區分大小寫</div>
</td>
</tr>
<tr onClick="showCheckCodeClear()">
<td height="42" align="center"> </td>
<td colspan="3" >
<input name="btn_Submit" id="btn_Submit" type="button" class="btn_grey" value="保存" onClick="check(form1)" disabled="disabled">
<input name="Submit2" type="reset" class="btn_grey" value="重置">
</td>
</tr>
</table>
</form>
</td>
<td width="6%" onClick="showCheckCodeClear()"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" class="tableBorder_LR">
<%@include file="copyright.jsp"%>
</td>
</tr>
</table>
<td width="19" background="images/bg_right.gif"> </td>
</tr>
</table>
</body>
</html>
checkCheckCode.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String inCheckCode=request.getParameter("inCheckCode");
if(session.getAttribute("randCheckCode").equals(inCheckCode)){
out.println("1");
}
else{
out.println("0");
}
%>
copyright.jsp
<table width="99%" height="72" border="0" align="center" cellpadding="-2" cellspacing="-2">
<tr>
<td height="2" colspan="4"></td>
</tr>
<tr>
<td width="124" height="23"> </td>
<td valign="bottom" align="center"> CopyRight ?</td>
<td width="141"> </td>
</tr>
<tr>
<td height="28"> </td>
<td align="center"></td>
<td> </td>
</tr>
<tr>
<td height="8"></td>
<td height="8"></td>
<td height="8"></td>
</tr>
</table>
getPictureCheckCode.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.Random" %>
<%Random random=new Random();%>
<img src="<% out.println("PictureCheckCode?rand="+random.nextInt(10000));%>" id="createCheckCode" width="200" height="60">
<a href="#" style="color:#EEEEEE" onclick="getCheckCode1(showCheckCode,checkCode)">看不清?換一個</a>
top.jsp
<table width="761" height="126" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="761" align="left" valign="top">
<img src="images/bg_top.gif" width="761" height="126" />
</td>
</tr>
</table>
style.css
body{
font-size: 9pt;
margin-left:0px;
margin-top:0px;
background-image: url(../images/bg.gif);
scrollbar-face-color: #5ac3f5;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #fcfcfc; color: #000000;
scrollbar-3dlight-color: #ececec;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #ececec;
scrollbar-darkshadow-color: #999966;
background-color: #fcfcfc
}
td {
font-size: 9pt;
line-height:150%;
}
a:hover {
font-size: 9pt;
color: #FF4400;
}
a {
font-size: 9pt;
text-decoration: none;
color: #3C404D;
}
.btn_grey {
font-family: "宋體";
font-size: 9pt;
color: #333333;
background-color: #eeeeee;
cursor: hand;
padding:1px;
height:19px;
border-top: 1px solid #FFFFFF;
border-right:1px solid #666666;
border-bottom: 1px solid #666666;
border-left: 1px solid #FFFFFF;
}
.word_grey {
font-size: 9pt;
color: #333333;
}
.txt_grey {
font-family: "宋體";
font-size: 9pt;
color: #333333;
border: 1px solid #999999;
width:110px;
}
input {
font-family: "宋體";
font-size: 9pt;
color: #333333;
border: 1px solid #999999;
}
.wenbenkuang {
font-family: "宋體";
font-size: 9pt;
color: #333333;
border: 1px solid #999999;
}
.search {
font-family: 宋體;
font-size: 9pt;
color: #000000;
background-color: #EEEEEE;
border: 1px Hidden #000000;
}
.tableBorder {
border: #39B4E2 1px solid
}
.tableBorder_LRB {
border: #39B4E2 1px solid;
border-top-style:none;
}
.tableBorder_LR {
border: #39B4E2 1px solid;
border-top-style:none;
border-bottom-style:none;
}
.tableBorder_Top{
border:1px solid #39B4E2;
border-bottom-style:none;
border-left-style:none;
border-right-style:none
}
.tableBorder_Botton{
border:1px solid #39B4E2;
border-top-style:none;
border-left-style:none;
border-right-style:none
}
hr{
color:#39B4E2;
}
.ToolTip {
border-right: #39b4e2 1px solid;
border-top: #39b4e2 1px solid;
border-left: #39b4e2 1px solid;
color: #333333;
border-bottom: #39b4e2 1px solid;
background-color: #f9f9f9;
}
.noborder{
border-style:none;
}
.tableBorder_B{
border:1px solid #39B4E2;
border-left-style:none;
border-right-style:none;
border-Top-style:none;
}ajaxRequest.js
let net=new Object();
//編寫構造函數
net.AjaxRequest=function(url,onload,onerror,method,params){
this.req=null;
this.onload=onload;
this.onerror=(onerror) ? onerror : this.defaultError;
this.loadDate(url,method,params);
}
//編寫用于初始化XMLHttpRequest對象并指定處理函數，最后發送HTTP請求的方法
net.AjaxRequest.prototype.loadDate=function(url,method,params){
if (!method){
method="GET";
}
if (window.XMLHttpRequest){
this.req=new XMLHttpRequest();
}
else if (window.ActiveXObject){
this.req=new ActiveXObject("Microsoft.XMLHTTP");
}
if (this.req){
try{
let loader=this;
this.req.onreadystatechange=function(){
net.AjaxRequest.onReadyState.call(loader);
}
this.req.open(method,url,true);
if(method=="POST"){
this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
this.req.send(params);
}
catch (err){
this.onerror.call(this);
}
}
}
//重構回調函數
net.AjaxRequest.onReadyState=function(){
let req=this.req;
let ready=req.readyState;
if (ready==4){
if (req.status==200 ){
this.onload.call(this);
}
else{
this.onerror.call(this);
}
}
}
//重構默認的錯誤處理函籹
net.AjaxRequest.prototype.defaultError=function(){
alert("錯誤數據\n\n回調狀態:"+this.req.readyState+"\n狀態: "+this.req.status);
}
check.js
//判斷用戶的輸入是否合法
function check(myform){
if(myform.author.value==""){
alert("留言人不允許為空!");
myform.author.focus();
return;
}
if (myform.email.value!=""){
var i=myform.email.value.indexOf("@");
var j=myform.email.value.indexOf(".");
if((i<0)||(i-j>0)||(j<0)){
alert("您輸入的Email地址不正確，請重新輸入！");
myform.email.value="";
myform.email.focus();
return;
}
}
if(myform.content.value==""){
alert("留言內容不允許為空！");
myform.content.focus();
return;
}
if(myform.checkCode.value==""){
alert("驗證碼不允許為空！");
myform.checkCode.focus();
return;
}
alert("留言提交成功！");
myform.submit();
}
web.xml
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
<display-name>verificationCodeDemo2</display-name>
<servlet>
<servlet-name>PictureCheckCode</servlet-name>
<servlet-class>com.demo.PictureCheckCode</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>PictureCheckCode</servlet-name>
<url-pattern>/PictureCheckCode</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
PictureCheckCode
package com.demo;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.*;
import java.awt.geom.AffineTransform;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
public class PictureCheckCode extends HttpServlet {
public PictureCheckCode() {
super();
}
public void destroy() {
super.destroy();
}
public void init() throws ServletException {
super.init();
}
public Color getRandColor(int s, int e) {
Random random=new Random();
if (s > 255) s=255;
if (e > 255) e=255;
int r=s + random.nextInt(e - s);
int g=s + random.nextInt(e - s);
int b=s + random.nextInt(e - s);
return new Color(r, g, b);
}
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//禁止緩存
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "No-cache");
response.setDateHeader("Expires", 0);
// 指定生成的響應是圖片
response.setContentType("image/jpeg");
int width=200;
int height=60;
//創建BufferedImage類的對象
BufferedImage image=new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
//創建Graphics類的對象
Graphics g=image.getGraphics();
//通過Graphics類的對象創建一個Graphics2D類的對象
Graphics2D g2d=(Graphics2D)g;
//實例化一個Random對象
Random random=new Random();
//通過Font構造字體
Font mFont=new Font("華文宋體", Font.BOLD, 30);
//改變圖形的當前顏色為隨機生成的顏色
g.setColor(getRandColor(200, 250));
//繪制一個填色矩形
g.fillRect(0, 0, width , height);
//畫一條折線
//創建一個供畫筆選擇線條粗細的對象
BasicStroke bs=new BasicStroke(2f,BasicStroke.CAP_BUTT,BasicStroke.JOIN_BEVEL);
//改變線條的粗細
g2d.setStroke(bs);
//設置當前顏色為預定義顏色中的深灰色
g.setColor(Color.DARK_GRAY);
int[] xPoints=new int[3];
int[] yPoints=new int[3];
for(int j=0;j<3;j++){
xPoints[j]=random.nextInt(width - 1);
yPoints[j]=random.nextInt(height - 1);
}
g.drawPolyline(xPoints, yPoints,3);
//生成并輸出隨機的驗證文字
g.setFont(mFont);
String sRand="";
int itmp=0;
for(int i=0;i<4;i++){
if(random.nextInt(2)==1){
//生成A~Z的字母
itmp=random.nextInt(26)+65;
}
else{
//生成0~9的數字
itmp=random.nextInt(10)+48;
}
char ctmp=(char)itmp;
sRand+=String.valueOf(ctmp);
Color color=new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110));
g.setColor(color);
/****隨機縮放文字并將文字旋轉指定角度**/
//將文字旋轉指定角度
Graphics2D g2d_word=(Graphics2D)g;
AffineTransform trans=new AffineTransform();
trans.rotate(random.nextInt(45)*3.14/180,15*i+10,7);
//縮放文字
float scaleSize=random.nextFloat()+0.8f;
if(scaleSize>1.1f) scaleSize=1f;
trans.scale(scaleSize, scaleSize);
g2d_word.setTransform(trans);
g.drawString(String.valueOf(ctmp),30*i+40,16);
}
//將生成的驗證碼保存到Session中
HttpSession session=request.getSession(true);
session.setAttribute("randCheckCode",sRand);
g.dispose();
ImageIO.write(image,"JPEG",response.getOutputStream());
}
}
需要servlet和jsp的jar包
工程目錄：
ndex.jsp
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" language="java" errorPage="" %>
<html>
<head>
<title>加密的驗證碼</title>
<link rel="stylesheet" href="css/style.css" />
<script language="javascript">
function myReload(){
//document.createCheckCode.src="PictureCheckCode";
document.getElementById("createCheckCode").src=document.getElementById("createCheckCode").src+"?nocache="+new Date().getTime();
}
</script>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#4F6D92',endColorStr='#ACCBE7',gradientType='0');">
<table width="100%" height="451" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><table width="509" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="142"><img src="images/login_top.jpg" width="509" height="142"></td>
</tr>
<tr>
<td height="159" valign="top" background="images/login_bottom.jpg">
<table width="350" border="0" cellpadding="0" cellspacing="0" background="KCM/login.gif">
<form name="form1" method="post" action="check.jsp" onSubmit="return check();">
<tr>
<td width="84"> </td>
<td width="57" height="28">用戶名：</td>
<td colspan="2"><input name="username" type="text" size="29"></td></tr>
<tr>
<td> </td>
<td height="28">密 碼：</td>
<td colspan="2"><input name="password" type="password" size="29"></td></tr>
<tr>
<td height="24" align="center"> </td>
<td height="28" align="center">驗證碼：</td>
<td width="33" height="24" align="left">
<input name="checkCode" title="驗證碼區分大小寫" type="text" size="4" maxlength="4"> </td>
<td width="176" align="left">
<img src="PictureCheckCode" id="createCheckCode" style="border:#999999 solid 1px">
<a href="#" onClick="myReload()">看不清?換一個</a>
</td>
</tr>
<tr>
<td height="37" colspan="4" align="center"><input name="submit" type="submit" class="btn_bg_manageLogin" value="登 錄">
<input name="reset" type="reset" class="btn_bg_manageLogin" value="取 消">
</td>
</tr>
</form>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<script language="javascript">
function check(){
if(form1.username.value==""){
alert("請輸入用戶名！");
form1.username.focus();
return false;
}
if(form1.password.value==""){
alert("請輸入密碼！");
form1.password.focus();
return false;
}
if(form1.checkCode.value==""){
alert("請輸入驗證碼！");
form1.checkCode.focus();
return false;
}
}
</script>check.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:useBean id="encode" class="com.demo.Encode" scope="request"/>
<%
String checkCode=request.getParameter("checkCode").toString();
checkCode=encode.encodeByMD5(checkCode); //進行MD5加密
if("".equals(request.getParameter("username")) || "".equals(request.getParameter("password"))){
out.println("<script>alert('請輸入用戶名或密碼！');window.location.href='index.jsp';</script>");
}
else{
if(!("mr".equals(request.getParameter("username")) && "mrsoft".equals(request.getParameter("password")))){
out.println("<script>alert('您輸入的用戶名或密碼不正確！');window.location.href='index.jsp';</script>");
}
}
if ("".equals(checkCode) || checkCode==null) {
out.println("<script>alert('請輸入驗證碼！');window.location.href='index.jsp';</script>");
}
else {
if (!checkCode.equals(session.getAttribute("randCheckCode"))) {
out.println("<script>alert('您輸入的驗證碼不正確！');window.location.href='index.jsp';</script>");
}
}
%>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="778" height="275" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="115" colspan="2">
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="784" height="115" align="center" valign="top">
<img src="images/logo.jpg" width="778" height="115">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="190"><a href="#" onClick="show_div('menu1')" >
<img src="images/left_top.GIF" width="186" height="33"></a>
<table width="186" height="331" border="0" cellpadding="0" cellspacing="0" class="tableBorder_bold">
<tr>
<td height="323" align="center" valign="top">
<!--基礎信息管理-->
<a href="#">
<img name="Imgmenu1" border="0"
src="images/menu_1.JPG" align="ABSMIDDLE" width="165" height="26"></a>
<div id="menu1">
<table width="165" border="0" cellpadding="0" cellspacing="0" class="tableBorder">
<tr><td width="18%" height="24" align="center">
<img src="images/subMenu_ico.GIF" width="4" height="7"></td>
<td width="82%"><a href="#">客戶信息管理</a></td>
</tr>
<tr><td height="24" align="center">
<img src="images/subMenu_ico.GIF" width="4" height="7"></td>
<td><a href="#">商品信息管理</a></td>
</tr>
<tr><td height="24" align="center">
<img src="images/subMenu_ico.GIF" width="4" height="7"></td>
<td><a href="#">供應商信息管理</a></td>
</tr>
<tr><td height="24" align="center">
<img src="images/subMenu_ico.GIF" width="4" height="7"></td>
<td><a href="#">商品信息查詢</a></td>
</tr>
<tr><td height="24" align="center">
<img src="images/subMenu_ico.GIF" width="4" height="7"></td>
<td><a href="#">客戶信息查詢</a></td>
</tr>
<tr><td height="24" align="center">
<img src="images/subMenu_ico.GIF" width="4" height="7"></td>
<td><a href="#">供應商信息查詢</a></td>
</tr>
</table>
</div>
<!--庫存管理-->
<a href="#" >
<img name="Imgmenu3" align="ABSMIDDLE"
src="images/menu_3.JPG" border="0" width="165" height="28"></a><br>
<!--銷售管理-->
<a href="#">
<img name="Imgmenu4" align="ABSMIDDLE"
src="images/menu_4.JPG" border="0" width="165" height="28"></a><br>
<a href="#">
<img name="Imgmenu5" align="ABSMIDDLE"
src="images/menu_5.JPG" border="0" width="165" height="28"></a><br>
<a href="#">
<img name="Imgmenu6" align="ABSMIDDLE"
src="images/menu_6.JPG" border="0" width="165" height="28"></a><br>
<a href="index.jsp" >
<img name="Imgmenu7" align="ABSMIDDLE"
src="images/menu_7.JPG" border="0" width="165" height="28"></a><br>
</td>
</tr>
</table></td>
<td width="588"> </td>
</tr>
</table>
</body>
</html>
style.css
td {
font-size: 9pt;
color: #000000;
}
a:hover {
font-size: 9pt;
color: #FF6600;
}
a {
font-size: 9pt;
text-decoration: none;
color: #676767;
noline:expression(this.onfocus=this.blur);
}
img{
border:0;
}
.img1{
border:1px;
}
.blue {
font-size: 9pt;
color: #034683;
}
.bgcolor {
font-size: 9pt;
color: #1980DB;
}
.btn_grey {
font-family:"宋體";
font-size: 9pt;
color: #333333;
background-color: #eeeeee;
cursor: hand;
padding:1px;
height:19px;
border-top: 1px solid #FFFFFF;
border-right:1px solid #666666;
border-bottom: 1px solid #666666;
border-left: 1px solid #FFFFFF;
}
.btn_bg_manageLogin{
background-image:url(../images/login_btn_bg.gif);
border:#436E9B solid 1px;
width:51px;
height:20px;
padding:4px;
color:#000000;
outline-color:#FFFFFF;
}
input{
font-family: "宋體";
font-size: 9pt;
color: #333333;
border: 1px solid #999999;
}
.word_grey{
color:#CFEAFD;
}
.word_deepgrey{
color:#505050;
}
.word_orange{
color:#FF6600;
}
.word_blue{
color:#123F73;
}
.word_white{
color:#FFFFFF;
}
.word_gray{
color:#dddddd;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.textarea {
font-family: "宋體";
font-size: 9pt;
color: #333333;
border: 1px solid #999999;
}
.tableBorder {
border: #89B7D8 1px solid
}
.hidden_a_line{
noline:expression(this.onfocus=this.blur);
}
.tableBorder_bold {
border: #EEEEEE 4px solid;
padding:5px;
}
.tableBorder_gray {
border: #C7C7C7 1px solid
}
.table1{
background-color:#AEAEAE;
padding:5px;
}PictureCheckCode.java
package com.demo;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.*;
import java.awt.geom.AffineTransform;
import java.awt.geom.Line2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
public class PictureCheckCode extends HttpServlet {
public PictureCheckCode() {
super();
}
public void destroy() {
super.destroy();
}
public void init() throws ServletException {
super.init();
}
//獲取隨機顏色
Color getRandColor(int fc, int bc) {
Random random=new Random();
if (fc > 255) fc=255;
if (bc > 255) bc=255;
int r=fc + random.nextInt(bc - fc);
int g=fc + random.nextInt(bc - fc);
int b=fc + random.nextInt(bc - fc);
return new Color(r, g, b);
}
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//禁止緩存圖片
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "No-cache");
response.setDateHeader("Expires", 0);
// 指定生成的響應是圖片
response.setContentType("image/jpeg");
int width=70;
int height=17;
BufferedImage image=new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
Graphics g=image.getGraphics();
Graphics2D g2d=(Graphics2D)g;
Random random=new Random();
Font mFont=new Font("華文宋體", Font.BOLD, 17);
g.setColor(getRandColor(200, 250));
g.fillRect(0, 0, width, height);
g.setFont(mFont);
g.setColor(getRandColor(180, 200));
//畫隨機的線條
for (int i=0; i < 130; i++) {
int x=random.nextInt(width - 1);
int y=random.nextInt(height - 1);
int x1=random.nextInt(6) + 1;
int y1=random.nextInt(12) + 1;
BasicStroke bs=new BasicStroke(2f,BasicStroke.CAP_BUTT,BasicStroke.JOIN_BEVEL);
Line2D line=new Line2D.Double(x,y,x+x1,y+y1);
g2d.setStroke(bs);
g2d.draw(line);
}
String sRand="";
//輸出隨機的驗證文字
int itmp=0;
for(int i=0;i<4;i++){
if(random.nextInt(2)==1){
//生成A~Z的字母
itmp=random.nextInt(26)+65;
}
else{
//生成0~9的數字
itmp=random.nextInt(10)+48;
}
char ctmp=(char)itmp;
sRand+=String.valueOf(ctmp);
Color color=new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110));
g.setColor(color);
/****隨機縮放文字并將文字旋轉指定角度**/
//將文字旋轉指定角度
Graphics2D g2d_word=(Graphics2D)g;
AffineTransform trans=new AffineTransform();
trans.rotate(random.nextInt(45)*3.14/180,15*i+10,6);
//縮放文字
float scaleSize=random.nextFloat()+0.5f;
if(scaleSize<0.8 || scaleSize>1.1f) scaleSize=1f;
trans.scale(scaleSize, scaleSize);
g2d_word.setTransform(trans);
g.drawString(String.valueOf(ctmp),15*i+10,14);
}
//將生成的驗證碼保存到Session中
HttpSession session=request.getSession(true);
//聲明并實例化Encode的實例
Encode encode=new Encode();
//將加密后的驗證碼保存到Session
session.setAttribute("randCheckCode",encode.encodeByMD5(sRand));
g.dispose();
ImageIO.write(image,"JPEG",response.getOutputStream());
}
}
Encode.java
package com.demo;
import java.security.MessageDigest;
public class Encode {
public String encode(String str, String algorithm) {
if (str==null) {
return null;
}
//聲明并實例化StringBuilder類的對象
StringBuilder sb=new StringBuilder();
try {
//創建使用MD5加密算法的對象
MessageDigest code=MessageDigest.getInstance(algorithm);
//將要加密信息中的所有字節提供給該對象
code.update(str.getBytes());
//調用digest方法完成消息摘要的計算，并以字節數組的形式返回消息摘要
byte[] bs=code.digest();
//將加密后的字節數組轉換成十六進制的字符串，形成最終的密文
for (int i=0; i < bs.length; i++) {
int v=bs[i] & 0xFF;
if (v < 16) {
sb.append(0);
}
sb.append(Integer.toHexString(v));
}
}
catch (Exception e) {
e.printStackTrace();
}
//將加密后的字符串中的英文字母轉換為大寫
return sb.toString().toUpperCase();
}
public String encodeByMD5(String str){
return encode(str,"MD5");
}
}
web.xml
網頁頁面的使用中為防止“非人類”的大量操作和防止一些的信息冗余，增加驗證碼校驗是許多網站常用的方式。
而讓用戶輸入字母和數字組合的驗證碼是最經典也是最常用的方式。
這一篇是純利用現有JDK提供的繪圖類(ImageIO)類制作,這個過程比較復雜且需要了解ImageIO類。
今天發布的第二篇文章是利用Hutool工具類來實現的，該工具類已經封裝驗證碼所需的相關類等，使用起來較為簡單和方便。
驗證碼的生成和校驗過程均使用Servlet和JSP的結合來實現，Servlet的相關內容可以參閱
Servlet技術:https://mp.weixin.qq.com/s/__e_ef0SI6kVPiRaU0MXJw
如何利用基礎的JSP知識來實現網頁的驗證碼校驗呢？
首先要驗證碼的校驗的過程。
驗證碼校驗分為三部分：
驗證碼的生成實際就是輸出一個圖像，所以在這里使用ImageIO來生成圖片，然后結合使用隨機數（Random）來實現隨機生成驗證上的內容，最后進而展示出來，然后利用Session對象存儲驗證碼的內容。在用戶輸入驗證碼的時候可以用request來獲取用戶輸入的內容，讓其余Session對象中保存的驗證碼內容進行比較，若一致則驗證成功，不一致就驗證失敗。
先創建一個圖片的緩沖區：
BufferedImage bi=new BufferedImage(68, 22,BufferedImage.TYPE_INT_RGB);
創建畫布：
Graphics g=bi.getGraphics();
創建顏色：
Color c=new Color(200,150,255);
創建背景顏色：
g.setColor(c);
填充矩形：
g.fillRect(0, 0, 68,22);
將要顯示的驗證碼內容組成元素存入字符串數組：
char[] ch="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray();
創建隨機的驗證碼內容：
Random r=new Random();
int len=ch.length;
int index; //index用于存放隨機數字
StringBuffer sb=new StringBuffer();
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]);
}
將驗證碼的內容存入Session及顯示在頁面上：
request.getSession().setAttribute("piccode",sb.toString());
ImageIO.write(bi, "JPG", response.getOutputStream());
完整代碼：
public class ImageServlet 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(200, 150, 255); //創建顏色
g.setColor(c);//為畫布創建背景顏色
g.fillRect(0, 0, 68, 22); //填充矩形
char[] ch="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray();//轉化為字符型的數組
Random r=new Random();
int len=ch.length;
int index; //index用于存放隨機數字
StringBuffer sb=new StringBuffer();
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());
ImageIO.write(bi, "JPG", response.getOutputStream());
}
}
在測試之前需要先在web.xml文件中配置一下：
<servlet>
<servlet-name>ImageServlet</servlet-name>
<servlet-class>com.kailong.servlet.ImageServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ImageServlet</servlet-name>
<url-pattern>/imageServlet</url-pattern>
</servlet-mapping>
啟動服務器后在瀏覽器中輸入http://localhost:8080/工程名/imageServlet 即可
驗證碼的生成已經實現成功，下面實現驗證驗證碼的Servlet。
先新建一個jsp用戶界面：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登錄界面</title>
</head>
<body>
<form action="<%=request.getContextPath()%>/loginServlet" method="get" >
驗證碼:<input type="text" name="checkCode"/><br/>
<img alt="驗證碼" id="imagecode" src="<%=request.getContextPath()%>/imageServlet"/>
<input type="submit" value="提交">
</form>
</body>
</html>
校驗驗證碼過程：
代碼實現：
獲取Session中的驗證碼內容：
String piccode=(String) request.getSession().getAttribute("piccode");
獲取用戶輸入的驗證碼內容：
String checkCode=request.getParameter("checkCode");
驗證碼判斷（使用了PrintWriter將相關內容輸出）
response.setContentType("text/html;charset=utf-8");//解決亂碼問題
PrintWriter out=response.getWriter();
if(checkCode.equals(piccode))
{
out.println("驗證碼輸入正確！");
}
else
{
out.println("驗證碼輸入錯誤！！！");
}
out.flush();//將流刷新
out.close();//將流關閉
完整代碼：
public class LoginServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException
//用于驗證驗證碼
{
String piccode=(String) request.getSession().getAttribute("piccode");
String checkCode=request.getParameter("checkCode");
response.setContentType("text/html;charset=utf-8");//解決亂碼問題
PrintWriter out=response.getWriter();
if (checkCode.equals(piccode)) {
out.println("驗證碼輸入正確！");
} else {
out.println("驗證碼輸入錯誤！！！");
}
out.flush();//將流刷新
out.close();//將流關閉
}
}
測試前先在web.xml文件中配置一下：
<servlet>
<servlet-name>LoginServlet</servlet-name>
<servlet-class>com.kailong.servlet.LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoginServlet</servlet-name>
<url-pattern>/loginServlet</url-pattern>
</servlet-mapping>
在驗證碼生成之后，用戶在識別的時候可能不能正確識別，這時候就需要刷新一下重新生成。
添加超鏈接實現刷新：
login.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登錄界面</title>
<script>
function reloadCode() {
var time=new Date().getTime();
document.getElementById("imagecode").src="<%=request.getContextPath()%>/imageGenerate?d="+time;
}
</script>
</head>
<body>
<form action="<%=request.getContextPath()%>/loginServlet" method="get" >
驗證碼:<input type="text" name="checkCode"/><br/>
<img alt="驗證碼" id="imagecode" src="<%=request.getContextPath()%>/imageServlet"/>
<a href="javascript：reloadCode();">看不清楚</a><br>
<br/><input type="submit" value="提交">
</form>
</body>
</html>
js部分的Date相關是防止瀏覽器緩存后不能正常刷新，添加時間的唯一性來實現能夠及時刷新和展示。
js 部分可以參閱：JavaScript 語言入門: https://mp.weixin.qq.com/s/37CaC25_1agb-aXBLhUKtg
也可以在ImageServlet中添加防止瀏覽器緩存的語句：
response.setHeader("Pragma", "No-cache");
公眾號本文地址：https://mp.weixin.qq.com/s/XHucabQ_WwUx2OMDGSTMkw
歡迎關注公眾號：愚生淺末。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
