萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> javascript實現數字驗證碼的簡單實例介紹

javascript實現數字驗證碼的簡單實例介紹

 本篇文章主要是對javascript實現數字驗證碼的簡單實例進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助

實例如下: 代碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />     <title>JS驗證碼</title>       <style type="text/css">           .code            {                background-image:url(code.jpg);                font-family:Arial;                font-style:italic;                color:Red;                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 = "";           var codeLength = 4;//驗證碼的長度           var checkCode = document.getElementById("checkCode");           var selectChar = new Array(0,1,2,3,4,5,6,7,8,9);//所有候選組成驗證碼的字符,當然也可以用中文的             for(var i=0;i<codeLength;i++)           {                         var charIndex = Math.floor(Math.random()*10);           code +=selectChar[charIndex];                        }    //       alert(code);           if(checkCode)           {             checkCode.className="code";             checkCode.value = code;           }           }            function validate ()         {           var inputCode = document.getElementById("input1").value;           if(inputCode.length <=0)           {               alert("請輸入驗證碼!");           }           else if(inputCode != code )           {              alert("驗證碼輸入錯誤!");              createCode();//刷新驗證碼           }           else           {             alert("OK");           }             }          </script>   </head>   <body onload="createCode()">   <form  action="#">        <input  type="text"   id="input1" />       <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px"  /><br />       <input id="Button1"  onclick="validate();" type="button" value="確定" />     </form>   </body>   </html>    
copyright © 萬盛學電腦網 all rights reserved