E企盈营销工具技术服务商 热线:4006-838-530

小程序验证向阳区E企盈小程序手机号页面及逻辑处理

前言:           常用页面以及组件模板——手机号验证以及绑定           我们获取的微信用户信息,只是存储在微信服务器的基本信息,但是在很多的应用中,我们需要绑定到用户手机号来进行更多的业务逻辑,今天就给出一个简单的页面demo。        效果图:     页面效果就是这样,接下来上代码 bindPhone.wxmlimport src="../../template/loading/index.wxml" /template is="Loading" data="{{Loading}}" /view class="bindPhoneTitle"  验证手机号/viewform bindsubmit='formSubmit'  view class="formItemPhone"    label手机号/label    input name="phone" placeholder="请输入手机号" data-id="phone"           placeholder-class='inputClass' bindinput='Input' /  /view  view class="formItemPhone"    label验证码/label    input name="code" placeholder="请输入验证码" data-id="code"           placeholder-class='inputClass' bindinput='Input' /    button class='codeBtn' wx:if="{{!isGetCode}}"            catchtap='getPhoneCode'{{btnTxt}}/button    text class='code_toast' wx:else{{countDown}}s/text  /view  button class='formBtn {{formData.phone&&formData.code?"active":""}}'          formType="submit"确定/button/form

bindPhone.wxss@import '../../template/loading/index.wxss';.bindPhoneTitle {  width: 90%;  padding: 50rpx 5% 127rpx;  font-size: 48rpx;  font-family: PingFangSC-Medium;  font-weight: 500;  color: rgba(51, 51, 51, 1);}.formItemPhone {  width: 90%;  margin: 0 5%;  padding: 0 0 20rpx;  border-bottom: 1px solid rgba(226, 228, 232, 1);  margin-bottom: 40rpx;  position: relative;}.formItemPhone label {  display: inline-block;  width: 25%;  vertical-align: middle;  margin-right: 10%;  font-size: 32rpx;  font-family: PingFangSC-Regular;  font-weight: 400开通血糖监测小程序电话:4006-838-530;  color: rgba(51, 51, 51, 1);}.formItemPhone input {  display: inline-block;  width: 65%;  vertical-align: middle;  font-size: 32rpx;  font-family: PingFangSC-Medium;  font-weight: 500;  color: rgba(51, 51, 51, 1);}.inputClass {  font-size: 32rpx;  font-family: PingFangSC-Regular;  font-weight: 400;  color: rgba(189, 199, 210, 1);}.codeBtn {  position: absolute;  right: 0;  bottom: 20rpx;  font-size: 28rpx;  font-family: PingFangSC-Regular;  font-weight: 400;  color: rgba(255, 139, 0, 1);  background: transparent;  padding: 0;  border: none;  outline: medium;  border-radius: 0;  z-index: 1000;}.codeBtn::after {  border: none;  outline: medium;  border-radius: 0;}.code_toast {  position: absolute;  right: 15rpx;  bottom: 20rpx;  font-size: 28rpx;  font-family: PingFangSC-Regular;  font-weight: 400;  color: rgba(189, 199, 210, 1);}.formBtn {  width: 90%;  height: 88rpx;  background: rgba(189, 199, 210, 1);  border-radius: 44rpx;  line-height: 88rpx;  font-size: 32rpx;  font-family: PingFangSC-Medium;  font-weight: 500;  color: rgba(255, 255, 255, 1);  border: none;  outline: medium;  margin-top: 175rpx;}.formBtn::after {  border: none;  outline: medium;  border-radius: 44rpx;}.formBtn.active {  background: rgba(255, 139, 0, 1);  color: rgba(255, 255, 255, 1);}

bindPhone.jsimport PublicFun from '../../utils/PublicFun.js';const  phoneRexp = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])d{8}$/;Page({  data: {    btnTxt: '获取验证码',    isGetCode: false,    Loading: false,    countDown: 60,    formData: {      phone: '',      code: ''    }  },  onLoad(options) {  },   formSubmit(e) {    let that = this,        formData = e.detail.value,        errMsg = '';    that.setData({      Loading: true    })    if (!formData.phone){      errMsg = '手机号不能为空!';    }    if (!formData.code){      errMsg = '验证码不能为空!';    }    if (formData.phone){      if (!phoneRexp.test(formData.phone)) {        errMsg = '手机号格式有误!';      }    }    if (errMsg){      that.setData({        Loading: false      })      PublicFun._showToast(errMsg);      return f开通假花小程序电话:4006-838-530alse    }    //连接服务器进行验证码手机号验证操作    setTimeout(()={      that.setData({        Loading: false      })    },1500)  },  getPhoneCode() {    let that = this,        formData = that.data.formData,        errMsg = '' ;    errMsg = !formData.phone ? '手机号不能为空!' :        formData.phone && !phoneRexp.test(formData.phone) ? '手机号格式有误!' :        '' ;    if (errMsg){      PublicFun._showToast(errMsg);      return false    }    that.timer();     //连接服务器进行获取验证码操作    that.setData({      isGetCode: true    })  },  timer() {//验证码倒计时    let that = this,      countDown = that.data.countDown;    let clock = setInterval(() = {      countDown--      if (countDown = 0) {        that.setData({          countDown: countDown        })      } else {        clearInterval(clock)        that.setData({          countDown: 60,          isGetCode: false,          btnTxt: '重新获取'        })      }    }, 1000)  },  Input(e) {//输入检索    let that = this,        formData = that.data.formData,        inputType = e.currentTarget.dataset.id,        inputValue = e.detail.value;    inputType === 'phone' ?         formData.phone = inputValue : formData.code = inputValue;    that.setData({      formData    })  }})

附带:PublicFun.jsfunction _showToast(title) {  wx.showToast({    icon: "none",    title: title  })}module.e开通穆勒鞋小程序电话:4006-838-530xports ={  _showToast}

Loading文件为模板文件,方便多次调用    loading.wxmltemplate name="Loading"  view class="loading_box" wx:if="{{Loading}}" style='background: {{Class==="show"?"rgba(0, 0, 0, 0)":"rgba(255, 255, 255, .7)"}};'    view class="loading_items"      view class="loading3 loading3_1"/view      view class="loading3 loading3_2"/view      view class="loading3 loading3_3"/view    /view  /view/template

loading.wxss.loading_box {  width: 100%;  height: 100%;  position: fixed;    top: 0;  bottom: 0;  z-index: 1000;}.loading_items{  text-align: center;  padding: 55% 0;}.loading_itemsview {  display: inline-block;}.loading3 {  width: 20rpx;  height: 20rpx;  background: #ff8b00;  border-radius: 50%;  margin-left: 15rpx;}.loading3_1 {  -webkit-animation: loading3 1s linear infinite alternate;  animation: loading3 1s linear infinite alternate;}.loading3_2 {  -webkit-animation: loading3 1s linear infinite alternate;  animation: loading3 1s linear infinite alternate;  animation-delay: 0.5s;}.loading3_3 {  -webkit-animation: loading3 1s linear infinite alternate;  animation: loading3 1s linear infinite alternate;  animation-delay: 1s;}@-webkit-keyframes loading3 {  0% {    transform: scale(1);  }  100% {    transform: scale(0);  }}@keyframes loading3 {  0% {    transform: scale(1);  }  100% {    transform: scale(0);  }}

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序验证向阳区E企盈小程序手机号页面及逻辑处理
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

模王系统开发

联系我们升级日志

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏