JavaScript验证码的实例代码(附效果图)

<headrunat="server">
   <title></title>
   <styletype="text/css">
   .code
   {
           background:url(code_bg.jpg);
           font-family:Arial;
           font-style:italic;
            color:blue;
            font-size:30px;
            border:0;
            padding:2px3px;
            letter-spacing:3px;
            font-weight:bolder;            
            float:left;           
            cursor:pointer;
            width:150px;
            height:60px;
            line-height:60px;
            text-align:center;
            vertical-align:middle;

   }
   a
   {
       text-decoration:none;
       font-size:12px;
       color:#288bc4;
       }
   a:hover
   {
      text-decoration:underline;
       }
   </style>
   <scriptlanguage="javascript"type="text/javascript">

       varcode;
       functioncreateCode(){
           code="";
           varcodeLength=6;//验证码的长度
           varcheckCode=document.getElementById("checkCode");
           varcodeChars=newArray(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",
           "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(vari=0;i<codeLength;i++)
           {
               varcharNum=Math.floor(Math.random()*52);
               code+=codeChars[charNum];
           }
           if(checkCode)
           {
               checkCode.className="code";
               checkCode.innerHTML=code;
           }
       }
       functionvalidateCode()
       {
           varinputCode=document.getElementById("inputCode").value;
           if(inputCode.length<=0)
           {
               alert("请输入验证码！");
           }
           elseif(inputCode.toUpperCase()!=code.toUpperCase())
           {
               alert("验证码输入有误！");
               createCode();
           }
           else
           {
               alert("验证码正确！");
           }       
       }   
    </script>

</head>
<bodyonload="createCode()">
   <formid="form1"runat="server"onsubmit="validateCode()">
   <div>
   <tableborder="0"cellspacing="5"cellpadding="5">
       <tr>
           <td></td><td><divclass="code"id="checkCode"onclick="createCode()"></div></td>
           <td><a href="#"onclick="createCode()">看不清换一张</a></td>
       </tr>
       <tr>
           <td>验证码：</td><td><input style="float:left;"type="text"  id="inputCode"/></td><td>请输入验证码</td>
       </tr>
       <tr><td></td><td><inputid="Button1" onclick="validateCode();"type="button"value="确定"/></td><td></td>
       </tr>
   </table>
   </div>
   </form>
</body>
</html>