微信小程序+tp6 发送手机验证码

前端wxml

<view class='content'>
 <form bindsubmit="formSubmit">
  <view class='phone-box'>
   <text class='phone'>手机号</text>
   <input name="phone" type='number' placeholder="请输入手机号" maxlength='11' name="phone" class='number' bindinput='lovePhone' />
  </view>
  <view class='phone-box'>
   <text class='phone'>验证码</text>
   <input name="code" placeholder="请输入验证码" class='number' placeholder-style='color:#bbb' />
   <l-button size="mini" disabled="{{status}}" bind:lintap="getCode">{{text}}</l-button>
  </view>
  <button formType="submit" class='submit'>登录</button>
 </form>
</view>

前端样式

.content {
  width: 100%;
  height: auto;
  padding: 0 50rpx;
  box-sizing: border-box;
 }
 .phone-box {
  width: 100%;
  height: 89rpx;
  border-bottom: 1rpx solid #efefef;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
 }
 .phone {
  color: #333;
  margin-right: 60rpx;
  font-size: 28rpx;
 }
 .number {
  color: #333;
  font-size: 28rpx;
  width: 200rpx;
 }
 .getNum {
  width:210rpx;
  height:48rpx;
  background:#3478F7;
  border-radius:8rpx;
  font-size:28rpx;
  font-family:PingFang-SC-Medium;
  color:rgba(255, 255, 255, 1);
  line-height:48rpx;
  margin-right:36rpx;
  text-align:center;
 }
 .submit {
  width: 480rpx;
  height: 80rpx;
  background:#3478F7;
  border-radius: 8rpx;
  margin-top: 80rpx;
  color: #fff;
  font-size: 32rpx;
 }

 

js代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    phone: '', //手机号
    code: "", //验证码
    status: false,
    time: 60,
    text: '获取验证码'
  },
  lovePhone(evt) {
    let phone = evt.detail.value;
    this.setData({
      phone: phone
    })
  },
  //发送验证码
  getCode() {
    let _this = this;
    let time = _this.data.time;
    let phone = _this.data.phone;
    //验证手机号
    if (phone.length == 0) {
      wx.showToast({
        title: '手机号不能为空',
        icon: 'none',
        duration: 1000
      })
      return false;
    }
    //验证手机格式
    if (!(/^1[34578]\d{9}$/.test(phone))) {
      wx.showToast({
        title: '手机格式错误',
        icon: "none",
        duration: 1000
      })
    }
    //发送请求
    wx.request({
      url: 'url',
      data: {
        phone: phone
      },
      method: 'POST',
      success(res) {
        let code = res.data.data;
        console.log(code);
        if (res.data.code == 200) {
          _this.setData({
            code: code
          })
          wx.showToast({
            title: '验证码发送成功',
            icon: 'success',
            duration: 1000
          })

            
           //定时器 给按钮 设置60秒倒计时
          let timer = setInterval(function () {
            time--,
            _this.setData({
              text: time + 's后可再次发送',
              status: true
            })
            if (time <= 0) {
              clearInterval(timer);
              _this.setData({
                text: '重新发送',
                time: 60,
                status: false
              })
            }
          }, 1000);
        }
      }
    })
  },

   //表单提交
  formSubmit(evt) {
    // console.log(evt);return false;
    let _this = this;
    let phone = evt.detail.value.phone;
    let code = evt.detail.value.code;
    //验证手机号
    if (phone.length == 0) {
      wx.showToast({
        title: '手机号不能为空',
        icon: 'none',
        duration: 1000
      })
      return false;
    }
    //验证手机格式
    if (!(/^1[34578]\d{9}$/.test(phone))) {
      wx.showToast({
        title: '手机格式错误',
        icon: "none",
        duration: 1000
      })
    }
    if (code == '') {
      wx.showToast({
        title: '验证码不能为空',
        icon: "none",
        duration: 1000
      })
      return false;
    }
    wx.request({
      url: 'url',
      data: {
        code: code,
        phone:phone,
      },
      method: "POST",
      success(res) {
        if(res.data.code == 200){
            wx.showToast({
              title: '登录成功',
              icon:'success',
              duration:1000
            })
          wx.switchTab({
            url: 'url',
          })
        }
      }
    })
  }
})