是否能单纯用 JS 来实现验证码

JavaScript011

是否能单纯用 JS 来实现验证码,第1张

当然能。但是用js你验证码的信息都放到了客户端当中了。客户可以随时查看到你的验证码的验证的值。只要会js和html的人。你验证码就是对这样的人一点效果的都没有，验证码组织恶意注册和恶意提交的行为就完全没有效果啦。

如果一定要用前端验证码。提过一个思路。首先需要0~9数字的所有图片。然后。算一个4位的随机数（具体几位你看需求就好。我以四位为例）。然后根据随机数。导入四个数字图片到显示验证码的html元素中。当表单提交时候。判断输入的验证码是否和你之前的到的四位随机数一致。

满意请采纳

<script>

function yzm(){

var arr = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','0','1','2','3','4','5','6','7','8','9']

var str = ''

for(var i = 0  i < 4  i ++ )

str += ''+arr[Math.floor(Math.random() * arr.length)]

return str

}

</script>

<button onclick="document.getElementById('yzm').innerHTML = yzm()">重获验证码</button>

<div id="yzm"></div>

<%@ 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()

%>