验证码

这个方法可以实现简易的验证码,但没有完善(区分大小写)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>验证码</title>
        <style type="text/css">
            #xinxi{
                font-size: 16px;
                color: red;
                font-weight: bold;
                background: palegreen;
                border: none;
                width: 100px;
                letter-spacing: 10px;
                height: 30px;
            }
        </style>
    </head>
    <body onload="cear()">
        <input type="text" id="kuang"/>
        <br />
        <input type="button" id="xinxi" onclick="dianji()"/>
        <br />
        <input type="submit" value="提交" onclick="tijiao()"/>
    </body>
    <script type="text/javascript">
        var code;
        
        var yanzheng=document.getElementById('xinxi');
        function cear(){  
            code="";
            var codelength=4;
            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()*55);
                    code+=codechars[charNum];
            } 
            yanzheng.value=code;
        }
        function dianji(){
            cear();
            }
        function tijiao(){
            var kuang=document.getElementById('kuang');
            if(kuang.value==""){
                alert("空")
                cear(); 
            }else{
                if(kuang.value==yanzheng.value){
                    alert('验证成功');
                    document.getElementById('kuang').value="";
                    
                }else{
                    alert('验证失败');
                    document.getElementById('kuang').value="";
                    cear();     
                }
            }
        }
    </script>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券