JS验证码

Posted INSTANCE_SELF

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

  

以上是关于JS验证码的主要内容,如果未能解决你的问题,请参考以下文章

JSP 设计教师与学生不同登陆界面(带验证码)

js实现输入手机验证码后点击提交按钮验证手机输入的验证码和发送的验证码是不是一致

一百一十八:CMS系统之短信验证码加密和js代码混淆

jquery实现手机发送验证码的倒计时代码

git动态验证码

js短信验证码时间