页面js生成验证码

最新推荐文章于 2019-05-24 14:29:32 发布

iteye_16825

最新推荐文章于 2019-05-24 14:29:32 发布

阅读量121

点赞数

分类专栏： JavaScript 文章标签： JavaScript XHTML CSS HTML F# ViewUI

本文链接：https://blog.csdn.net/iteye_16825/article/details/81858920

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

   <pre name="code" class="js"><!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>  
       <title>无标题页</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','W','X','Y','Z');// 所有候选组成验证码的字符，当然也可以用中文的  
              
          for(var i=0;i<codeLength;i++){                        
          var charIndex = Math.floor(Math.random()*36);  
          code +=selectChar[charIndex];           
          }  
          if(checkCode)  
          {  
            checkCode.className="code";  
            checkCode.value = code;  
          }  
            
        }  
 
   function checkVerifyCode()  
        {  
          var inputCode = document.getElementById("verifyCodeID").value ;  
          if(inputCode.length <=0)  
          {  
              alert("请输入验证码！");  
          }  
          else if(inputCode.toLowerCase() != code.toLowerCase() )  
          {  
    		 alert("错误的验证码！"); 
    		 document.getElementById('verifyCodeID').value='';
             createCode();//刷新验证码  
          } else{
			alert("^_^ OK!");
		  }
          }  
            
       </script>  
   </head>  
   <body οnlοad="createCode()">  
   <form  action="#"> 
   <table>
        			<tr>
				<td><span id="showR">*</span>验证码：</td>
				<td>
					<input  type="text"   id="verifyCodeID" οnblur="checkVerifyCode();"/>  
   				<input style="cursor:pointer; border:0;width=80px; " type="text" οnclick="createCode()" readonly="readonly" id="checkCode" class="unchangeds" size="4"/>&nbsp;<a style="cursor:pointer" οnclick="createCode();">看不清？</a>
  			</td>
  		</tr>
		</table>
       <input id="Button1"  οnclick="checkVerifyCode();" type="button" value="确定" />   
   </form>  
   </body>  
   </html></pre>