JavaScript实现移动端短信验证码流程介绍

<div class="val-box" id="val-box">
    <input type="text" id="val-code-input" maxlength="4" onkeyup="checkNum(this)" onblur="checkNum(this)">
    <div name="val-item"></div>
    <div name="val-item"></div>
    <div name="val-item"></div>
    <div name="val-item"></div>
</div>

function checkNum(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]+$/
// 验证码初始长度为0
let 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)
    }
})

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")
        }
    }
})