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

界面設計

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

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

實現(xiàn)的功能

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

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

驗證函數(shù)：

用戶輸入錯誤的手機號碼時將會調用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: &＃39;請輸入正確的手機號&＃39;,
? ? ? ? ? selector: &＃39;#zan-toast-test&＃39;
? ? ? ? });
? ? ??
? ? }
? },

2.驗證圖片驗證碼（暫時為靜態(tài)數(shù)據(jù)嘻嘻）

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

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

3. 實現(xiàn)發(fā)送驗證碼60s倒計時

var interval = null //倒計時函數(shù)

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

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