手机验证码登录，账号登录结合

本项目基于腾讯外包框架（wei框架）
地址：https://github.com/twinh/wei/tree/master/docs/zh-CN#wei

HTML页面：
【基于bootstrap前端框架】

头部：

<ul id="js-reset-tabs" class="nav tab-underline border-bottom">            <li class="active border-primary"><a class="text-active-primary" href="#tab-mobile" data-toggle="tab">账号登录</a></li>            <li class="border-primary"><a class="text-active-primary" href="#tab-email" data-toggle="tab">手机登录</a></li>        </ul>

下方两个div模块：

<div class="tab-content">    <div class="tab-pane fade in active" id="tab-user">        <form class="form" method="post" id="reset-password-form-by-user" action="<?= $url('users/login') ?>">            <div class="form-group">                <label for="email">                    帐号                </label>                <input name="username" type="text" value="<?= $e->attr($req['username']) ?>" class="form-control"                       placeholder="用户名/邮箱" required/>            </div>            <div class="form-group">                <label for="password">                    密码                </label>                <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码"                       data-rule-required="true">            </div>            <?php if (wei()->setting('user.enableLoginCaptcha')) : ?>                <div class="form-group">                    <label for="captcha">                        验证码                    </label>                    <div class="input-group">                        <input type="text" class="form-control" id="captcha" name="captcha" placeholder="请输入验证码"                               data-rule-required="true">                        <span class="input-group-addon p-a-0">              <img class="js-captcha" src="<?= $url('captcha') ?>">            </span>                    </div>                </div>            <?php endif ?>            <div class="form-group">                <div class="error-message text-danger text-center">                    <?= $e($req['message']) ?>                </div>            </div>            <div class="form-group">                <div class="text-primary">                    <a href="<?= $url('registration/forget') ?>">忘记密码</a>                    <a style="float:right;" href="<?= $url('registration/editInsurance') ?>">食品安全责任险</a>                </div>            </div>            <div class="clearfix form-group m-t-md" style="margin-top: 1%!important;">                <button type="submit" class="btn btn-primary btn-block">账号登录</button>                <div id="phone-prompt" align="center" class="phone-prompt" style="color: red;width:100%;font-size:1em!important;" > 为了您更好的使用体验，请在电脑端登录:su1010.cn</div>                <?php if ($setting('admin.enableRegister')) : ?>                    <div class="m-t text-center" style="margin-top: 1% !important;">                        没有账号，点击<a href="<?= $url('registration/register') ?>">注册</a>                    </div>                <?php endif ?>            </div>        </form>    </div>    <div class="tab-pane fade in" id="tab-mobile">        <form class="form" method="post" id="reset-password-form-by-mobile">            <div class="form-group">                <label for="mobile" class="control-label">                    手机号码                    <span class="text-warning">*</span>                </label>                <div class="col-control">                    <input type="tel" class="js-mobile form-control" id="mobile" name="mobile" placeholder="请输入注册手机号码">                </div>            </div>            <div class="form-group" id="get-verify-code-group">                <label for="verify-code" class="control-label">                    验证码                    <span class="text-warning">*</span>                </label>                <div class="col-control">                    <div class="input-group">                        <input type="tel" class="form-control" id="verify-code" name="verifyCode" placeholder="请输入验证码">                        <span class="input-group-btn border-left">                    <button type="button" class="js-verify-code-send text-primary btn btn-default form-link"                            id="get-verify-code">获取验证码                    </button>                </span>                    </div>                </div>            </div>            <div class="form-group">                <div class="text-primary">                    <a href="<?= $url('registration/forget') ?>">忘记密码</a>                    <a style="float:right;" href="<?= $url('registration/editInsurance') ?>">食品安全责任险</a>                </div>            </div>            <div class="clearfix form-group m-t-md" style="margin-top: 1%!important;">                <button type="submit" class="btn btn-primary btn-block">手机登录</button>                <div id="phone-prompt" align="center" class="phone-prompt" style="color: red;width:100%;font-size:1em!important;" > 为了您更好的使用体验，请在电脑端登录:su1010.cn</div>                <?php if ($setting('admin.enableRegister')) : ?>                    <div class="m-t text-center" style="margin-top: 1% !important;">                        没有账号，点击<a href="<?= $url('registration/register') ?>">注册</a>                    </div>                <?php endif ?>            </div>        </form>![这里写图片描述](http://img.blog.csdn.net/20170728132842011?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MzAwOTY5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)    </div></div>

看到的效果：（可以直接复制粘贴滴）

1.

2.

这是HTML写出来的效果了，但是！！！
肯定没有那么简单的，如果要有这两个效果，得引入bootstrap文件了！
关于bootstrap的学习：李炎恢：http://study.163.com/course/courseLearn.htm?courseId=947005#/learn/video?lessonId=1122161&courseId=947005

引入：
bootstrap.min.css
jasny-bootstrap.min.css
bootstrap.min.js
jasny-bootstrap.min.js
jquery.min.js

js部分：

以我的实际项目出发：
关键引入： ‘plugins/verify-code/js/verify-code’ 【短信接口】

提交账号登录部分（不做详解）

var $form = $('#reset-password-form-by-user');        $form.ajaxForm({            dataType: 'json',            beforeSubmit: function (arr, $form) {                return $form.valid();            },            success: function (ret) {                if (ret.code === 1) {                    window.location = ($.req('next') === '' ? $.url('admin') : $.req('next'));                } else {                    $('.error-message').html(ret.message);                    if (typeof $captcha != 'undefined') {                        $captcha.attr('src', src + '?t=' + new Date());                    }                }            }        }).validate();        $form.find('input').keyup(function (e) {            if (e.which === ENTER_KEY) {                return;            }            $('.error-message').html('');        });        <?php if (wei()->setting('user.enableLoginCaptcha')) : ?>        var $captcha = $('.js-captcha');        $captcha.click(changeCaptcha);        var src = $captcha.attr('src');        function changeCaptcha() {            $captcha.attr('src', src + '?t=' + new Date());        }        <?php endif ?>

手机登录js部分：
直接绑定放松验证码部分，进行调用模块：

      $('.js-verify-code-send').verifyCode({            url: '<?= $url->query('users/send-verify-code') ?>'        });

users下的send-verify-code模块：

/**     * 获取验证码     */    public function sendVerifyCodeAction($req)    {        if (!$req['mobile']) {            return $this->err('请输入手机号码');        }        if(!wei()->isMobileCn($req['mobile'])){            return $this->err('请输入合法的手机号码');        }        //数据库去查找这个手机号码是否存在，进行判断，值不值得去发送验证码这一环节        $user = wei()->user()->find(['mobile' => $req['mobile']]);        if (!$user) {            return $this->err('该手机号码尚未注册，请重新输入');        }        //调用短信插件verifyCode中的send方法        $ret = wei()->verifyCode->send($req['mobile']);        //返回出相应的数据        return $this->ret($ret);    }

关于整个verifyCode模块的模板：
百度云盘中显示：
完整的模板（login->users->curuser->index）
http://pan.baidu.com/s/1kUO39I3

进行判断登录页面：

public function loginByMobile(User $user)    {        $this->loadRecordData($user);        $this->session['mobile'] = $user->toArray($this->sessionFields);        $this->session['user'] = $user->toArray($this->sessionFields);        wei()->event->trigger('userLogin', [$user]);        return ['code' => 1, 'message' => '登录成功'];    }

完工！