JavaScript实现随机验证码并验证

àì夳堔傛蜴生んèń 2023-01-13 15:00 237阅读 0赞

### 前言 ###

在许多登录页面里，我们都可以看到验证码的身影，每次登录都需要重新输入验证码。这个功能非常重要，它可以有效防止这种问题对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

### 效果展示 ###

![在这里插入图片描述][20210419133134732.gif_pic_center]

### HTML ###

创建一个div拿来展示随机生成的验证码，一个span可以重新随机生成新的验证码，一个文本框可以输入我们的验证码，还有一个提交按钮。

<div id="banar"></div>
    	<span id="chang">看不清换一张</span><br>
        验证码：<input type="text" id="txt"><br>
        <input type="submit" value="验证" id="sub">

### 加入一些简单的CSS样式 ###

#banar{ 
        width: 90px;
        height: 40px;
        background-color: #999;
        font-weight: bold;
        font-size: 2em;
        text-align: center;
        line-height: 40px;
        font-family: "fantasy";
        color: burlywood;
        margin: 10px;
        display: inline-block;
    }
    #chang{ 
        font-size: 14px;
        color: darkgreen;
        cursor: pointer;/* 鼠标经过变成小手 */
    }
    #txt{ 
        width: 60px;
        height: 20px;
        outline: none;/* 鼠标聚焦文本框没有边框线*/
    }

### JavaScript ###

原理就是需要创建一个数组，里面存放着随机验证码中所有可能出现的字母或数字，使用random()随机生成四个0-61的数字作为数组的索引。在判断我们在文本框输入的字母或数字和随机生成的字母或数字是否相等。如果相等，验证成功；否则验证错误。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center]

[20210419133134732.gif_pic_center]: /images/20221022/229e52e94a5a4f49b10b8849c9bb4ed3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/04c74d9ff44d4a0d987bfec84b035c4d.png