验证码案例

验证码案例

成品图：

准备：

1. 用一个数组存储验证码内容的源;
2. 简单的前端界面

思路：

1. 循环模拟数组的数据;
2. 在循环里面用随机数方法实现数组数据的随机抽取；
3. 这个随机数方法我们用Math.Random();这个方法用来实现四舍五入。

步骤：

1. 因为要取数组里面随机的值来拼接成验证码,用随机数来完成；

2.      var index = Math.round(Math.random() * 21);
         //值从0-21随机出现
   

3. 本次生成6位随机验证码:用for循环循环长度为6

4.    var str = "";   //用来将随机生成的六个数字字符组合拼接
               for (var i = 0; i < 6; i++) {
                   var index = Math.round(Math.random()      * 21);
                   str += dataArr[index];
               }
   

5. 上面的经常要用所以我们将其封装成一个函数ran()

6.  function ran() {
               var str = "";   //用来将随机生成的六个数字字符组合拼接
               for (var i = 0; i < 6; i++) {
                   var index = Math.round(Math.random() * 21);
                   str += dataArr[index];
               }
               return str;
           };
   

7. 点击看不清验证码为其绑定click事件触发run()实现验证码的刷新

8.   change.addEventListener("click", function () {
                                                 conYan.querySelector("p").innerHTML=ran();
           });
   

9. 输入框输入完以后点击提交按钮进行检测比对输入的内容和随机生成的验证码是不是完全相同;

   1. 如果相同在提交按钮之后显示 ”验证码输入正确✔同时添加类right“
   2. 如果不相同在提交按钮之后显示“验证码输入错误❌ 同时添加类wrong“

10. 7中的代码因为复用率高也将其封装成函数 testing

11.  function testing(self,that,its) {
                if (self.value == that.innerText) {
                    //  tips.style.display = "block";
                    its.innerHTML = "<span class='right'>验证码输入正确✔</right>";
                } else {
                    its.innerHTML = "<span class = 'wrong'>验证码输入错误，请重新输入❌</span>";
                }
            }
    参数关键信息~~~~
        self表示输入输入框部分;
        that表示验证码部分;
    	its表示的是显示正误信息;
    

12. 点击确认显示错误信息时，重新调用生成验证码函数ran()用来实现刷新的验证码作用

13. else {
                    its.innerHTML = "<span class = 'wrong'>验证码输入错误，请重新输入❌</span>";
                    conYan.querySelector("p").innerHTML = ran();     //重新调用实现验证码部分刷新
               }
    

完整代码如下：

html

  <div class="content">
        <div class="con-yan">
            <p></p>
        </div>
        <a href="javascript:;" id="change">看不清,换一张</a>
        <div class="con-inp">
            <input type="text" placeholder="请输入验证码" id="inp">
        </div>
        <div id="con-sub">
            提交
        </div>
        <p id="tips"></p>
    </div>

css

   * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            font-size: 14px;
        }

        body {
            background: rgb(184, 185, 185);
        }

        .content {
            width: 400px;
            padding: 10px 5px;
            margin: auto;

        }

        .con-yan {
            width: 120px;
            display: inline-block;
            margin-right: 10px;
            padding-right: 15px;
        }

        .con-yan p {
            width: 100%;
            height: 30px;
            background-color: #bfc;
            color: blue;
            font-size: 24px;
            font-style: italic;
            letter-spacing: 5px;
            /*设置字符间距*/
        }

        #change {
            display: inline-block;
        }

        .con-inp {
            margin: 20px 0;
        }

        #inp {
            height: 25px;
            outline: none;
        }

        #con-sub {
            display: inline-block;
            margin-right: 15px;
            height: 35px;
            width: 150px;
            background-color: lavender;
            text-align: center;
            line-height: 35px;
            user-select: none;
            /*禁止文字被选中*/
            border-radius: 15px;
        }

        #con-sub:hover {
            background-color: rgb(171, 230, 157);
            color: #fff;
        }

        #tips {
            display: inline-block;
        }

        #tips span {
            user-select: none;
        }

        .wrong {
            color: red;
        }

        .right {
            color: green;
        }

js

   var change = document.getElementById("change");
        var inp = document.getElementById("inp");
        var conYan = document.querySelector(".con-yan");
        var conSub = document.getElementById("con-sub");
        var tips = document.getElementById("tips");

        //------------------------随机生成验证码模块--------------------------------

        //1.   先用数组模拟一下数组
        var dataArr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f", "g", "h", "#", "^", "&", "?"];
        conYan.querySelector("p").innerHTML = ran();
        //随机验证码部分
        function ran() {
            var str = "";   //用来将随机生成的六个数字字符组合拼接
            for (var i = 0; i < 6; i++) {
                var index = Math.round(Math.random() * 21);
                str += dataArr[index];
            }
            return str;
        };

        // 2.看不清更换验证码部分
        change.addEventListener("click", function () {
            conYan.querySelector("p").innerHTML = ran();
        });

        inp.addEventListener("keyup", function () {
            if (!this.value.trim()) {                    //如果验证码为空的话，那么就让验证消息消失
                tips.innerText = "";
            } 
        })

        inp.addEventListener("focus", function () {
            if (!this.value.trim()) {                    //如果验证码为空的话，那么就让验证消息消失
                tips.innerText = "";
            } else {
                testing(this,conYan,tips)    
            }
        })

        // 3.验证码提交部分
        conSub.addEventListener("click", function () {
                testing(inp,conYan,tips)
        });      
        function testing(self,that,its) {
            if (self.value == that.innerText) {
                //  tips.style.display = "block";
                its.innerHTML = "<span class='right'>验证码输入正确✔</right>";
            } else {
                its.innerHTML = "<span class = 'wrong'>验证码输入错误，请重新输入❌</span>";
                conYan.querySelector("p").innerHTML = ran();
            }
        }