JavaScript實現移動端短信驗證碼流程介紹
更新時間：2022年10月08日 15:18:02 作者：阿選不出來
這篇文章主要為大家詳細介紹了javascript實現移動端發(fā)送短信驗證碼案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
實戰(zhàn)效果演示
實現原理
準備: 一個輸入框, 四個div小盒子
原理: 監(jiān)聽input輸入框,分別讓輸入的四個數字展現在那四個小盒子里,在運用css知識,讓四個小盒子覆蓋輸入框.
附上動畫:
代碼部分
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() 函數, 當我們輸入驗證碼的時候,難免會有人輸入一些非數字的字符進去, checkNum() 的作用就是將所有輸入的不是數字的字符轉換為空值.
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)
}
})點擊獲取驗證碼或點擊第一個數字輸入框時獲取焦點, 并添加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")
}
}
})
接下來就是最后一步啦, 當檢測到輸入框的長度變?yōu)?時,自動發(fā)送短信驗證請求.
到此這篇關于JavaScript實現移動端短信驗證碼流程介紹的文章就介紹到這了,更多相關JS短信驗證碼內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
js replace與正則表達式結合，可以有效發(fā)揮replace的功效，可以幫助用戶解決替換中的復制問題，接下來詳細介紹使用方法，感興趣的朋友可以了解下2013-01-01
這篇文章主要介紹了js圖數據結構處理 迪杰斯特拉算法代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
在很多現實的場景中，有的文本框我們希望在選擇“是”的按鈕之后才出現，這就需要js控制TR的隱藏和顯示，如何控制，本文為大家揭曉2016-03-03
JavaScript使用URL.canParse驗證URL的方法詳解
JavaScript誕生以來,一直沒有一種簡單的方法驗證URL,現在JavaScript新增了一個新方法——URL.canParse,文中通過代碼示例和圖文介紹的非常詳細,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了使用JS在父頁面和子頁面間相互傳值方法,子頁面可以是window.open彈出的,也可以是iframe框架中的頁面,需要的朋友可以參考下2014-03-03
這篇文章主要為大家詳細介紹了js canvas實現寫字動畫效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
項目中遇到table表格單元格不整齊、錯位等情況,下面這篇文章主要給大家介紹了關于uniapp中table表格設置寬度無效的原因以及解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
ChatGPT 是一個基于深度學習的大型語言模型，處理自然語言需要大量的計算資源和時間，響應速度肯定比普通的讀數據庫要慢的多，本文介紹了ChatGPT打字機消息回復實現原理，感興趣的同學可以跟著小編一起學習2023-05-05
本文為大家介紹下使用js實現可以供選擇的彈出框，具體的實現如下，感性的朋友可以參考下，希望對大家學習有所幫助2013-09-09
這篇文章主要為大家介紹了JavaScript的計時器和按鈕效果設置，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12