小程序实现手机短信验证功能
废话不多说,直接把项目写的手机短信验证功能发出来
.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
})
},
只发了小程序写的手机短信功能,有什么问题欢迎评论留言,我会及时回复你的。