JavaScript實(shí)現(xiàn)移動(dòng)端短信驗(yàn)證碼流程介紹

更新時(shí)間：2022年10月08日 15:18:02 作者：阿選不出來(lái)

這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)移動(dòng)端發(fā)送短信驗(yàn)證碼案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

實(shí)戰(zhàn)效果演示

實(shí)現(xiàn)原理

準(zhǔn)備: 一個(gè)輸入框, 四個(gè)div小盒子

原理: 監(jiān)聽(tīng)input輸入框,分別讓輸入的四個(gè)數(shù)字展現(xiàn)在那四個(gè)小盒子里,在運(yùn)用css知識(shí),讓四個(gè)小盒子覆蓋輸入框.

附上動(dòng)畫:

代碼部分

HTML

<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>

JS

首先聊聊 checkNum() 函數(shù), 當(dāng)我們輸入驗(yàn)證碼的時(shí)候,難免會(huì)有人輸入一些非數(shù)字的字符進(jìn)去, checkNum() 的作用就是將所有輸入的不是數(shù)字的字符轉(zhuǎn)換為空值.

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

我們要做的第一步就是獲取元素,數(shù)據(jù)初始化, 并且讓用戶一開(kāi)始輸入就去聚焦到輸入框內(nèi).

const valBox = document.querySelector(".val-box")
// 輸入框一被點(diǎn)擊就聚焦到輸入框
valBox.addEventListener("click", () => {
    console.log("聚焦");
    valCodeInput.focus()
})

第二步, 即時(shí)的反映輸入框內(nèi)的值

// 獲取div小盒子
const valCodeItems = document.getElementsByName("val-item")
// 獲取輸入框
const valCodeInput = document.querySelector("#val-code-input")
const regex = /^[\d]+$/
// 驗(yàn)證碼初始長(zhǎng)度為0
let valCodeLength = 0
valCodeInput.addEventListener("input", (e) => {
    valCodeLength = valCodeInput.value.length
    // 如果輸入的值符合要求
    if(valCodeInput.value && regex.test(valCodeInput.value)) {
        // 讓div下邊框邊藍(lán)
       valCodeItems[valCodeLength - 1].classList.add('available');
        // div的值與input的值相對(duì)應(yīng)
        valCodeItems[valCodeLength - 1].innerText = valCodeInput.value.substring(valCodeLength - 1, valCodeLength)
    }
})

點(diǎn)擊獲取驗(yàn)證碼或點(diǎn)擊第一個(gè)數(shù)字輸入框時(shí)獲取焦點(diǎn), 并添加available 樣式,使得第一個(gè)小盒子地邊框邊藍(lán)

valCodeItems[0].addEventListener("click", (e) => {
    valCodeInput.focus()
    valCodeItems[0].classList.add("available")
})

第三步, 完善刪除鍵,當(dāng)刪除鍵抬起的時(shí)候,刪除最后一個(gè)小盒子內(nèi)的數(shù)字,并去除下邊框變藍(lán)效果

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

接下來(lái)就是最后一步啦, 當(dāng)檢測(cè)到輸入框的長(zhǎng)度變?yōu)?時(shí),自動(dòng)發(fā)送短信驗(yàn)證請(qǐng)求.

到此這篇關(guān)于JavaScript實(shí)現(xiàn)移動(dòng)端短信驗(yàn)證碼流程介紹的文章就介紹到這了,更多相關(guān)JS短信驗(yàn)證碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: