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

JavaScript027

怎样用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("^-^")//弹出^-^

}

}

方法/步骤

打开网页编辑器编写div+css代码,先把界面做好,然后再做功能,代码如下所示:

<form name="form1">

请输入要产生的验证码的位数:<input type="text" name="digit" id="digit">

<br><br>

<input type="button" value="生成" onClick="deal()">

&nbsp<input type="button" value="刷新" onClick="qc()">

<br><br>

<div id="result"></div>

</form>

请点击输入图片描述

写好之后,我们写CSS代码,然后再调试一下,争取在前台显示的美观一些。CSS代码如下所示:

<style>

body{background:#ccc }

form{margin-left:20%margin-top:10%}

</style>

请点击输入图片描述

弄好之后用浏览器打开,界面如下图所示:

请点击输入图片描述

弄好前端界面之后,我们就需要写JS了,步骤主要如下所示,首先我们先定义一个参数,这个参数是我们输入文本框的数字,生成随机数用到了random方法,先看第一个方法,第一个方法我们用for循环来显示出随机数的个数。代码如下所示:

function cg(digit)

{

var result=""

for(i=0i<parseInt(digit)i++)

{

result=result+(parseInt(Math.random()*10)).toString()

}

return  result

}

请点击输入图片描述

第一个函数写好后我们来看第二个,第二个函数是输出生成的验证码,代码很少:如下所示(含删除代码)

function deal()

{

result.innerHTML="产生的验证码是:"+cg(form1.digit.value)

}

function qc()

{

form1.digit.value=""

}

请点击输入图片描述

写好之后,我们验证一下,我在文本框内输入5,结果输出了5个数字,结果显示没有错误。

请点击输入图片描述

当然这么写也是有BUG的,例如输入0、负数、或者小于1的小数都不会生成验证码。如果大家有兴趣,可以修改这些BUG。

请点击输入图片描述

<script type="text/javascript">

var wait=60

function time(o) {

if (wait == 0) {

o.removeAttribute("disabled")

o.value="免费获取验证码"

wait = 60

} else {

o.setAttribute("disabled", true)

o.value="重新发送(" + wait + ")"

wait--

setTimeout(function() {

time(o)

},

1000)

}

}

document.getElementById("btn").onclick=function(){time(this)}

</script>

把这段js放上,btn是input的id,换成你自己的id名就可以了