验证码生成及校验（JavaScript案例）

最新推荐文章于 2024-03-19 09:02:10 发布

qq_58460470

最新推荐文章于 2024-03-19 09:02:10 发布

阅读量424

点赞数

分类专栏： JavaScript案例文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_58460470/article/details/125351721

版权

JavaScript案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、生成验证码

2、在范围内生成的内容是随机的

      function getcode(){
            var arr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
            var str = '';
            for(var i =0; i<6;i++){
                var num = Math.round(Math.random()*(15-0)+0);
                str +=arr[num];
            }
            return str;
        }

效果

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证码</title>
    <style>
        #linkbt{
            color: aqua;
            text-decoration: underline;
            font-size: 0.5em;
        }
        .code{
            background-color: bisque;
            color: blue;
            height: 100px;
            width: 150px;
            font-size: 2em;
            font-style: oblique;

        }
        .v_code{
            margin: 0 auto;
            height: 300px;
            width: 300px;
        }
    </style>
</head>
<body>
    <div class="v_code">
        <div class="code_show">
            <span class="code" id="checkcode">abd23y</span>
            <a id="linkbt">看不清换一张</a>
        </div>
        <div class="input_code">
            <label for="inputcode">验证码：</label>
            <input type="text" id="inputcode"/>
            <span id="text_show"></span>
        </div>
        <input id="button1" type="button" value="确定">
    </div>

    <script>
        window.onload = function(){
            var res = getcode();
        function getcode(){
            var arr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
            var str = '';
            for(var i =0; i<6;i++){
                var num = Math.round(Math.random()*(15-0)+0);
                str +=arr[num];
            }
            return str;
        }
        document.getElementById('checkcode').innerText = res;
        //点击事件
        document.getElementById('linkbt').onclick = function(){
            document.getElementById('checkcode').innerText = getcode();
        }
        document.getElementById('button1').onclick = function(){
            var code = document.getElementById('checkcode').innerText;
            var inputcode = document.getElementById('inputcode').value;
            if(code != inputcode){
                alert ('验证码有误请重新输入');
                document.getElementById('inputcode').value='';
                return false;
            }
        }
    }

    </script>
</body>
</html>