原生JS实现移动端短信验证码功能

前言

🚩🚩🚩
💎个人主页: 阿选不出来
💎个人简介: 一名大二在校生, 不定时更新自己学习道路上的一些笔记.
💎目前开发的专栏: JS 🍭Vue🍭JS进阶
💎这里附上以前的文章,感兴趣的可以看看🍭实现移动端的触屏滑动效果

原生JS实现移动端短信验证码功能

实战效果演示:

实现原理:

• 准备: 一个输入框, 四个div小盒子
• 原理: 监听input输入框,分别让输入的四个数字展现在那四个小盒子里,在运用css知识,让四个小盒子覆盖输入框.

• 附上动画:

代码部分:

HTML

<divclass="val-box"id="val-box"><inputtype="text"id="val-code-input"maxlength="4"onkeyup="checkNum(this)"onblur="checkNum(this)"><divname="val-item"></div><divname="val-item"></div><divname="val-item"></div><divname="val-item"></div></div>

JS

首先聊聊

checkNum()

函数, 当我们输入验证码的时候,难免会有人输入一些非数字的字符进去,

checkNum()

的作用就是将所有输入的不是数字的字符转换为空值.

functioncheckNum(e){
    e.value = e.value.replace(/[\D]/g,'')}

我们要做的第一步就是获取元素,数据初始化, 并且让用户一开始输入就去聚焦到输入框内.

const valBox = document.querySelector(".val-box")// 输入框一被点击就聚焦到输入框
valBox.addEventListener("click",()=>{
    console.log("聚焦");
    valCodeInput.focus()})

第二步, 即时的反映输入框内的值

// 获取div小盒子const valCodeItems = document.getElementsByName("val-item")// 获取输入框const valCodeInput = document.querySelector("#val-code-input")const regex =/^[\d]+$/// 验证码初始长度为0let valCodeLength =0

valCodeInput.addEventListener("input",(e)=>{
    valCodeLength = valCodeInput.value.length
    // 如果输入的值符合要求if(valCodeInput.value && regex.test(valCodeInput.value)){// 让div下边框边蓝
       valCodeItems[valCodeLength -1].classList.add('available');// div的值与input的值相对应
        valCodeItems[valCodeLength -1].innerText = valCodeInput.value.substring(valCodeLength -1, valCodeLength)}})

• 点击获取验证码或点击第一个数字输入框时获取焦点, 并添加available 样式,使得第一个小盒子地边框边蓝valCodeItems[0].addEventListener("click",(e)=>{ valCodeInput.focus() valCodeItems[0].classList.add("available")})

第三步, 完善删除键,当删除键抬起的时候,删除最后一个小盒子内的数字,并去除下边框变蓝效果

window.addEventListener("keyup",(e)=>{if(e.keyCode ===8){
        valCodeItems[valCodeLength].innerText =""if(valCodeLength !==0){
            valCodeItems[valCodeLength].classList.remove("available")}}})

接下来就是最后一步啦, 当检测到输入框的长度变为4时,自动发送短信验证请求.

写在最后

• 看到这里有没有收获什么呢?🎀🎀🎀
• 🎈🎈有错误的地方可以在评论区留言,本博会虚心改正的
• 觉的博主写的不错的,可以给个一键三连lia~✨✨