如何用JS实现登录验证码方法

JavaScript023

如何用JS实现登录验证码方法,第1张

<%@ page contentType="image/jpeg" import="java.awt.*,

java.awt.image.*,java.util.*,javax.imageio.*" pageEncoding="GBK"%>

<%!

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)

}

%>

<%

//设置页面不缓存

response.setHeader("Pragma","No-cache")

response.setHeader("Cache-Control","no-cache")

response.setDateHeader("Expires", 0)// 在内存中创建图象

int width=60, height=20

BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB)// 获取图形上下文

Graphics g = image.getGraphics()//生成随机类

Random random = new Random()// 设定背景色

g.setColor(getRandColor(200,250))

g.fillRect(0, 0, width, height)//设定字体

g.setFont(new Font("Times New Roman",Font.PLAIN,18))//画边框

//g.setColor(new Color())

//g.drawRect(0,0,width-1,height-1)// 随机产生155条干扰线,使图象中的认证码不易被其它程序探测到

g.setColor(getRandColor(160,200))

for (int i=0i<155i++)

{

int x = random.nextInt(width)

int y = random.nextInt(height)

int xl = random.nextInt(12)

int yl = random.nextInt(12)

g.drawLine(x,y,x+xl,y+yl)

}// 取随机产生的认证码(4位数字)

String sRand=""

for (int i=0i<4i++){

String rand=String.valueOf(random.nextInt(10))

sRand+=rand

// 将认证码显示到图象中

g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)))

//调用函数出来的颜色相同,可能是因为种子太接近,所以只能直接生成

g.drawString(rand,13*i+6,16)

}// 将认证码存入SESSION

session.setAttribute("rand",sRand)// 图象生效

g.dispose()// 输出图象到页面

ImageIO.write(image, "JPEG", response.getOutputStream())

out.clear()

out = pageContext.pushBody()

%>

登录页面login.jsp示例代码:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

String path = request.getContextPath()

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP 'login.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<!--

<link rel="stylesheet" type="text/css" href="styles.css">

-->

</head>

<%

String incode = (String)request.getParameter("code")

String rightcode = (String)session.getAttribute("rCode")

if(incode != null &&rightcode != null){

if(incode.equals(rightcode)){

out.println("验证码输入正确!")

}else{

out.println("验证码输入不正确,请重新输入!")

}

}

%>

<body>

<form action="login.jsp" method="post">

用户名:

<input type="text" name="username"/><br/>

密码:

<input type="password" name="password"/><br/>

验证码:

<img src="number.jsp"/>

<input type="text" name="code"/>

<input type="submit" value="登录"/>

</form>

</body>

</html>

验证码页面number.jsp代码:

<%@ page contentType="image/jpeg" language="java" import="java.util.*,java.awt.*,java.awt.image.*,javax.imageio.*" pageEncoding="utf-8"%>

<%!

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)

}

%>

<%

//设置页面不缓存

response.setHeader("Pragma","no-cache")

response.setHeader("Cache-Control","no-catch")

response.setDateHeader("Expires",0)

//在内存中创建图象

int width = 60

int height = 20

BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB)

//创建图象

Graphics g = image.getGraphics()

//生成随机对象

Random random = new Random()

//设置背景色

g.setColor(getRandColor(200,250))

g.fillRect(0,0,width,height)

//设置字体

g.setFont(new Font("Tines Nev Roman",Font.PLAIN,18))

//随机产生干扰线

g.setColor(getRandColor(160,200))

for(int i = 0i <255i++){

int x = random.nextInt(width)

int y = random.nextInt(height)

int xl = random.nextInt(12)

int yl = random.nextInt(12)

}

//随机产生认证码,4位数字

String sRand = ""

for(int i = 0i <4i++){

String rand = String.valueOf(random.nextInt(10))

sRand += rand

//将认证码显示到图象中

g.setColor(new Color(20 + random.nextInt(110),20 + random.nextInt(110),20 + random.nextInt(110)))

g.drawString(rand,13*i+6,16)

}

session.setAttribute("rCode",sRand)

//图像生效

g.dispose()

//输出图像到页面

ImageIO.write(image,"JPEG",response.getOutputStream())

out.clear()

out = pageContext.pushBody()

%>