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="width: 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; } }
简单的验证码就实现了
