獲取手機驗證碼按鈕的效果實現

在web網頁中,使用者的一些行為,例如註冊,登入,付款,修改密碼等,都需要**通過手機驗證碼來確認其行為身份,從而保證使用者賬戶和**自身的安全.

網頁中的驗證碼一般都是採用點選獲取的方式,在實現頁面的獲取手機驗證碼按鈕時,著重需要考慮的是以下幾點:

在這裡我們主要來實現前兩項效果.

保證網頁重新整理後驗證碼倒計時不清零需要使用cookie實現,為了避免篇幅過長,內容雜亂,不做贅述.

按鈕可以用以下兩種獲取驗證碼的實現方法:

當手機號輸入格式正確時,按鈕才處於可點選狀態

按鈕一直處於可點選狀態,只是當手機號格式錯誤時,點選後會向使用者提示錯誤,不向伺服器傳送請求

這兩種方法雖然**可能不同,但是基本原理是差不多的,這裡我們就只使用第一種方法來進行說明.

一般驗證碼的頁面html結構類似如下:

<

div>
<
p >請輸入手機號:
p>
<
input 
class
="phone"
type
="number"
>
<
p>驗證碼:
p>
<
input 
type
="number"
name
=""id
="">
<
input 
type
="button"
value
="獲取驗證碼"
name
="yzm"
class
="yzm"
disabled
="disabled"
>
<
br><
br>
<
input 
type
="submit"
value
="提交"
>
div>

在輸入正確格式的手機號碼後,獲取驗證碼按鈕取消禁用狀態,可點選.

點選後按鈕再次進入禁用狀態並開始倒計時,倒計時完畢後再次進入可點選狀態.

具體實現流程還是比較簡單的.**如下:

$(document).ready(function

()$/; //
**號碼的正則匹配式
phone.keyup(
function
() 
else
})//計時函式
function
timecount()
else
}//事件處理函式
btn.on("click",function
()) })

$.ajax(, //請求錯誤時的處理函式

success: function (), //請求成功時執行的函式
});

但是只要我們掌握基本原理和實現思路,就可以很容易的實現專案要求.

希望這篇文章對你有幫助.

獲取手機驗證碼

python celery專案中的所有導包位址,都是以celery base dir為基準設定.執行celery命令時,也需要進入celery base dir目錄執行.celery base dir os.path.dirname os.path.abspath file true def sen...

vue中獲取驗證碼效果

這塊的功能非常簡單，只是挑出來做個備份，方便以後其他專案用到。用的vue的框架，所以只展示功能部分 ui是自己寫的，可以用自己的。class row inputrow for dianhua class col 2 col form label label class col 6 class for...

C 實現手機傳送驗證碼

首先先需要註冊第三方 給大家推薦乙個 互億無線，註冊了之後每個使用者可以免費傳送50條簡訊。下面以c 實現手機傳送驗證碼為例。基本思路是本地生成乙個4位數的隨機數，然後以本地的使用者名稱 密碼 隨機數拼接成乙個字串，轉換為二進位制資料，以網路流的形式傳送到 互億無線 的 上，接下來的工作 就幫你完成...