上回，上次和大家簡單的介紹了下web驗證碼實現(xiàn)，也說了異步刷新驗證碼的實現(xiàn)邏輯，不過有些小伙伴還是建議我實現(xiàn)下，廢話少說，上代碼：此代碼是需要依賴：sanic==19.9.0Pillow==7.0.0

登錄界面中我們經(jīng)常會遇到需要校驗驗證碼才能登錄，驗證碼是由一串隨機(jī)產(chǎn)生的字母、數(shù)字或符號組成。目的是為了防止用戶利用機(jī)器人自動注冊、惡意登錄、刷票灌水等操作，驗證碼技術(shù)可以適當(dāng)?shù)奶岣叻?wù)的安全性，提升用戶體驗。常見的驗證碼有隨機(jī)字符、漢字圖片、字符圖片、算術(shù)、問答、滑塊、坐標(biāo)、旋轉(zhuǎn)、滑動拼圖、文字點選、圖標(biāo)點選、推理拼圖、語序點選、空間推理、短信、語音、智能無感知等驗證方式，最簡單的應(yīng)該是隨機(jī)字符驗證了（安全級別最低！）。

HTML模板構(gòu)建

在template模板中綁定一個動態(tài)的style樣式，利用check來改變圖標(biāo)的顏色提示用戶驗證碼輸入正確，如果驗證碼錯誤則利用message彈出警示框提示。點擊驗證碼位置觸發(fā)refreshCode重新調(diào)用createCode來刷新驗證碼，handleLogin為鍵盤事件觸發(fā)登錄。

最簡單的驗證碼

利用Math.random()隨機(jī)生成一個0-1之間的隨機(jī)double值，根據(jù)random隨機(jī)數(shù)組中的數(shù)據(jù)隨機(jī)出索引值，再通過索引值獲取到對應(yīng)的隨機(jī)值。隨機(jī)的長度通過len來限制，將每次隨機(jī)出的數(shù)據(jù)追加到code中即可得到隨機(jī)的驗證碼。

驗證碼效驗

這里不能通過el-form中的rules來校驗驗證碼的正確與否，因為在data中定義checkCode 無法獲取到this.createdCode值（undefined）。這里我們利用el-input的blur失去焦點事件來觸發(fā)驗證，如果你想在用戶輸入的時候就驗證可以使用input事件在Input值改變時觸發(fā)。

總結(jié)：

這里只是一個簡單的驗證邏輯，真正的應(yīng)用上隨機(jī)字符基本不會被使用。因為隨機(jī)字符驗證安全性太低了，模擬操作可以很容易的通過DOM獲取到相應(yīng)的驗證碼。以上內(nèi)容是小編給大家分享的【Vue實戰(zhàn)089：最簡單的登錄驗證碼功能實現(xiàn)】，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。更多Vue實戰(zhàn)技巧可以參考以下專欄：

為了方便學(xué)習(xí)，下面附上本文用到的源碼：

是個發(fā)送驗證碼時常用的功能，當(dāng)用戶點擊【發(fā)送驗證碼】之后出現(xiàn)【重新獲取60s后】。在倒計時期間禁止用戶繼續(xù)發(fā)送驗證碼，待倒計時結(jié)束之后才可以再次發(fā)送驗證碼。這個可以避免重復(fù)發(fā)送請求獲取多個驗證碼信息（但是只有最后一次才是有效的），你也不知道自己發(fā)送了幾次請求，當(dāng)手機(jī)接收到驗證碼之后容易誤以為是正確的驗證碼。所以做適當(dāng)?shù)目刂剖欠浅Ｓ斜匾模瑫r也可以防止惡意發(fā)送請求消耗服務(wù)器資源。

HTML構(gòu)建

為了方便這里我們用ElementUI來實現(xiàn)，在el-form-item中利用el-button按鈕來實現(xiàn)驗證碼發(fā)送。發(fā)送驗證碼之后直接在el-button上修改現(xiàn)實中在HTML中的【發(fā)送驗證碼】內(nèi)容，利用disabled屬性來控制el-button的是否可以點擊。

重新獲取倒計時

定義一個retrieve()方法開啟倒計時功能，利用setInterval計時器每隔一秒鐘調(diào)用一次函數(shù)，當(dāng)?shù)褂嫊r結(jié)束時通過clearInterval()來關(guān)閉計時器。這里我們需要做的是刷新時間和重定義el-button中的HTML內(nèi)容，disable是用來控制el-button按鈕是否可點擊的屬性。注意：disabled屬性別用this.$refs.onConfirm.disbaled=true來定義，會報警告的：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "disabled"。

發(fā)送驗證碼

在發(fā)送之前我們需要對表單中的數(shù)據(jù)進(jìn)行校驗，這里為什么要嵌套兩個validateField呢（validateField支持校驗組數(shù)）？。因為validateField校驗子表單數(shù)據(jù)時每校驗一個值都會返回校驗結(jié)果，當(dāng)校驗不通過時Error返回值為校驗的提示信息，當(dāng)通過時Error的值為空，所以我們在if語句中用(！Error）表示校驗通過。那么這就存在一個問題如果校驗數(shù)組的話就會進(jìn)行多次校驗，也就會發(fā)送多次驗證請求。（點一次請求卻收到多條驗證碼這顯然是不合理的！）

總結(jié)：

這里主要的就是retrieve()方法的定義和動態(tài)改變HTML內(nèi)容，可以利用Vue提供的$ref來快速的定位DOM元素實現(xiàn)屬性的修改。以上內(nèi)容是小編給大家分享的【Vue實戰(zhàn)088：簡單的驗證碼倒計時功能實現(xiàn)】，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。更多Vue實戰(zhàn)技巧可以參考以下專欄：

為了方便學(xué)習(xí)，下面附上本文用到的源碼：