欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js实现验证码功能

程序员文章站 2022-04-10 19:29:44
#前面是拆解着讲的,不想看可以直接跳过,带注释的完整版代码和效果在后面首先在页面中准备一个输入框,一个显示验证码的盒子和一个提交按钮
然后加亿些样式input { width: 150px; height: 30px; outline: n...

#前面是拆解着讲的,不想看可以直接跳过,带注释的完整版代码和效果在后面

首先在页面中准备一个输入框,一个显示验证码的盒子和一个提交按钮

<body>
    <input type="text">
    <div></div>
    <button>提交</button>
</body>

然后加亿些样式

input {
    width: 150px;
    height: 30px;
    outline: none;
    font-size: 24px;
    vertical-align: middle;
}

button {
    outline: none;
    vertical-align: middle;
    cursor: pointer;
}

div {
    display: inline-block;
    width: 90px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
    background-color: #ddd;
    cursor: pointer;
}

然后大概长这样(有点丑,不过无所谓,主要内容是js)
js实现验证码功能
好,那么开始写js

首先获取这些元素

var input = document.querySelector('input');
var btn = document.querySelector('button');
var div = document.querySelector('div');

然后搞一个字符库和一个保存验证码的字符串

var characters = "QWETYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890";
var str;

那个字符库就直接滚键盘就行了~

因为验证码要多次用到随机数,所以为了方便就先搞一个随机数的函数

function getRandom(l, r) {
    return parseInt(l + Math.random() * (r - l + 1));
}

因为是验证码,所以不能让生成的文本可以直接被选中复制,所以给加一个文本不可选中

div.addEventListener('selectstart', function (e) {
    e.preventDefault();
})

因为验证码不是每次刷新页面就生成一次,看不清是可以换的,要多次生成,所以就把生成验证码的部分写在一个函数里

function run() {
    str = '';
    while (div.hasChildNodes()) {
        div.removeChild(div.firstChild);
    }
    for (var i = 0; i < 4; i++) {
        var span = document.createElement('span');
        span.innerHTML = characters[getRandom(0, characters.length - 1)];
        span.style.display = 'inline-block';
        span.style.fontSize = getRandom(16, 32) + 'px';
        span.style.color = 'rgb(' + getRandom(0, 200) + ',' + getRandom(0, 200) + ',' + getRandom(0, 200) + ')';
        span.style.transform = 'translate(' + getRandom(-5, 5) + 'px, ' + getRandom(-5, 5) + 'px) rotate(' + getRandom(-20, 20) + 'deg)';
        str += span.innerHTML;
        div.appendChild(span);
    }
}

大概说明一下这部分,原理大概就是创建4(我搞的是4位的验证码)个span,然后分别随机设置文本、字体大小、字体颜色、平移旋转啥的,然后把span添加到div里成为div的子节点,然后不要忘了让str变量储存一下验证码的字符

每次生成之前先将上一次生成的验证码删掉(即把div里的所有子节点删除掉),并且把str重置

然后页面刷新的时候生成一次(调用一次),每次点击div的时候重新生成一次(每次点击调用一次)

run();
div.addEventListener('click', run);

再给提交按钮添加点击事件:判断验证输入的验证码对不对,然后刷新验证码,并且自动将输入框中的文本清除

btn.addEventListener('click', function () {
    if (input.value.toLowerCase() == str.toLowerCase()) {
        alert('验证成功');
    } else {
        alert('验证失败');
    }
    run();
    input.value = '';
})

判断验证码这里我为了不区分大小写用了toLowerCase()函数将两个字符串都转化成小写之后再做的比较

至此,功能就都实现的差不多了

看效果:

js实现验证码功能
js实现验证码功能
js实现验证码功能

带注释的完整版代码如下:

<!DOCTYPE html>
<html lang="ch-ZN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js实现验证码</title>
    <style>
        input {
            width: 150px;
            height: 30px;
            outline: none;
            font-size: 24px;
            vertical-align: middle;
        }

        button {
            outline: none;
            vertical-align: middle;
            cursor: pointer;
        }

        div {
            display: inline-block;
            width: 90px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            vertical-align: middle;
            background-color: #ddd;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <input type="text">
    <div></div>
    <button>提交</button>
    <script>
        // 获取元素
        var input = document.querySelector('input');
        var btn = document.querySelector('button');
        var div = document.querySelector('div');

        // 搞一个字符库
        var characters = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890";
        var str; // str用来储存验证码的文本

        // 生成一个在[l,r]范围内的随机整数的函数
        function getRandom(l, r) {
            return parseInt(l + Math.random() * (r - l + 1));
        }

        // 设置文本不可选中
        div.addEventListener('selectstart', function (e) {
            e.preventDefault();
        })

        // 生成验证码的函数
        function run() {

            // 先重置str
            str = '';

            // 删除掉div中的所有子节点
            while (div.hasChildNodes()) {
                div.removeChild(div.firstChild);
            }

            // 生成由四个字符组成的验证码
            for (var i = 0; i < 4; i++) {

                // 创建一个span对象
                var span = document.createElement('span');

                // 设置文本(从字库中随机抽取一个字符)
                span.innerHTML = characters[getRandom(0, characters.length - 1)];

                // 设置一些随机的样式
                span.style.display = 'inline-block';
                span.style.fontSize = getRandom(16, 32) + 'px';
                span.style.color = 'rgb(' + getRandom(0, 200) + ',' + getRandom(0, 200) + ',' + getRandom(0, 200) + ')';
                span.style.transform = 'translate(' + getRandom(-5, 5) + 'px, ' + getRandom(-5, 5) + 'px) rotate(' + getRandom(-20, 20) + 'deg)';
                str += span.innerHTML; // str记录字符
                div.appendChild(span); // 将span添加到div中
            }
        }


        run(); // 每次打开/刷新页面时先调用一次
        div.addEventListener('click', run); // 每次点击验证码的时候调用一次

        // 提交按钮点击事件
        btn.addEventListener('click', function () {
            if (input.value.toLowerCase() == str.toLowerCase()) {
                alert('验证成功');
            } else {
                alert('验证失败');
            }
            run();
            input.value = '';
        })
    </script>
</body>

</html>
以上

ヾ(≧∪≦*)ノ〃

本文地址:https://blog.csdn.net/ycx60rzvvbj/article/details/107441800

相关标签: javascript