小程序实现手机短信验证功能

小程序实现手机短信验证功能

废话不多说，直接把项目写的手机短信验证功能发出来

.wxml

<form bindsubmit="phone">
<input type='number' name="loginMobile" bindinput='changeSearch' placeholder='请输入新的手机号' maxlength='11'></input>
     <button  class='verfiCode' bindtap="codes" disabled="{{disabled}}">{{codename}}</button>
     <button form-type="submit" class='submit'>提交</button>
</form>

.js

var api = require('../../utils/api.js');
var http = require('../../utils/httpUtil.js');
Page({
  data: {
    codename: '获取验证码',
  },
  //获取短信
 codes:function(e){
    let mobile = this.data.inputValue;
    let myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
    console.log('手机号:',this.data.inputValue)
    if (myreg.test(mobile)) {
      let vinse = {
        mobile: this.data.inputValue
      }
       let that = this
      let token = wx.getStorageSync('token');
      http.request(api.verification, vinse, 'get', '查询', token, null).then(function (res) {//请求服务器
        that.setData({
          codesin: res.data
        })
        if (res.code == '200') {
          //获取验证码成功想要等待60秒
          let num = 60
          let timer = setInterval(function () {
            num--;
            if (num <= 0) {
              clearInterval(timer);
              that.setData({
                codename: '重新发送',
                disabled: false
              })
            } else {
              that.setData({
                codename: num + 's',
                disabled: true
              })
            }
          }, 1000)
          }
      })
    }else{
      wx.showToast({
        title: '手机号有误',
        icon: 'none',
      })
    }
  },
  //获取手机号码值
  changeSearch: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
  },

只发了小程序写的手机短信功能，有什么问题欢迎评论留言，我会及时回复你的。