【小程序】微信小程序登錄/注冊頁面設計

    界面設計

    頁面引用了youzan組件進行設計,包括icon,button,tag,toast以及布局

    github地址:https://github.com/youzan/zanui-weapp

    實現的功能

    1.對用戶輸入的手機號碼進行驗證,利用正則表達式:

    var reg = /^1[3|4|5|7|8][0-9]{9}$/

    驗證函數:

    用戶輸入錯誤的手機號碼時將會調用toast組件提示用戶

    getVerificationCode: function(e){
    ? ? var reg = /^1[3|4|5|7|8][0-9]{9}$/
    ? ? var phOne= this.data.userPhone
    ? ? var flag = reg.test(phone)
    ? ? if(flag){
    ? ? ? var that = this
    ? ? ? var code
    ? ? ? this.setData({
    ? ? ? ? isValated: true
    ? ? ? })
    ? ? }
    ? ? else{
    ? ? ? ? Toast({
    ? ? ? ? ? message: '請輸入正確的手機號',
    ? ? ? ? ? selector: '#zan-toast-test'
    ? ? ? ? });
    ? ? ??
    ? ? }
    ? },

    2.驗證圖片驗證碼(暫時為靜態數據嘻嘻)

    用戶輸入正確的手機號碼后,會顯示要求用戶輸入圖片驗證碼進行驗證,驗證成功后將會下發短信驗證碼給用戶的手機

    // 圖片驗證碼驗證
    ? ValatedCode: function(){
    ? ? var code = this.data.valatedCode.toLowerCase()
    ? ? if (code == '3n3d') {
    ? ? ? this.setData({
    ? ? ? ? isValated: false
    ? ? ? })
    ? ? ? Toast({
    ? ? ? ? message: '驗證碼已發送',
    ? ? ? ? selector: '#zan-toast-test'
    ? ? ? });
    ? ? ? this.getCode()
    ? ? ? this.setData({
    ? ? ? ? disabled: true
    ? ? ? })
    ? ? }
    ? ? else {
    ? ? ? this.setData({
    ? ? ? ? isValated: false
    ? ? ? })
    ? ? ? Toast({
    ? ? ? ? message: '圖片驗證碼輸入錯誤',
    ? ? ? ? selector: '#zan-toast-test'
    ? ? ? });
    ? ? }
    ? },

    3. 實現發送驗證碼60s倒計時

    var interval = null //倒計時函數

    data: {
    ? ? fun_id:2,
    ? ? time: '獲取驗證碼', //倒計時?
    ? ? currentTime:61,
    ? ? userPhone: '',
    ? ? isValated: false,
    ? ? valatedCode: ''
    ? },?
    ? getCode: function (options){
    ? ? var that = this;
    ? ? var currentTime = that.data.currentTime
    ? ? interval = setInterval(function () {
    ? ? ? currentTime--;
    ? ? ? that.setData({
    ? ? ? ? time: '已發送('+currentTime+'s)'
    ? ? ? })
    ? ? ? if (currentTime ? ? ? ? clearInterval(interval)
    ? ? ? ? that.setData({
    ? ? ? ? ? time: '重新發送',
    ? ? ? ? ? currentTime:61,
    ? ? ? ? ? disabled: false ??
    ? ? ? ? })
    ? ? ? }
    ? ? }, 1000) ?
    ? },

    PS: 個人筆記,大神勿擾,有問題歡迎指出
    ---------------------?
    作者:zhanjinfeng?
    來源:CSDN?
    原文:https://blog.csdn.net/zhanjinfeng/article/details/81188264?
    版權聲明:本文為博主原創文章,轉載請附上博文鏈接!


    聲明:所有內容來自互聯網搜索結果,不保證100%準確性,僅供參考。如若本站內容侵犯了原著者的合法權益,可聯系我們進行處理。
    發表評論
    更多 網友評論0 條評論)
    暫無評論

    返回頂部

    主站蜘蛛池模板: 国产精品无圣光一区二区| 亚洲A∨无码一区二区三区| 久久99国产一区二区三区| 国产高清在线精品一区二区| 一级毛片完整版免费播放一区| 制服美女视频一区| 亚洲一区二区三区影院| 国产探花在线精品一区二区| 高清一区二区三区| 亚洲色欲一区二区三区在线观看| 一区二区三区无码被窝影院| 免费看AV毛片一区二区三区| 美女AV一区二区三区| 无码免费一区二区三区免费播放| 国产91精品一区二区麻豆网站| 视频精品一区二区三区| 九九无码人妻一区二区三区| 国产精品毛片VA一区二区三区| 国产一区二区三区在线免费| 亚洲AV无码一区二区大桥未久| 秋霞午夜一区二区| 精品免费久久久久国产一区 | 一区二区三区视频网站| 亚洲一区二区三区无码国产| 日韩人妻无码一区二区三区99| 久久精品无码一区二区app| 亚洲人成网站18禁止一区| 视频一区在线免费观看| 国产精品视频一区二区三区不卡| 亚洲av高清在线观看一区二区| 色一情一乱一伦一区二区三区日本| 亚洲码欧美码一区二区三区| 国产精品福利一区| 中文字幕VA一区二区三区 | 高清国产精品人妻一区二区| 中日av乱码一区二区三区乱码| 伊人色综合一区二区三区| 久久久老熟女一区二区三区| 在线免费视频一区| 鲁丝片一区二区三区免费| 在线精品视频一区二区|