JS验证码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>JS实现生成随机验证码并验证功能</title>
    <style>
        *{ margin: 0; padding: 0; }
        .wrap{
            width: 500px;
            margin: 20px auto;
        }
        #text{
            height: 30px;
            box-sizing: border-box;
            vertical-align: middle;
            text-indent: 1em;
        }
        #code{
            display: inline-block;
            width: 80px; height: 30px;
            background: #aaa;
            text-align: center;
            line-height: 30px;
            color: #fff;
            text-decoration: none;
            letter-spacing: 7px;
            padding-left: 7px;
            vertical-align: middle;
            font-weight: bold;
        }
        #btn{
            width: 60px; height: 30px;
            outline: 0;
            border: #153021;
            background: #499990;
            color: #fff;
            border-radius: 5px;
        }
    </style>
</head>
<body onload= "createCode()">
<div class="wrap">
    <input type="text" id="text" placeholder = "请输入验证码">
    <a href="javascript:" id="code" onclick="createCode( this )"></a>
    <input type="button" id="btn" value="验证" onclick="validate()">
</div>

<script>
    //功能实现 ：自动生成验证码，点击验证按钮的时候匹配字符串成功则跳转到百度失败input输入框为空，继续随机生成；
    var input = document.getElementById("text");
    var btn = document.getElementById('btn');
    var codes = document.getElementById('code');
    var inputext="";
    var code = "";
    //创建验证码
    function  createCode() {

        code = "";
        //设置验证码的个数为4个
        var codeLength = 4;
         //设置验证码中科选取的数值
        var random = [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'];
         //random一共36个字符
        for( var i =0 ; i<codeLength ; i++) //在random中随机去4个值出来
        {
            //使用random() 方法可返回介于 0 ~ 1 之间的一个随机数。round() 方法可把一个数字舍入为最接近的整数。
            var j =Math.round(Math.random()*36) //随机生成下标
            code+=random[j];
        }
        //把code随机生成的验证码放入超链接当中;
        codes.innerHTML = code;
    }
    //获取输入框内的值
    input.onchange = function (ev) {
         inputext = input.value.trim().toUpperCase();
         //console.log(inputext);
    }
        


    //结果校验 判断输入的字符和随机生成的验证码
    function validate() {
        //获取输入的内容，如果输入为空，弹出警告
    if(inputext)
    {
          //检查是否相等
        if(inputext == code)
        {
            window.open('http://www.baidu.com','_self');
        }
        else {
            //清空输入框
            input.innerHTML = "";
            alert("验证码不正确，请重新输入");
            //验证码在随机生成
            createCode();
        }
    }
    else{
        alert("请输入验证码");
    }



    }

</script>



</body>
</html>
猜你喜欢
