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

在这里插入图片描述
记录一下写项目时常用的小东西

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

})
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值