小程序登录/注册页面设计的实现代码


Posted in Javascript onMay 24, 2019

界面设计

页面引用了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 <= 0) {
    clearInterval(interval)
    that.setData({
     time: '重新发送',
     currentTime:61,
     disabled: false  
    })
   }
  }, 1000) 
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
js只执行1次的函数示例
Jul 20 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
深入浅析AngularJs模版与v-bind
Jul 06 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 #Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 #Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 #Javascript
JS实现判断数组是否包含某个元素示例
May 24 #Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 #Javascript
jQuery中使用validate插件校验表单功能
May 24 #jQuery
echarts多条折线图动态分层的实现方法
May 24 #Javascript
You might like
PHP session 会话处理函数
2016/06/06 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
[03:48]大碗DOTA
2019/07/25 DOTA
python 不关闭控制台的实现方法
2011/10/23 Python
Python的函数嵌套的使用方法
2014/01/24 Python
python定时器(Timer)用法简单实例
2015/06/04 Python
python实现的简单FTP上传下载文件实例
2015/06/30 Python
八大排序算法的Python实现
2021/01/28 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
教师师德演讲稿
2014/05/06 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS