js生成、验证验证码-阿里云开发者社区

开发者社区> 开发与运维> 正文

js生成、验证验证码

简介:

js代码:

//关于验证码
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.value = code; 
        
       }   
          
     }   
     
function validate()   //验证码验证
     {   
       var inputCode = document.getElementById("codeContent").value; 
       document.getElementById("codetip").innerHTML ="";   
       if(inputCode.length <=0)   
       {   
           document.getElementById("codetip").innerHTML ="请输入验证码"; 
           createCode(); 
     return false;
       }   
       else if(inputCode != code )   
       {    
          document.getElementById("codetip").innerHTML="验证码输入错误"; 
          createCode(); 
          return false; 
       }   
       else   
       {   
          return true; 
   
       }   
          
       }

html代码:

<tr>
               <td align="right">
                <span class="black12">验证码&nbsp;&nbsp;</span>
               </td>
               <td align="left">
                <input type="text" id="codeContent"
                 onchange="validate();" />
                <input type="text" id="checkCode" class="code"
                 readonly="readonly" />
               
               </td>
               <td width="30%" align="left"><span id="codetip" class="red12B"></span></td>

</tr>




本文转自 斯然在天边 51CTO博客,原文链接:http://blog.51cto.com/winters1224/799073,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章