您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

javascript实现数字+字母验证码的简单实例

作者:佚名    责任编辑:admin    更新时间:2022-06-22

 本篇文章只要是对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,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','wW','x','y','z');//所有候选组成验证码的字符,当然也可以用中文的             for(var i=0;i<codeLength;i++)           {                         var charIndex = Math.floor(Math.random()*36);           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>