您的位置:首页 > Web前端 > JavaScript

JS生成随机验证码

2018-08-08 15:53 169 查看

 1,Js部分         

var code; //在全局定义验证码    
            //产生验证码   
            window.onload = function() {
                createCode();
            }
             
            function createCode() {
                code = "";
                var codeLength = 4; //验证码的长度   
                var checkCode = document.getElementById("checkCode");
                var random = 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 += random[charIndex]; //根据索引取得随机数加到code上   
                }
                checkCode.value = code; //把code值赋给验证码   
            }
            
            //校验验证码   
            function validate() {
                var userName = document.getElementById("loginName").value;
                var pwd = document.getElementById("loginPwd").value;
                var inputCode = document.getElementById("validateCode").value.toUpperCase(); //取得输入的验证码并转化为大写        
                var input = document.getElementById("checkInput");
                if(userName.length<=0){
                    input.innerText="用户名不能为空";
                    return false;
                }else if(pwd.length<=0){
                    input.innerText="密码不能为空";
                    return false;
                }else if(inputCode.length <= 0) { //若输入的验证码长度为0
                    input.innerText="请输入验证码"; //则弹出请输入验证码   
                    return false;
                } else if(inputCode != code) { //若输入的验证码与产生的验证码不一致时   
                    input.innerText="验证码输入错误!"; //则弹出验证码输入错误   
                    return false;
                } else { //输入正确时   
                    input.innerText="";    
                    return true;
                }
            }

2 CSS部分

.code {
                TEXT-ALIGN: center;
                LINE-HEIGHT: 27px;
                DISPLAY: block;
                FONT-FAMILY: Verdana, 宋体, fantasy;
                LETTER-SPACING: 8px;
                COLOR: #d7da89;
                FONT-SIZE: 22px;
                cursor: default;
                width: 112px;
                height: 32px;
                float: left;
                position: absolute;
                top: 101px;
                right: 115px;
                z-index: 999;
            }

3 HTML部分 

    <input type="button" id="checkCode" class="code" onclick="createCode()" />

    <div class="checkCode" id="checkInput"></div>

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: