如何用js写验证码程序?

JavaScript013

如何用js写验证码程序?,第1张

方法/步骤

打开网页编辑器编写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。

请点击输入图片描述

<html>

<head>

<style type="text/css">

.code{

background-image:url(111.jpg)

font-family:Arial,宋体

font-style:italic

color:green

border:0

padding:2px 3px

letter-spacing:3px

font-weight:bolder

}

.unchanged {

border:0

}

</style>

<script language="javascript" type="text/javascript">

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

function createCode(){

code = new Array()

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

var checkCode = document.getElementById("checkCode")

checkCode.value = ""

var selectChar = new Array(2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z')

for(var i=0i<codeLengthi++) {

var charIndex = Math.floor(Math.random()*32)

code +=selectChar[charIndex]

}

if(code.length != codeLength){

createCode()

}

checkCode.value = code

}

function validate () {

var inputCode = document.getElementById("input1").value.toUpperCase()

if(inputCode.length <=0) {

alert("请输入验证码!")

return false

}

else if(inputCode != code ){

alert("验证码输入错误!")

createCode()

return false

}

else {

alert("成功!")

return true

}

}

</script>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312"></head>

<body onLoad="createCode()">

<input type="text" id="input1" />

<input type="button" id="checkCode" class="code" style="width:60px" onClick="createCode()" /><a href="#" onClick="createCode()">看不清楚</a>

<input id="Button1" onClick="validate()" type="button" value="确定" />

<script></script>

</body>

</html>

你要是的是不是这种效果