小程序 获取短信验证码 功能实现

实现功能

• 验证手机号的合法性
• 请求获取验证码
• 发送短信验证码60S倒计时
• 判断验证码是否正确

1. 在Page文件设置data

// 获取验证码
        phone: '',//手机号
        code: '',//验证码
        iscode: null,//用于存放验证码接口里获取到的code
        codename: '获取短信验证码',
        disabled: false, //按钮是否禁用

2. 手机号判断以及获取验证码

//获取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 = /^(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
        })
    }

3. 提交表单信息，判断验证码是否正确

       //提交表单信息
    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;
            // console.log('form表单submit：', e.detail.formId);
            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
                    })
                }
            })
        }
    }

4. 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>

5. 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;}