1、后台开启短信验证码登录,下图两项需要同时开启

image.png

2、将以下Form代码放在 login.html或者任意页面都行

<form action="" class="form-horizontal form" method="post" name="myform" id="myform2">
    {dr_form_hidden()}
    <div class="form-body">


        <div class="form-group " id="dr_row_phone">
            <label class="col-md-2 control-label">手机号</label>
            <div class="col-md-9">
                <label><input type="text" class="form-control input-large" name="data[phone]" id="dr_phone"></label>
            </div>
        </div>

        <div class="form-group" id="dr_row_sms">
            <label class="col-md-2 control-label">短信验证</label>
            <div class="col-md-9">
                <div class="input-group input-large">
                    <input class="form-control placeholder-no-fix" type="text" autocomplete="off" id="dr_sms" name="sms">
                    <div class="input-group-btn">
                        <button class="btn blue" onclick="dr_ajax_url('/index.php?s=member&c=api&m=login_code&id='+$('#dr_phone').val())" type="button">获取手机验证码</button>
                    </div>
                </div>
            </div>
        </div>

        {if $ci->member_cache['login']['code']}
        <div class="form-group" id="dr_row_code">
            <label class="col-md-2 control-label">验证码</label>
            <div class="col-md-9">
                <div class="input-group input-large">
                    <input class="form-control placeholder-no-fix" type="text" autocomplete="off" id="dr_code" name="code">
                    <div class="input-group-btn fc-code">
                        {dr_code(120, 35)}
                    </div>
                </div>
            </div>
        </div>
        {/if}
        <div class="form-actions" style="margin-top:30px">
            <label class="col-md-2 control-label"></label>
            <div class="col-md-9" style="padding-left:5px;">
                <label><button type="button" class="btn red" onclick="dr_ajax_member('/index.php?s=member&c=login&m=sms', 'myform2');"> 登录</button></label>
                <label class="rememberme mt-checkbox mt-checkbox-outline">
                    <input type="checkbox" name="remember" value="1"> 记住登录
                    <span></span>
                </label>
            </div>
        </div>
    </div>
</form>


3、预览界面如下

image.png


熟悉前端的开发者可以继续完善本表单,比如验证码倒计时等

文档最后更新时间:2018-08-26 22:00:59