JS实现随机数验证码

骑猪看日落 2022-04-11 12:10 388阅读 0赞

转载改进版:

<html>  
    <head>  
        <meta charset="utf-8">  
        <title></title>  
        <script language="javascript">  
            var code; //在全局 定义验证码  
            window.onload=createCode; //页面加载完执行,生成第一次验证码

//创建验证码函数  
            function createCode() \{  
             code = "";  
             var codeLength =5;//验证码的长度  
             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\];       
             \}  
            // 设置验证码的显示样式，并显示  
             document.getElementById("discode").style.fontFamily="Fixedsys";  //设置字体  
             document.getElementById("discode").style.letterSpacing="5px";  //字体间距  
             document.getElementById("discode").style.color="\#0ab000";   //字体颜色  
             document.getElementById("discode").innerHTML=code;      // 显示  
            \}  
           //验证验证码输入是否正确  
            function but() \{  
                     var val1=document.getElementById("t1").value;  
                     var val2=code;  
                     if(val1!=val2)\{  
                             alert("验证码错误!");  
                            document.getElementById('t1').value="";  
                        \}else if(val1==val2)\{  
                            alert("验证码成功!");  
                        \}  
                    \}  
    </script>  
    </head>  
    <body>  
        <div class="input">  
            <input id="t1" type="text" name="u" placeholder="验证码" />   
            <span id="discode"></span>  
            <input type="button" value="换一换" class="c" style="height:20px;" onClick="createCode()">  
            <input type="button" value="验证" class="c" style="height:20px;" onClick="but()">  
        </div>  
    </body>  
</html>

效果:

![20181206113522263.png][]

出处:[https://www.cnblogs.com/tk55/p/7519134.html][https_www.cnblogs.com_tk55_p_7519134.html]

[20181206113522263.png]: /images/20220411/c8337585a00f43599c77a09c445b474c.png
[https_www.cnblogs.com_tk55_p_7519134.html]: https://www.cnblogs.com/tk55/p/7519134.html