微信小程序如何获取手机验证码


Posted in Javascript onNovember 04, 2018

一种比较常见的功能获取手机验证码,供大家参考,具体内容如下

先看效果图:

微信小程序如何获取手机验证码

其实这个功能实现起来很简单,主要就是调取第三方接口,拿到返回值验证的问题

直接上代码吧:

<view class='changeInfo'>
 <view class='changeInfoName'>
   <input placeholder='请输入姓名' bindinput='getNameValue' value='{{name}}'/> 
 </view>
 
 <view class='changeInfoName'>
   <input placeholder='请输入手机号' bindinput='getPhoneValue' value='{{phone}}'/> 
 </view>
 <view class='changeInfoName'>
   <input placeholder='请输验证码' bindinput='getCodeValue' value='{[code]}' style='width:70%;'/> 
   <button class='codeBtn' bindtap='getVerificationCode' disabled='{{disabled}}' >{{codename}}</button>
 </view>
 <button class='changeBtn' bindtap='save'>保存</button>
</view>

CSS:

page{
 height: 100%;
 width: 100%;
 background: linear-gradient(#5681d7, #486ec3);
}
.changeInfo{
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 width: 90%;
 margin: 50rpx auto;
}
.changeInfoName{
 position: relative;
 height: 80rpx;
 width: 100%;
 border-radius: 10rpx;
 background: #fff;
 margin-bottom: 20rpx;
 padding-left: 20rpx;
 box-sizing: border-box;
}
.codeBtn{
 position: absolute;
 right: 0;
 top: 0;
 color: #bbb;
 width: 30%;
 font-size: 26rpx;
 height: 80rpx;
 line-height: 80rpx;
}
.changeInfoName input{
 width: 100%;
 height:100%;
}
.changeBtn{
 width: 40%;
 height: 100rpx;
 background: #fff;
 color: #000;
 border-radius: 50rpx;
 position: absolute;
 bottom: 10%;
 left: 50%;
 margin-left: -20%;
 line-height: 100rpx;
}

js: 

var app = require('../../resource/js/util.js');
Page({
 /**
  * 页面的初始数据
  */
 data: {
  name:'',//姓名
  phone:'',//手机号
  code:'',//验证码
  iscode:null,//用于存放验证码接口里获取到的code
  codename:'获取验证码'
 },
 //获取input输入框的值
 getNameValue:function(e){
  this.setData({
   name:e.detail.value
  })
 },
 getPhoneValue:function(e){
  this.setData({
   phone:e.detail.value
  })
 },
 getCodeValue: function (e) {
  this.setData({
   code: e.detail.value
  })
 },
 getCode:function(){
  var a = this.data.phone;
  var _this = this;
  var myreg = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/;
  if (this.data.phone == "") {
   wx.showToast({
    title: '手机号不能为空',
    icon: 'none',
    duration: 1000
   })
   return false;
  } else if (!myreg.test(this.data.phone)) {
   wx.showToast({
    title: '请输入正确的手机号',
    icon: 'none',
    duration: 1000
   })
   return false;
  }else{
   wx.request({
    data: {},
    'url': 接口地址,
    success(res) {
     console.log(res.data.data)
     _this.setData({
      iscode: res.data.data
     })
     var num = 61;
     var timer = setInterval(function () {
      num--;
      if (num <= 0) {
       clearInterval(timer);
       _this.setData({
        codename: '重新发送',
        disabled: false
       })
 
      } else {
       _this.setData({
        codename: num + "s"
       })
      }
     }, 1000)
    }
   })
   
  }
  
  
 },
 //获取验证码
 getVerificationCode() {
  this.getCode();
  var _this = this
  _this.setData({
   disabled: true
  })
 },
 //提交表单信息
 save:function(){
  var myreg = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/;
  if(this.data.name == ""){
   wx.showToast({
    title: '姓名不能为空',
    icon: 'none',
    duration: 1000
   })
   return false;
  }
  if(this.data.phone == ""){
   wx.showToast({
    title: '手机号不能为空',
    icon: 'none',
    duration: 1000
   })
   return false;
  }else if(!myreg.test(this.data.phone)){
   wx.showToast({
    title: '请输入正确的手机号',
    icon: 'none',
    duration: 1000
   })
   return false;
  }
  if(this.data.code == ""){
   wx.showToast({
    title: '验证码不能为空',
    icon: 'none',
    duration: 1000
   })
   return false;
  }else if(this.data.code != this.data.iscode){
   wx.showToast({
    title: '验证码错误',
    icon: 'none',
    duration: 1000
   })
   return false;
  }else{
   wx.setStorageSync('name', this.data.name);
   wx.setStorageSync('phone', this.data.phone);
   wx.redirectTo({
    url: '../add/add',
   })
  }
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  
 },
 
 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {
 
 },
 
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
 
 },
 
 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {
 
 },
 
 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {
 
 },
 
 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {
 
 },
 
 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {
 
 },
 
 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {
 
 }
})

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

Javascript 相关文章推荐
基于JQuery的抓取博客园首页RSS的代码
Dec 01 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
详解原生JS动态添加和删除类
Mar 26 Javascript
使用layui实现树形结构的方法
Sep 20 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 Javascript
微信小程序实现弹出层效果
May 26 #Javascript
微信小程序实现预览图片功能
Oct 22 #Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 #Javascript
微信小程序实现多选功能
Nov 04 #Javascript
微信小程序实现无限滚动列表
May 29 #Javascript
微信小程序自定义轮播图
Nov 04 #Javascript
微信小程序实现带缩略图轮播效果
Nov 04 #Javascript
You might like
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
JavaScript国旗变换效果代码
2008/08/13 Javascript
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
2017/01/04 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
python使用append合并两个数组的方法
2015/04/28 Python
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Python 文件处理注意事项总结
2017/04/10 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
运动会广播稿60字
2014/01/15 职场文书
中学生获奖感言
2014/02/04 职场文书
重阳节活动总结
2014/08/27 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
经典导游欢迎词
2015/01/26 职场文书
2015年幼师工作总结
2015/04/28 职场文书
超市主管竞聘书
2015/09/15 职场文书
Go语言安装并操作redis的go-redis库
2022/04/14 Golang