js | 实现验证码输入携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情车

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

车上无聊的时候写了个小demo，来实现验证码的输入。

首先是实现图

第一步编写CSS和HTML

先把整体框架搭建出来，并写好样式，这个比较简单，后续会继续写。

<body>
<div class="v_code">
    <div class="v_show">
        <span class="code" id="checkCode"></span>
        <a id="linkbt">看不清换一张</a>
    </div>
    <div class="input_show">
        <label class="inputLabel">验证码:</label>
        <input type="text" id="inputCode" />
        <span id="text_show"></span>
    </div>
    <input type="button" id="button1" value="确定" />
</div>

第二步编写JavaScript

我的想法是首先获取所有节点，然后绑定事件。

1. 获取所有用到的节点

var checkCode = document.getElementById('checkCode');   //验证码
var linkbt = document.getElementById('linkbt');         //看不清换一张        
var inputCode = document.getElementById('inputCode');  //输入框
var button1 = document.getElementById('button1');      //确定按钮

在获取到所有节点之后生成验证码

2. 生成验证码

将验证码封装成一个函数，后续可以直接调用

function getCode() {
    var arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g']
    var str = ''
    for (let i = 0; i < 6; i++) {
        var randomCode = Math.round(Math.random() * arr.length); // 随机生成数组中的一个下标
        str += arr[randomCode] // 取出数组随机下标的值，和字符串拼接	
    }
    checkCode.innerHTML = str;
}
window.onload = getCode;

3. 点击换一张

点击换一张生成一个验证码，要在点击按钮绑定点击事件，去调用生成验证码函数

linkbt.onclick = (() => getCode());

4. 确定按钮

验证码生成成功，并且刷新和点击换一张都随机生成一个6位数验证码。现在要做的就是比对验证码和输入的验证码是否一致

首先，点击确定按钮才开始比对,比较文本框输入的值和验证码，成功的话跳转页面，错误时弹出错误和并把输入框置空。

button1.onclick = (() => {			
    if(inputCode.value != checkCode.innerHTML){	
        alert('输入验证码错误,请重新输入');
        inputCode.value = ' ';
    }else{
        window.location = 'https://juejin.cn/'
    }
})

以上就是一个简单的验证码验证。

js | 实现验证码输入

第一步 编写CSS和HTML

第二步 编写JavaScript

第一步编写CSS和HTML

第二步编写JavaScript