wxml
<!-- 手机号 -->
<view class="phone-box input">
<input placeholder="手机号码:" type="number" bindinput='getPhoneValue' value='{{phone}}'/>
</view>
<!-- 验证码 -->
<view class="yzm-box input">
<input placeholder="验证码:" class="yzm" type="number" bindinput='getCodeValue' value='{{code}}'/>
<!-- 发送按钮 -->
<button class="send" bindtap='getVerificationCode' disabled='{{disabled}}'>{{codename}}</button>
</view>
</view>
<!-- 取消/绑定 -->
<view class="btn_box">
<button bindtap="bindCancel">取消</button>
<button class="bind" bindtap='save'>绑定手机号</button>
</view>
</view>
js
Page({
data: {
phone: '', //手机号
code: '', //验证码
iscode: null, //存放接口获取到的code
codename: '发送'
},
//获取input的值
getPhoneValue: function(e) {
this.setData({
phone: e.detail.value
})
},
getCodeValue: function(e) {
this.setData({
code: e.detail.value
})
},
getCode: function() {
var a = this.data.phone;
var _this = this;
var myreg = /^1[3456789]\d{9}$/;
if (this.data.phone == "") {
wx.showToast({
title: '手机号不能为空',
icon: 'none',
duration: 1000
})
return false;
} else if (!myreg.test(this.data.phone)) {
wx.showToast({
title: '请输入正确的手机号',
icon: 'none',
duration: 1000
})
return false;
} else {
wx.request({
data: {},
url: "接口",
success(res) {
console.log(res.data.data)
_this.setData({
iscode: res.data.data
})
var num = 61;
var timer = setInterval(function() {
num--;
if (num <= 0) {
clearInterval(timer);
_this.setData({
codename: '重新发送',
disabled: false
})
} else {
_this.setData({
codename: num + "s"
})
}
}, 1000)
}
})
}
},
//获取验证码
getVerificationCode() {
this.getCode();
var _this = this
_this.setData({
disabled: true
})
},
//提交表单信息
save: function() {
var myreg = /^1[3456789]\d{9}$/;
if (this.data.phone == "") {
wx.showToast({
title: '手机号不能为空',
icon: 'none',
duration: 1000
})
return false;
} else if (!myreg.test(this.data.phone)) {
wx.showToast({
title: '请输入正确的手机号',
icon: 'none',
duration: 1000
})
return false;
}
if (this.data.code == "") {
wx.showToast({
title: '验证码不能为空',
icon: 'none',
duration: 1000
})
return false;
} else if (this.data.code != this.data.iscode) {
wx.showToast({
title: '验证码错误',
icon: 'none',
duration: 1000
})
return false;
} else {
wx.setStorageSync('phone', this.data.phone);
wx.redirectTo({
url: '',
})
}
},