• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
<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>

 

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;
}

 

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 () {
  
  }
})

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap