实现功能
- 验证手机号的合法性
- 请求获取验证码
- 发送短信验证码60S倒计时
- 判断验证码是否正确
- 在Page文件设置data
phone: '',
code: '',
iscode: null,
codename: '获取短信验证码',
disabled: false,
- 手机号判断以及获取验证码
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 = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/;
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: {
phone: a
},
'url': 接口地址,
success(res) {
console.log(res.data)
_this.setData({
iscode: res.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
})
}
- 提交表单信息,判断验证码是否正确
formSubmitHandle: function (e) {
var myreg = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/;
if (this.data.phone == "") {
wx.showToast({
title: '手机号不能为空',
icon: 'none',
duration: 1000
})
return false;
}
else 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 {
console.log('form表单submit:', e.detail.value);
var provinceid = getApp().provinceid;
var cityid = getApp().cityid;
var areaid = getApp().areaid;
this.setData({
ind: e.detail.value
})
wx.request({
url: 接口地址,
method: "POST",
data: {
title: this.data.ind.title,
mobile: this.data.ind.mobile,
content: this.data.ind.content,
type_name: this.data.ind.type_name,
province: provinceid,
city: cityid,
area: areaid
},
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
success: function (res) {
wx.showToast({
title: '提交成功!',
icon: 'success',
duration: 2000
})
wx.navigateBack({
delta: 1
})
},
fail: function (res) {
wx.showToast({
title: '提交失败!',
icon: 'fail',
duration: 2000
})
}
})
}
}
- html文件
<form bindsubmit="formSubmitHandle" bindreset="formReset" report-submit>
<view class="phone">
<view class="img">
<image style="height: 100%; width: 100%; " src="/images/phone.png"> </image>
</view>
<input name="mobile" type="number" value='{{phone}}' bindinput='getPhoneValue' class="center" maxlength="11" placeholder="请输入常用手机号"
placeholder-class="wen" />
</view>
<view class="line" disabled='{{disabled}}'>
<input class="center" value='{{code}}' bindinput='getCodeValue' maxlength="6" placeholder="请输入验证码" placeholder-class="wen" />
<view class='right' bindtap='getVerificationCode'>{{codename}}</view>
</view>
<button formType="submit">
提交
</button>
</form>
- CSS文件
.phone{background-color: #fff;height: 88rpx;line-height: 88rpx;padding: 0 34rpx;display: flex;flex: row;margin: 10rpx 0;}
.center{height: 88rpx;line-height: 88rpx;font-size: 30rpx;}
.line{display: flex;flex-direction: row;align-items: center;border-bottom: 1rpx solid #eee;border-top: 1rpx solid #eee; background: #fff;padding-left: 34rpx;}
.right{text-align:right;color: #2BA2DB;font-size: 30rpx;margin-right: 34rpx; border:none;}
.img{height: 88rpx;width: 88rpx;margin-right: 24rpx;}
.wen{padding: 0 34rpx;height: 88rpx;line-height: 88rpx;font-size: 30rpx;color: #999;background: #fff;}