js验证码

1、html

<html>      
<head>      
<script language = "javascript" src = "code.js"></script>      
<link rel="stylesheet" type="text/css" href="code.css">      
</head>      
<body onload="createCode();">      
<form>      
<center>验证码：<input type="text" id="input1" />      
<input type="text" id="checkCode" class="code" style=" 55px" /> <a href="#" onclick="createCode()">看不清楚</a>      
<input id="Button1" onclick="validate();" type="button" value="确定" /></center>      
</form>      
</body>      
</html>

2、code的css样式

.code{      
background-image:url(w1.jpg);      
font-family:Arial;      
font-style:italic;      
color:Red;      
border:0;      
padding:2px 3px;      
letter-spacing:3px;      
font-weight:bolder;      
}

3、code的js

var code ; //在全局 定义验证码      
function createCode(){       
code = "";      
var codeLength = 4;//验证码的长度      
var checkCode = document.getElementById("checkCode");      
checkCode.value = "";      
var selectChar = new Array(1,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','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=0;i<codeLength;i++) {      
   var charIndex = Math.floor(Math.random()*60);      
  code +=selectChar[charIndex];      
}      
if(code.length != codeLength){      
  createCode();      
}      
checkCode.value = code;      
}      
      
     
function validate () {      
var inputCode = document.getElementById("input1").value.toUpperCase();      
var codeToUp=code.toUpperCase();  
if(inputCode.length <=0) {      
  alert("请输入验证码！");      
  return false;      
}      
else if(inputCode != codeToUp ){      
   alert("验证码输入错误！");      
   createCode();      
   return false;      
}      
else {      
  alert("输入正确，输入的验证码为："+inputCode);      
  return true;      
}      
      
}

简单的验证码就实现了