js案例---验证码

forever_zc

已于 2024-06-19 11:44:39 修改

阅读量890

点赞数

文章标签： javascript 前端 html

于 2022-11-24 20:30:29 首次发布

本文链接：https://blog.csdn.net/forever_zc/article/details/128025488

版权

本文介绍了如何使用JavaScript来创建验证码功能。首先展示了网页样式的设计，接着通过JavaScript获取验证码的div并添加点击事件。接着实现两种类型的验证码：1.纯数字验证码，通过随机数生成；2.数字加字母验证码，利用`String.fromCharCode()`方法将Unicode编码转换为字母。最后展示了实现后的效果和代码示例。

摘要由CSDN通过智能技术生成

我们在进行注册与登录时，常常会有验证码的使用，今天我们来用js实现验证码的功能

我们先写网页的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册表</title>
    <style>
        #div1 {
            width:100px;
            height:30px;
            border:1px solid black;
            text-align:center;
            line-height:30px;
            font-size:20px;
        }
    </style>
    
</head>
<body>
<form action="" method="get" >
    <table align="center" border="1px solid black" style="background-color: #3afffd">
        <tr>
            <td>账号:</td>
            <td>
                <input type="text" name="username" required>
            </td>
        </tr>
        <tr>
            <td>密码:</td>
             <td>
                <input type="password" name="password" required>
             </td>
        </tr>
        <tr>
            <td>邮箱:</td>
            <td>
                 <input type="email" name="emails" required>
            </td>
        </tr>
        <tr>
            <td>年龄:</td>
             <td>
                <input type="number" name="ages" required>
             </td>
        </tr>
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="sex" value="男">男
                <input type="radio" name="sex" value="女">女
            </td>
        </tr>
        <tr>
            <td>爱好:</td>
            <td>
                <input type="checkbox" name="hobby" checked value="sing">唱
                <input type="checkbox" name="hobby" value="jump">跳
                <input type="checkbox" name="hobby" value="rap">rap
                <input type="checkbox" name="hobby" value="Basketball">篮球
            </td>
        </tr>
        <tr>
            <td>头像:</td>
            <td>
                <input type="file">
            </td>

        </tr>
        <tr align="center">
            <td>验证码:</td>
            <td>
                <button onclick="btnClick();" style="border: 1px solid #3afffd;background-color: #3afffd"><div id="div1">获取验证码</div></button>


                <p><label for="cg"/><input type="text" id="cg"></p>
            </td>

        </tr>
        <tr align="center">
            <td colspan="2">
                <button onclick="btClick();" style="border: 1px solid #3afffd;background-color: #3afffd"><input type="submit" value="注册"></button>

            </td>
        </tr>
    </table>
</form>
</body>
</html>

这样我们就得到了这样的效果：

我们接下来书写js

首先我们先获取到验证码的div，给它加一个点击事件

let divEle = document.querySelector("#div1")//获取验证码盒子
        divEle.addEventListener("click", function () {
       
        })

1.纯数字验证码

封装函数

定义一个数组变量且为空，使用for循环取一个随机数，并且使用push方法将这个数添加到数组中

然后修改验证码的内容为函数中的随机数代码如下：

代码如下：

let divEle = document.querySelector("#div1")
        divEle.addEventListener("click", function () {
            divEle.innerHTML = numTestCode(6)
        })
        // 纯数字验证码
        function numTestCode(n) {
            var arr = [];
            for (var i = 0; i < n; i++) {
                var num = parseInt(Math.random() * 10);
                arr.push(num);
            }
            return arr.join('');
        }

效果如下：

出现数字验证码并且可以点击切换

2.数字加字母验证码

因为验证码中要出现字母所有我们需要用到String.fromCharCode()方法

String.fromCharCode()可以将 Unicode 编码转为一个字符

例

var n = String.fromCharCode(65);

n 输出结果:

由A到z，Unicode编码65到122

所有我们可以用if语句通过随机数来实现字母验证码

js代码如下:

let divEle = document.querySelector("#div1")
        divEle.addEventListener("click", function () {
            divEle.innerHTML = testCode(6)
        })
        // 数字加字母验证码
        function testCode(n) {
            var arr1 = [];
            for (var i = 0; i < n; i++) {
                var nums = parseInt(Math.random() * 123);
                if (nums >= 65 && nums <= 90 || nums >= 97 && nums <= 122) {
                    arr1.push(String.fromCharCode(nums));
                } else if (nums >= 0 && nums <= 9) {
                    arr1.push(nums);
                } else {
                    i--;
                }
            }
            return arr1.join('');
        }