小程序前端填写手机号获取验证码

记录一下写项目时常用的小东西

wxml

<view class='servicebox-item'>
  <text>手机号</text>
  <input type='number' bindinput='getPhoneNumber' value='{{phoneNumber}}' placeholder='请输入手机号' maxlength='11'></input>
  <view class="servicebox-checkcode {{isSend?'addcode':''}}" bindtap="{{isSend?'':'sendCode'}}">
    {{isSend?((secend))+'s':'发送验证码'}}
  </view>
</view>

wxss

/*数量框*/
.servicebox-item {
  width: 100%;
  color: #333;
  box-sizing: border-box;
  padding: 30rpx;
  border-bottom: 1rpx solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.servicebox-checkcode {
  width: 164rpx;
  height: 60rpx;
  border-radius: 30rpx;
  border: 1rpx solid #4aa6fb;
  color: #4aa6fb;
  font-size: 24rpx;
  text-align: center;
  line-height: 60rpx;
}
.addcode {
  border: 1rpx solid #999;
  color: #999;
}
.servicebox-item text:first-child {
  font-size: 28rpx;
  color: #333;
}
.servicebox-item input {
  height: 100%;
  font-size: 28rpx;
  color: #999;
}

js

Page({
  //获取手机号
  getPhoneNumber: function(res) {
    var that = this
    var phoneNumber = res.detail.value
    that.setData({
      phoneNumber: phoneNumber
    })
  },
  //发送验证码
  sendCode: function() {
    var that = this
    var secend = that.data.secend
    var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
    var phoneNumber = that.data.phoneNumber
    //验证手机号码
    if (!myreg.test(phoneNumber)) {
      wx.showToast({
        title: '手机号输入错误',
        icon: 'none'
      })
      that.setData({
        phoneNumber: ""
      })
      return
    }
    //验证通过
    wx.showToast({
      title: '发送成功',
    })
    that.setData({
      phoneNumber: ""
    })
    var interVal = setInterval(function() {
      secend--
      that.setData({
        secend: secend
      })
      if (secend == 0) {
        clearInterval(interVal);
        that.setData({
          secend: 60,
          isSend: false
        })
      }
    }, 1000)
    that.setData({
      isSend: true
    })
  },
  data: {
    phoneNumber: null,
    secend: 60,
    isSend: false,
  },

})