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


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 浮动广告实现代码
Dec 25 Javascript
基于jquery的图片懒加载js
Jun 30 Javascript
js 火狐下取本地路径实现思路
Apr 02 Javascript
js 动态加载事件的几种方法总结
Dec 25 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
微信小程序+云开发实现欢迎登录注册
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 header示例代码(推荐)
2010/09/08 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
php学习之 数组声明
2011/06/09 PHP
JavaScript学习笔记(十)
2010/01/17 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
Vue 父子组件、组件间通信
2017/03/08 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
iView框架问题整理小结
2018/10/16 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
深入理解javascript中的this
2021/02/08 Javascript
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
python版本五子棋的实现代码
2018/12/11 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
大学本科毕业生的自我鉴定
2013/11/26 职场文书
制作部班长职位说明书
2014/02/26 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
python中的getter与setter你了解吗
2022/03/24 Python