小程式驗證碼頁面

2021-09-24 04:35:07 字數 1593 閱讀 8193

輸入驗證碼

已向 } 傳送驗證碼}}

}}}}

}s 後可重新獲取

重新獲取

wcss

page

.vercodeview

.vercodesendview

.sendtime

.vercodeinputview

.vercodeinput

/* 新驗證碼輸入框樣式 */

page .code .input-content-wrap .input-code-wrap

page .code .input-content-wrap .input-code-wrap .code_dot

page .code .input-content-wrap .input-code-wrap .code_dot:nth-child(1)

page .code .input-content-wrap .input-code-wrap .code_dot i

page .code .input-content

page .code .input-content.active

.input

.input_none

.input text

.input_none text

js

var interval = null;

page(,

/*** 生命週期函式--監聽頁面載入

*/onload: function (options) ,

//驗證碼輸入時獲取驗證碼

get_code(e) );

if (that.data.code.length == 0) );

}if (that.data.code.length == 1) );

}if (that.data.code.length == 2) );

}if (that.data.code.length == 3) );

}if (that.data.code.length == 4) )

console.log(that.data.code)

//...

}if (that.data.code.length == 5) )

console.log(that.data.code)

//...

}if (that.data.code.length == 6) )

console.log(that.data.code)

//...}},

set_focus() )

},//倒計時函式

getcode: function (options) )

if (currenttime <= 0) )

}}, 1000)

},//重新獲取驗證碼

regetcode: function ()

})

小程式驗證碼倒計時

先定義time文字,和倒計時時間 渲染在view 驗證碼獲取成功後需要倒計時,並且處於不可點選狀態,所以定義乙個函式 我一般呼叫是在請求成功,或者請求失敗以後呼叫getcode此函式,成功以後,建立var interval setinterval 讓currenttime 並且賦值給time,這樣頁...

小程式驗證手機號頁面及邏輯處理

前言 常用頁面以及元件模板 手機號驗證以及繫結 效果圖 頁面效果就是這樣,接下來上 bindphone.wxml 驗證手機號 bindphone.wxss import template loading index.wxss bindphonetitle formitemphone formitem...

微信小程式生成隨機驗證碼

wxml檔案 js檔案 data code 獲取驗證碼 getcode function this.createcode createcode var code 首先預設code為空字串 code 設定長度,這裡看需求,我這裡設定了4 var codelength 4 設定隨機字元 var rand...