怎样用JavaScript实现验证码的验证

JavaScript014

怎样用JavaScript实现验证码的验证,第1张

用JavaScript实现验证码的验证主要代码如下：

var code //在全局定义验证码

//产生验证码

window.onload = function createCode(){

code = ""

var codeLength = 4//验证码的长度

var checkCode = document.getElementById("code")

var random = new Array(0,1,2,3,4,5,6,7,8,9,'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')//随机数

for(var i = 0i <codeLengthi++) {//循环操作

var index = Math.floor(Math.random()*36)//取得随机数的索引（0~35）

code += random[index]//根据索引取得随机数加到code上

}

checkCode.value = code//把code值赋给验证码

}

//校验验证码

function validate(){

var inputCode = document.getElementById("input").value.toUpperCase()//取得输入的验证码并转化为大写

if(inputCode.length <= 0) { //若输入的验证码长度为0

alert("请输入验证码！")//则弹出请输入验证码

}

else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时

alert("验证码输入错误！@_@")//则弹出验证码输入错误

createCode()//刷新验证码

document.getElementById("input").value = ""//清空文本框

}

else { //输入正确时

alert("^-^")//弹出^-^

}

}

（1）jsp代码：

<img id = "img_authcode" src="${ctx}/account/authcode" /><a href="javascript:" onclick="javascript:document.getElementById('img_authcode').setAttribute('src', '${ctx}/account/authcode?' + Math.random())">换一换</a>

（2）java代码（该代码为我自己框架代码，跟servlet写法不一样的我都给你注释了）：

public View authcode() throws IOException {

HttpServletResponse response = PuffContext.getResponse()//获取response

response.setContentType("image/jpeg")

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

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

response.setDateHeader("Expires", 0)

String authCode = AuthCodeUtil.getRandom(4)//获取验证码，代码在下面(3)

System.out.println("生成随机码：" + authCode)

PuffContext.getSession().setAttribute("session_authcode", authCode)//把该验证码存储在session

ServletOutputStream output = response.getOutputStream()

AuthCodeUtil.draw(output, authCode)

output.flush()

output.close()

return ViewFactory.nullView()//返回null

}

(3)///////////////////////////下面为生成验证码类////////////////////////////////////

public class AuthCodeUtil {

private final static Random random = new Random()

// 随机字体样式

private final static int[] fontStyle = { Font.HANGING_BASELINE, Font.ITALIC, Font.LAYOUT_LEFT_TO_RIGHT, Font.LAYOUT_NO_LIMIT_CONTEXT,

Font.LAYOUT_NO_START_CONTEXT, Font.LAYOUT_RIGHT_TO_LEFT }

/**

* 画随机码图

*

* @param out

* @param width

* @param height

* @throws IOException

*/

public static void draw(OutputStream out, String value) throws IOException {

int width = 80, height = 30

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

Graphics2D g = (Graphics2D) bi.getGraphics()

g.setColor(Color.WHITE)

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

g.drawRect(1, 1, width - 2, height - 2)

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

g.setColor(randColor(150, 250))

g.drawOval(random.nextInt(110), random.nextInt(24), 5 + random.nextInt(10), 5 + random.nextInt(10))

}

int n = (int) (Math.random() * 6)

Font mFont = new Font("Arial", fontStyle[n], 23)

g.setFont(mFont)

g.setColor(randColor(10, 240))

g.drawString(value, 10, 21)// 随机数,水平距离,垂直距离

ImageIO.write(bi, "png", out)

}

private static Color randColor(int fc, int bc) {// 给定范围获得随机颜色

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 static void main(String[] args) throws IOException {

FileOutputStream out = new FileOutputStream("d:\\aa.png")

draw(out, getRandom(4))

}

public static String getRandom(int size) {// 随机字符串

char[] c = { '1', '3', '5', '6', '7', '8', '9' }

StringBuffer sb = new StringBuffer()

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

sb.append(c[Math.abs(random.nextInt()) % c.length])

return sb.toString()

}

}