原生JS实现基础验证码校验

目录

文章目录

前言

一、思路

二、实现步骤

1.html和css

---

前言

此文章主要知识点：

        利用随机数随机数组内的数，利用for循环生成随机数位数

        利用DOM事件绑定节点对象

---

一、思路

生成一组数组，数组内部总共有15位字符串

生名一个空的变量用来保存数据

利用for循环实现6位数

生成随机数，随机数的范围为数组的15位字符串

获取节点对象实现验证

二、实现步骤

1.html和css

代码如下（示例）：

css部分：

        div{
            width: 240px;
            height: 80px;
            background-color: rgb(176, 210, 232);
            margin: auto;
            font-size: 30px;
            text-align: center;
            line-height: 80px;
        }
        a{
            display: block;
            margin: 20px;
            text-align: center;
        }
        input{
            width: 240px;
            height: 80px;
        }

html部分：

    <div></div><a href="#">看不清，换一张</a>
    <span>验证码：</span><input type="text" id="yb">
    <p><input type="submit" id="check"></p>

js部分：

        // 当页面加载时开始执行
        window.onload = function () {
        // 调用验证码
        var res = getNumber();
        // 将验证码进行函数封装
        function getNumber () {
        var str =     ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
        var suiji = '';
        // 利用for循环生成6位的字符串
        for(var i = 1;i<=6;i++){
         let num = Math.round( Math.random()*(15-0)+0);
         // 将获得的6位随机数赋值给之前声明的空的变量
         suiji+=str[num];
        }
        return suiji;
        }
        // 获取节点对象且将获得的6位随机数追加到页面
        document.querySelector('div').innerHTML = res;
        // 点击事件，当点击a标签时重新调用随机数并将随机数追加到页面
        document.querySelector('a').onclick = function () {
            document.querySelector('div').innerHTML = getNumber();
        }
        // 进行验证，点击确定时进行对比
        document.getElementById('check').onclick = function () {
            // 获取div里面的值
            var code = document.querySelector('div').innerHTML;
            console.log(code);
            // 获取input里面输入的值
            var inputCode = document.getElementById('yb').value;
            console.log(inputCode);
            if(code!=inputCode){
                alert('验证码输入不正确,请重新输入');
                return false;
            }
        }
    }

---

总结：

以上就是验证码的基本功能

        我们以上运用到的知识点有：构造随机数，for循环构造随机数位数，DOM0级事件绑定节点对象并进行追加到页面

        补充说明：当我们点击a标签时会出现浏览器默认行为，记得阻止浏览器默认行为页面才不会刷新