vue中獲取簡訊驗證碼

2021-09-29 16:08:21 字數 2030 閱讀 2867

使用vue + vant 寫的註冊頁面

="registerform"

>

"phone-circle-o" maxlength=

"11" v-model=

"addform.userphone" placeholder=

"請輸入手機號"

/>

<

/van-cell-group>

v-model=

"addform.code"

center

clearable

placeholder=

"請輸入簡訊驗證碼"

left-icon=

"phone-o"

maxlength=

"4">

"button" size=

"small" type=

"primary"

:disabled =

"disabledbtn" @click=

"sendcode"

>

}<

/van-button>

<

/van-field>

<

/van-cell-group>

"bag-o" type=

"password" clearable v-model=

"addform.password" placeholder=

"請輸入密碼"

/>

<

/van-cell-group>

"bag-o" type=

"password" clearable v-model=

"addform.confirmpassword" placeholder=

"請輸入確認密碼" @blur=

"confirmpassword"

/>

<

/van-cell-group>

"manager-o" clearable v-model=

"addform.referrerid" placeholder=

"請輸入推薦人id"

/>

<

/van-cell-group>

<

/div>

"warning"

class

="registerbtn" @click=

"toregister"

>註冊<

/van-button>

<

/div>

data()

, text:

'傳送驗證碼'

, timer:60,

disabledbtn:

false

, time:

null

}}

// 獲取倒計時

getsecond

(timer)},

// 傳送簡訊

async

sendcode()

$/var userphone = reg.

test

(this

.addform.userphone)

if(userphone)

=await

this

.$axios.

post(,

this

.addform)

if(res.code !==1)

return

this

.$notify()

this

.time =

setinterval((

)=>

,1000)}

},// 確認兩次輸入密碼是否一致

confirmpassword()

)}

使用定時器最好在beforedestroy裡清除一下

beforedestroy()

簡訊驗證碼

簡訊驗證碼 圍繞以下兩個方法開展 1 sendcaptcha 獲取驗證碼 2 commitcaptcha 提交驗證碼 方法 1 addtextchangedlistener 文字變化 2 requestfocus 請求焦點 3 string phone etphonenum.gettext tost...

簡訊驗證碼

你的key access key secret 你自己的key 注意 不要更改 region cn hangzhou product name dysmsapi domain dysmsapi.aliyuncs.com acs client acsclient access key id,acces...

vue中獲取驗證碼效果

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