验证码的生成（前端）

demo

<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>

 

posted @ 2017-12-11 10:31  yugengde  阅读(1101)  评论(0)  编辑  收藏  举报