egg(100)--egg之注册 倒计时 发送验证码 验证验证码

model

app/model/user.js

module.exports = app => {
    const mongoose = app.mongoose;
    const Schema = mongoose.Schema;

    var d = new Date();
    const User = new Schema({
        password: { type: String },
        phone: { type: Number },
        last_ip: { type: String },
        add_time: {
            type: Number,
            default: d.getTime()
        },
        email: { type: String },
        status: {
            type: Number,
            default: d.getTime()
        }
    });

    return mongoose.model('User', User, 'user');
}

router

    router.get('/pass/sendCode', initMiddleware, controller.default.pass.sendCode);
    router.get('/pass/validatePhoneCode', initMiddleware, controller.default.pass.validatePhoneCode);

controller

app/controller/default/pass.js

    async registerStep2() {
            var sign = this.ctx.request.query.sign;
            var identify_code = this.ctx.request.query.identify_code;
            var add_day = await this.service.tools.getDay(); //年月日   
            var userTempResult = await this.ctx.model.UserTemp.find({ "sign": sign, add_day: add_day });

            if (userTempResult.length == 0) {

                this.ctx.redirect('/register/registerStep1');
            } else {
                await this.ctx.render('default/pass/register_step2.html', {
                    sign: sign,
                    phone: userTempResult[0].phone,
                    identify_code: identify_code
                });
            }
        }

    async validatePhoneCode() {

        var sign = this.ctx.request.query.sign;
        var phone_code = this.ctx.request.query.phone_code;
        var add_day = await this.service.tools.getDay(); //年月日   


        if (this.ctx.session.phone_code != phone_code) {
            this.ctx.body = {
                success: false,
                msg: '您输入的手机验证码错误'
            }
        } else {

            var userTempResult = await this.ctx.model.UserTemp.find({ "sign": sign, add_day: add_day });
            if (userTempResult.length <= 0) {
                this.ctx.body = {
                    success: false,
                    msg: '参数错误'
                }

            } else {

                //判断验证码是否超时
                var nowTime = await this.service.tools.getTime();
                if ((userTempResult[0].add_time - nowTime) / 1000 / 60 > 30) {
                    this.ctx.body = {
                        success: false,
                        msg: '验证码已经过期'
                    }
                } else {
                    //用户表有没有当前这个手机号        手机号有没有注册
                    var userResult = await this.ctx.model.User.find({ "phone": userTempResult[0].phone });
                    if (userResult.length > 0) {
                        this.ctx.body = {
                            success: false,
                            msg: '此用户已经存在'
                        }
                    } else {
                        this.ctx.body = {
                            success: true,
                            msg: '验证码输入正确',
                            sign: sign
                        }
                    }
                }
            }
        }
    }

view

app/view/default/pass/register_step2.html

                <div class="yzm">


                    <input type="hidden" id="identify_code" name="identify_code" value="<%=identify_code%>" />
                    <input type="hidden" id="phone" name="phone" value="<%=phone%>" />
                    <input type="hidden" id="sign" name="sign" value="<%=sign%>" />
                    <input type="text" id="phone_code" name="phone_code" placeholder="请输入验证码" />

                    <button id="sendCode">重新发送</button>
                </div>

                <div class="regist_submit">
                    <input class="submit" id="nextStep" type="button" name="submit" value="下一步">

                    <br>

                    <input class="return" id="returnButton" type="button" name="return" value="返回">
                </div>

                $(function() {

                    var timer = 10;

                    function Countdown() {
                        if (timer >= 1) {
                            timer -= 1;
                            $("#sendCode").attr('disabled', true);
                            $("#sendCode").html('重新发送(' + timer + ')');
                            setTimeout(function() {
                                Countdown();
                            }, 1000);
                        } else {
                            $("#sendCode").attr('disabled', false)

                            $("#sendCode").html('重新发送');
                        }
                    }

                    Countdown();


                    //重新发送验证码
                    $("#sendCode").click(function() {
                        Countdown();
                        var phone = $('#phone').val();
                        var identify_code = $('#identify_code').val();
                        $.get('/pass/sendCode', {
                            phone: phone,
                            identify_code: identify_code
                        }, function(response) {
                            console.log(response);
                            if (response.success == true) {
                                alert('发送验证码成功');
                            } else {
                                alert(response.msg);
                            }
                        })

                    })



                    //验证验证码


                    $("#nextStep").click(function(e) {

                        var sign = $('#sign').val();
                        var phone_code = $('#phone_code').val();


                        $.get('/pass/validatePhoneCode', {
                            sign: sign,
                            phone_code: phone_code
                        }, function(response) {

                            console.log(response);

                            if (response.success == true) {
                                location.href = "/register/registerStep3?sign=" + response.sign;
                            } else {
                                alert(response.msg);
                            }
                        })

                    })

                })

效果