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

2021-08-28 07:54:10 字數 1834 閱讀 6699

前言:

常用頁面以及元件模板------手機號驗證以及繫結

效果圖:

頁面效果就是這樣,接下來上**

bindphone.wxml

驗證手機號

bindphone.wxss

@import '../../template/loading/index.wxss';

.bindphonetitle

.formitemphone

.formitemphone label

.formitemphone input

.inputclass

.codebtn

.codebtn::after

.code_toast

.formbtn

.formbtn::after

.formbtn.active

bindphone.js

import publicfun from '../../utils/publicfun.js';

const phonerexp = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]$/

page(

},onload(options) ,

formsubmit(e) )

if (!formdata.phone)

if (!formdata.code)

if (formdata.phone)

}if (errmsg))

publicfun._showtoast(errmsg);

return false

}//連線伺服器進行驗證碼手機號驗證操作

settimeout(()=>)

},1500)

},getphonecode()

that.timer();

//連線伺服器進行獲取驗證碼操作

that.setdata()

},timer() )

} else )

}}, 1000)

},input(e) )

}})

附帶:

publicfun.js

function _showtoast(title) )

}module.exports =

loading檔案為模板檔案,方便多次呼叫

loading.wxml

loading.wxss

.loading_box 

.loading_items

.loading_items>view

.loading3

.loading3_1

.loading3_2

.loading3_3

@-webkit-keyframes loading3

100%

}@keyframes loading3

100%

}

小程式驗證碼頁面

輸入驗證碼 已向 傳送驗證碼 s 後可重新獲取 重新獲取 wcss page vercodeview vercodesendview sendtime vercodeinputview vercodeinput 新驗證碼輸入框樣式 page code input content wrap input...

小程式獲取使用者手機號

wx.login 成功 後拿到code,攜帶引數 code 傳送 post 請求到後台拿到openid和session key var that this wx.login success function res 返回成功示例 儲存返回的openid session key 二 getphonen...

微信小程式 獲取手機號解密

解密步驟 一 aes工具包 1.相關依賴 org.bouncycastle bcprov jdk16 1.46 2.工具包public static string decrypt byte key,byte iv,byte encdata throws exception二 實現類 base64de...