苹果CMS开发

苹果CMS用户注册模板制作教程

2025-05-23 共人阅读

苹果CMS V10用户注册页面介绍

苹果CMS V10用户注册页面主要用于实现网站会员注册功能，用户可以通过注册页面创建网站账号。根据后台会员注册设置，还可以开启手机验证码注册、邮箱验证码注册以及图形验证码等功能。

注册页面文件：html/user/reg.html

苹果CMS V10用户注册完整示例

下面是一份较为完整的用户注册页面示例，支持账号密码注册，并根据后台配置自动显示手机或邮箱验证码以及图形验证码。

<form id="fm" method="post" action="">
    <h4>用户注册</h4>

    <div class="reg-group">
        <label>账号</label>
        <input type="text" id="user_name" name="user_name" placeholder="请输入您的登录账号">
    </div>

    <div class="reg-group">
        <label>密码</label>
        <input type="password" id="user_pwd" name="user_pwd" placeholder="请输入您的登录密码">
    </div>

    <div class="reg-group">
        <label>确认密码</label>
        <input type="password" name="user_pwd2" placeholder="请输入您的确认密码">
    </div>

    <!-- 判断后台是否开启手机注册 -->
    {if condition="$user_config.reg_phone_sms neq 0"}
    <input type="hidden" name="ac" value="phone">

    <div class="reg-group">
        <label>手机号码</label>
        <input type="text" name="to" placeholder="请输入手机号">
        <input type="button" id="btn_send_sms" class="fr mr10 mt10" value="获取验证码">
    </div>

    <div class="reg-group">
        <label>手机验证码</label>
        <input type="text" name="code" placeholder="请输入验证码">
    </div>

    <!-- 判断后台是否开启邮箱注册 -->
    {elseif condition="$user_config.reg_email_sms neq 0"}
    <input type="hidden" name="ac" value="email">

    <div class="reg-group">
        <label>邮箱地址</label>
        <input type="text" name="to" placeholder="请输入邮箱">
        <input type="button" id="btn_send_sms" class="fr mr10 mt10" value="获取验证码">
    </div>

    <div class="reg-group">
        <label>邮箱验证码</label>
        <input type="text" name="code" placeholder="请输入验证码">
    </div>
    {/if}

    <!-- 判断后台是否开启注册验证码 -->
    {if condition="$user_config.reg_verify neq 0"}
    <div class="reg-group">
        <label>验证码</label>
        <input type="text" id="verify" name="verify" placeholder="请输入验证码">
        <img id="verify_img" class="fr mr10 mt10"
             src="{:url('verify/index')}"
             onClick="this.src=this.src+'?'"
             alt="单击刷新">
    </div>
    {/if}

    <input type="button" id="btn_submit" class="btn-brand btn-sub" value="立即注册">
</form>

<script type="text/javascript">
var countdown = 60;

function settime(val) {
    if (countdown == 0) {
        val.removeAttribute("disabled");
        val.value = "获取验证码";
        countdown = 60;
        return true;
    } else {
        val.setAttribute("disabled", true);
        val.value = "重新发送(" + countdown + ")";
        countdown--;
    }

    setTimeout(function() {
        settime(val);
    }, 1000);
}

$("body").bind("keyup", function(event) {
    if (event.keyCode == 13) {
        $("#btn_submit").click();
    }
});

$("#btn_send_sms").click(function() {
    var ac = $('input[name="ac"]').val();
    var to = $('input[name="to"]').val();

    if (ac == "email") {
        var pattern = /^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/;
        var ex = pattern.test(to);

        if (!ex) {
            alert("邮箱格式不正确");
            return;
        }
    } else if (ac == "phone") {
        var pattern = /^[1][0-9]{10}$/;
        var ex = pattern.test(to);

        if (!ex) {
            alert("手机号格式不正确");
            return;
        }
    } else {
        alert("参数错误");
        return;
    }

    settime(this);

    var data = $("#fm").serialize();

    $.ajax({
        url: "{:url('user/reg_msg')}",
        type: "post",
        dataType: "json",
        data: data,
        beforeSend: function() {
            // 开启 loading
        },
        success: function(r) {
            alert(r.msg);
        },
        complete: function() {
            // 结束 loading
        }
    });
});

$("#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 && $("#verify").val() == "") {
        alert("请输入验证码！");
        $("#verify").focus();
        return false;
    }

    $.ajax({
        url: "{:url('user/reg')}",
        type: "post",
        dataType: "json",
        data: $("#fm").serialize(),
        beforeSend: function() {
            $("#btn_submit").css("background", "#fd6a6a").val("loading...");
        },
        success: function(r) {
            alert(r.msg);

            if (r.code == 1) {
                // 注册成功后的跳转
                // location.href = "{:url('user/login')}";
            } else {
                if ($("#verify_img").length) {
                    $("#verify_img").click();
                }
            }
        },
        complete: function() {
            $("#btn_submit").css("background", "#fa4646").val("立即注册");
        }
    });
});
</script>

用户注册代码说明

1、账号密码注册

注册页面通过 user_name、user_pwd 和 user_pwd2 分别提交用户名、登录密码以及确认密码，用户填写完成后提交注册请求。

2、手机验证码注册

当后台开启手机注册功能时，可以通过 $user_config.reg_phone_sms 判断是否显示手机注册相关字段。注册页面会提交 ac=phone，并通过 to 获取手机号码、code 获取短信验证码。

3、邮箱验证码注册

当后台开启邮箱注册功能时，可以通过 $user_config.reg_email_sms 判断是否显示邮箱注册字段。页面提交 ac=email，并使用 to 提交邮箱地址、code 提交邮箱验证码。

4、图形验证码

如果后台开启注册验证码功能，页面会根据 $user_config.reg_verify 显示验证码输入框。验证码图片通过 {:url('verify/index')} 调用，点击验证码图片可以重新加载验证码。

5、短信或邮箱验证码倒计时

settime() 函数用于实现验证码发送后的倒计时效果。默认倒计时为60秒，在倒计时结束之前按钮会处于禁用状态，避免用户连续请求验证码。

苹果CMS V10用户注册接口

验证码发送请求通过以下地址处理：

{:url('user/reg_msg')}

用户注册请求通过以下地址处理：

{:url('user/reg')}

注册请求和验证码请求均采用 POST 方式提交，并通过 serialize() 序列化表单数据后发送 AJAX 请求。

使用时的注意事项

  • 使用手机或邮箱注册功能前，需要先在苹果CMS后台完成对应的短信或邮件服务配置。

  • 验证码功能是否显示由后台会员注册设置决定。

  • 修改注册模板时，应保持表单字段名称与苹果CMS注册接口要求一致。

  • 如果修改了按钮 ID，需要同步修改 JavaScript 中对应的选择器。

  • 实际可用字段和功能可能因苹果CMS版本及模板改动有所不同，建议以当前程序版本为准。

总结

苹果CMS V10用户注册页面主要位于 html/user/reg.html，通过模板标签和 AJAX 请求可以实现账号注册、手机验证码注册、邮箱验证码注册以及图形验证码等功能。修改注册模板时，重点需要保持表单字段、按钮 ID、后台配置判断以及注册接口之间的对应关系。

标签：用户注册制作