js 实现登陆验证码

我从网上查资料,发现一般都是由java实现的登陆验证,今天就想试一下js实现网页登陆验证,发现这个文章蛮好的,于是就分享了出来。
此代码仅供学习,不做商业用途

<!Doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>验证码 </title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }   
            a{
                text-decoration: none;
            }
            .main_bar{
                width:100%;
                height: 350px;
                margin-top:200px;
            }
            .login_form{
                width:30%;
                height:80%;
                margin:0 auto;
                /*border:2px solid #16A085;*/
                border-radius: 15px;
                padding:10px;
                background: #ECF0F1;
            }
            .name,.pwd,.sbm_btn{
                display:block;
                width:70%;
                margin:0 auto;
                height:35px;
                font-size:16px;
                border-color:transparent;
                border-radius: 5px;
                border:0;
                padding-left:8px;
                
            }
            .yzm{
                height: 35px;
                margin:0 auto;
                width: 72%;
                line-height: 35px;
                position: relative;
                margin-bottom: 10px;
            }
            .code{
                width:50%;
                height: 35px;
                border:0;
                border-color: transparent;
                font-size:16px;
                border-radius: 5px;
                padding-left: 8px;
            }
            .code_pic{
                display: block;
                width:40%;
                height:35px;
                background-color: #0381ff;
                color:#FFF;
                position: absolute;
                top: 0px;
                left:60%;
                border-radius: 5px;
                text-align: center;
            }
            .name{
                margin-top:20px;
            }
            .sbm_btn{
                text-align: center;
                background-color: #1abc9c;
                color:#fff;
                line-height: 35px;
            }
            .re_pwd {
                width: 25%;
                margin: 10px auto 10px;
            }
            .re_pwd a{
                text-decoration: none;
                font-size:14px;
                color: #ccc;
            }
            .re_pwd a:hover{
                cursor: pointer;
                color:#16A085;
            }
            .errorTips{
                width:70%;
                color:red;
                font-size: 14px;
                margin:0 auto;
                height: 20px;
                line-height:20px;
            }
        </style>
    </head>

    <body onload="changeImg()">
        <div class="main_bar">
            <div id="login_form" class="login_form">
                <div class="title"></div>
                <form action="login.html">
                    <div id="form_widgt">
                        <input type="text" name="name" class="name" placeholder="请输入账号"><br>
                        <input type="password" name="pwd" class="pwd"  placeholder="请输入密码"><br>
                        <p class="yzm"><input type="text" name="code" id="codeInput" class="code" placeholder="验证码">
                        <span id="code" class="code_pic" title="看不清,换一张"></span></p>
                        <p class="errorTips" id="errorTips"></p>
                        <a href="javascript:;" name="sbm" class="sbm_btn" onclick="return check()">登录</a>

                        
                    </div>
                </form>
                <div class="re_pwd"><a href="">忘记密码了</a></div>
            </div>
        </div>
        <script type="text/javascript">
            // 声明一个变量用于存储生成的验证码
            document.getElementById('code').onclick = changeImg;
            function changeImg(){
                // 验证码组成库
                var arrays=new Array(  
                    '1','2','3','4','5','6','7','8','9','0',  
                    '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'               
                ); 
                // 重新初始化验证码
                code ='';
                // 随机从数组中获取四个元素组成验证码
                for(var i = 0; i<4; i++){
                    // 随机获取一个数组的下标
                    var r = parseInt(Math.random()*arrays.length);
                    code += arrays[r];
                }
                // 验证码写入span区域
                document.getElementById('code').innerHTML = code;

            }

            // 验证验证码
            function check(){
                var error;
                // 获取用户输入的验证码
                var codeInput = document.getElementById('codeInput').value;
                if(codeInput.toLowerCase() == code.toLowerCase()){
                    console.log('123');
                    return true;
                }else{
                    error = '验证码错误,重新输入';
                    document.getElementById('errorTips').innerHTML = error;
                    return false;
                }
            }
        </script>
    </body>
</html>

最终的实现效果

实现效果.jpg
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容