验证码

最新推荐文章于 2019-10-28 18:05:29 发布
Return_KB
最新推荐文章于 2019-10-28 18:05:29 发布
阅读量230
点赞数
分类专栏：前端js
前端js 专栏收录该内容
39 篇文章 0 订阅
订阅专栏
验证码大家应该不陌生，主要是为了网站的安全性，防止恶意注册和登陆。验证码实现的方式各有不同，下面是一段用javascript实现的验证码效果，供大家参考之用，希望能够给大家带来帮助。
代码如下:
 
 
  
  
   
   
    
     
        
          01 
         
        
          02 
         
        
          03 
         
        
          04 
         
        
          05 
         
        
          06 
         
        
          07 
         
        
          08 
         
        
          09 
         
        
          10 
         
        
          11 
         
        
          12 
         
        
          13 
         
        
          14 
         
        
          15 
         
        
          16 
         
        
          17 
         
        
          18 
         
        
          19 
         
        
          20 
         
        
          21 
         
        
          22 
         
        
          23 
         
        
          24 
         
        
          25 
         
        
          26 
         
        
          27 
         
        
          28 
         
        
          29 
         
        
          30 
         
        
          31 
         
        
          32 
         
        
          33 
         
        
          34 
         
        
          35 
         
        
          36 
         
        
          37 
         
        
          38 
         
        
          39 
         
        
          40 
         
        
          41 
         
        
          42 
         
        
          43 
         
        
          44 
         
        
          45 
         
        
          46 
         
        
          47 
         
        
          48 
         
        
          49 
         
        
          50 
         
        
          51 
         
        
          52 
         
        
          53 
         
        
          54 
         
        
          55 
         
        
          56 
         
        
          57 
         
        
          58 
         
        
          59 
         
        
          60 
         
        
          61 
         
        
          62 
         
        
          63 
         
        
          64 
         
        
          65 
         
        
          66 
         
        
          67 
         
        
          68 
         
        
          69 
         
        
          70 
         
        
          71 
         
        
          72 
         
        
          73 
         
        
          74 
         
        
          75 
         
        
          76 
         
        
          77 
         
        
          78 
         
        
          79 
         
        
          80 
         
        
          81 
         
        
          82 
         
        
          83 
         
        
          84 
         
        
          85 
         
        
          86 
         
        
          87 
         
        
          88 
         
        
          89 
         
        
          90 
         
        
          91 
         
        
          92 
         
         
          
          <!DOCTYPE html> 
          
          
          < 
          html 
          > 
          
          
          < 
          head 
          > 
          
          
          < 
          meta  
          charset 
          = 
          " utf-8" 
          > 
          
          
          < 
          title 
          >蚂蚁部落</ 
          title 
          > 
          
          
          < 
          style  
          type 
          = 
          "text/css" 
          > 
          
          
          .code { 
          
          
             
          background:url(code_bg.jpg); 
          
          
             
          font-family:Arial; 
          
          
             
          font-style:italic; 
          
          
             
          color:blue; 
          
          
             
          font-size:30px; 
          
          
             
          border:0; 
          
          
             
          padding:2px 3px; 
          
          
             
          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 
          > 
          
          
          < 
          script  
          type 
          = 
          "text/javascript" 
          > 
          
          
          var code; 
          
          
          function createCode() { 
          
          
             
          code = ""; 
          
          
             
          var codeLength = 6; //验证码的长度 
          
          
             
          var checkCode = document.getElementById("checkCode"); 
          
          
             
          var codeChars = 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', 
          
          
                       
          '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 charNum = Math.floor(Math.random() * 52); 
          
          
               
          code += codeChars[charNum]; 
          
          
             
          } 
          
          
             
          if(checkCode) { 
          
          
               
          checkCode.className = "code"; 
          
          
               
          checkCode.innerHTML = code; 
          
          
             
          } 
          
          
          } 
          
          
          function validateCode() { 
          
          
             
          var inputCode=document.getElementById("inputCode").value; 
          
          
             
          if(inputCode.length <= 0) { 
          
          
               
          alert("请输入验证码！"); 
          
          
             
          } 
          
          
             
          else if(inputCode.toUpperCase() != code.toUpperCase()) { 
          
          
                
          alert("验证码输入有误！"); 
          
          
                
          createCode(); 
          
          
             
          } 
          
          
             
          else { 
          
          
               
          alert("验证码正确！"); 
          
          
             
          }         
          
          
          }     
          
          
          </ 
          script 
          > 
          
          
          </ 
          head 
          > 
          
          
          < 
          body  
          onload 
          = 
          "createCode()" 
          > 
          
          
          < 
          form  
          id 
          = 
          "form1"  
          runat 
          = 
          "server"  
          onsubmit 
          = 
          "validateCode()" 
          > 
          
          
             
          < 
          div 
          > 
          
          
               
          < 
          table  
          border 
          = 
          "0"  
          cellspacing 
          = 
          "5"  
          cellpadding 
          = 
          "5"  
          > 
          
          
                 
          < 
          tr 
          > 
          
          
                   
          < 
          td 
          ></ 
          td 
          > 
          
          
                   
          < 
          td 
          >< 
          div  
          class 
          = 
          "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 
          >< 
          input  
          id 
          = 
          "Button1"   
          onclick 
          = 
          "validateCode();"  
          type 
          = 
          "button"  
          value 
          = 
          "确定"  
          /></ 
          td 
          > 
          
          
                   
          < 
          td 
          ></ 
          td 
          > 
          
          
                 
          </ 
          tr 
          > 
          
          
               
          </ 
          table 
          > 
          
          
             
          </ 
          div 
          > 
          
          
          </ 
          form 
          > 
          
          
          </ 
          body 
          > 
          
          
          </ 
          html 
          >