整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
上回，上次和大家簡單的介紹了下web驗證碼實現，也說了異步刷新驗證碼的實現邏輯，不過有些小伙伴還是建議我實現下，廢話少說，上代碼：此代碼是需要依賴：sanic==19.9.0Pillow==7.0.0
登錄界面中我們經常會遇到需要校驗驗證碼才能登錄，驗證碼是由一串隨機產生的字母、數字或符號組成。目的是為了防止用戶利用機器人自動注冊、惡意登錄、刷票灌水等操作，驗證碼技術可以適當的提高服務的安全性，提升用戶體驗。常見的驗證碼有隨機字符、漢字圖片、字符圖片、算術、問答、滑塊、坐標、旋轉、滑動拼圖、文字點選、圖標點選、推理拼圖、語序點選、空間推理、短信、語音、智能無感知等驗證方式，最簡單的應該是隨機字符驗證了（安全級別最低！）。
在template模板中綁定一個動態的style樣式，利用check來改變圖標的顏色提示用戶驗證碼輸入正確，如果驗證碼錯誤則利用message彈出警示框提示。點擊驗證碼位置觸發refreshCode重新調用createCode來刷新驗證碼，handleLogin為鍵盤事件觸發登錄。
利用Math.random()隨機生成一個0-1之間的隨機double值，根據random隨機數組中的數據隨機出索引值，再通過索引值獲取到對應的隨機值。隨機的長度通過len來限制，將每次隨機出的數據追加到code中即可得到隨機的驗證碼。
這里不能通過el-form中的rules來校驗驗證碼的正確與否，因為在data中定義checkCode 無法獲取到this.createdCode值（undefined）。這里我們利用el-input的blur失去焦點事件來觸發驗證，如果你想在用戶輸入的時候就驗證可以使用input事件在Input值改變時觸發。
這里只是一個簡單的驗證邏輯，真正的應用上隨機字符基本不會被使用。因為隨機字符驗證安全性太低了，模擬操作可以很容易的通過DOM獲取到相應的驗證碼。以上內容是小編給大家分享的【Vue實戰089：最簡單的登錄驗證碼功能實現】，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。更多Vue實戰技巧可以參考以下專欄：
為了方便學習，下面附上本文用到的源碼：
是個發送驗證碼時常用的功能，當用戶點擊【發送驗證碼】之后出現【重新獲取60s后】。在倒計時期間禁止用戶繼續發送驗證碼，待倒計時結束之后才可以再次發送驗證碼。這個可以避免重復發送請求獲取多個驗證碼信息（但是只有最后一次才是有效的），你也不知道自己發送了幾次請求，當手機接收到驗證碼之后容易誤以為是正確的驗證碼。所以做適當的控制是非常有必要的，同時也可以防止惡意發送請求消耗服務器資源。
為了方便這里我們用ElementUI來實現，在el-form-item中利用el-button按鈕來實現驗證碼發送。發送驗證碼之后直接在el-button上修改現實中在HTML中的【發送驗證碼】內容，利用disabled屬性來控制el-button的是否可以點擊。
定義一個retrieve()方法開啟倒計時功能，利用setInterval計時器每隔一秒鐘調用一次函數，當倒計時結束時通過clearInterval()來關閉計時器。這里我們需要做的是刷新時間和重定義el-button中的HTML內容，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"。
在發送之前我們需要對表單中的數據進行校驗，這里為什么要嵌套兩個validateField呢（validateField支持校驗組數）？。因為validateField校驗子表單數據時每校驗一個值都會返回校驗結果，當校驗不通過時Error返回值為校驗的提示信息，當通過時Error的值為空，所以我們在if語句中用(！Error）表示校驗通過。那么這就存在一個問題如果校驗數組的話就會進行多次校驗，也就會發送多次驗證請求。（點一次請求卻收到多條驗證碼這顯然是不合理的！）
這里主要的就是retrieve()方法的定義和動態改變HTML內容，可以利用Vue提供的$ref來快速的定位DOM元素實現屬性的修改。以上內容是小編給大家分享的【Vue實戰088：簡單的驗證碼倒計時功能實現】，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。更多Vue實戰技巧可以參考以下專欄：
為了方便學習，下面附上本文用到的源碼：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
