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>![這裡寫圖片描述](https://img-blog.csdn.net/20170728132842011?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MzAwOTY5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
    </div>
</div>

看到的效果：（可以直接複製貼上滴）

1.

2.

引入：
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' => '登入成功'];
    }

完工！