苹果CMS用户登录页面模板开发表单与JS验证教程

一、登录模板基础路径

苹果CMS前台用户登录页面拥有独立模板文件，自定义登录界面可直接编辑对应目录文件，无需改动程序核心代码。

模板文件路径：html/user/login.html

二、完整登录模板代码

以下为适配苹果CMS v10版本的用户登录模板，包含账号密码输入、系统验证码自适应、回车登录、前端表单校验、AJAX异步提交与状态反馈功能。验证码模块跟随后台登录验证码配置自动显示或隐藏。

<!-- 用户登录表单 -->
<form method="post" action="" id="fm">
    <h4>账户信息</h4>
    <div class="group">
        <label>账号</label>
        <input type="text" id="user_name" name="user_name" placeholder="请输入您的登录账号">
    </div>
    <div class="group">
        <label>密码</label>
        <input type="password" id="user_pwd" name="user_pwd" placeholder="请输入您的登录密码">
    </div>
    <!-- 后台开启验证码则显示验证模块 -->
    {if condition="$GLOBALS['config']['user']['login_verify'] eq 1"}
    <div class="group">
        <label>验证码</label>
        <input type="text" id="verify" name="verify" placeholder="请输入验证码">
        <img id="verify_img" src="{:url('verify/index')}" onClick="this.src=this.src+'?'" alt="单击刷新"/>
    </div>
    {/if}
    <input type="button" id="btn_submit" value="立即登录">
</form>

<!-- 登录交互JS脚本 -->
<script type="text/javascript">
$(function(){
    // 回车触发登录
    $("body").bind('keyup',function(event) {
        if(event.keyCode==13){ $('#btnLogin').click(); }
    });
    // 登录提交验证与AJAX请求
    $('#btn_submit').click(function() {
        if ($('#user_name').val() == '') { alert('请输入用户！'); $("#user_name").focus(); return false; }
        if ($('#user_pwd').val() == '') { alert('请输入密码！'); $("#user_pwd").focus(); return false; }
        if ($('#verify').length> 0 && $('#verify').val() == '') { alert('请输入验证码！'); $("#verify").focus(); return false; }
        $.ajax({
            url: "{:url('user/login')}",
            type: "post",
            dataType: "json",
            data: $('#fm').serialize(),
            beforeSend: function () {
                $("#btn_submit").css("background","#fd6a6a").val("loading...");
            },
            success: function (r) {
                if(r.code==1){
                    location.href="{:url('user/index')}";
                }else{
                    alert(r.msg);
                    $('#verify_img').click();
                }
            },
            complete: function () {
                $("#btn_submit").css("background","#fa4646").val("立即登录");
            }
        });
    });
});
</script>

三、模板功能说明

表单采用异步AJAX提交方式，不会刷新页面，提升用户体验。前端完成账号、密码、验证码非空校验，拦截无效提交请求。登录成功自动跳转至用户中心，登录失败弹窗提示并自动刷新验证码，适配后台各类风控配置。