苹果CMS V10密码找回双模式模板开发教程

一、密码找回模块整体介绍

苹果CMS V10用户中心内置两套独立的密码找回逻辑，分别对应不同验证方式，覆盖不同账号找回场景。整套功能由两个核心模板文件承载，无需改动程序内核，仅通过前端模板即可完成页面样式与交互定制。

两套找回模板分工明确：密保问题找回适用于提前设置安全问题的账号，验证码找回适用于绑定邮箱、手机号的账号，分步式验证保障账号重置安全。

二、密保问题找回密码（findpass.html）

1、模板文件路径

html/user/findpass.html

该模板依托用户预设的密保问答完成身份校验，搭配图形验证码二次验证，输入新密码并确认后，即可完成账号密码重置。

2、表单核心字段说明

• user_name：用户登录账号，用于匹配目标账号

• user_question：账号预设的密保问题

• user_answer：密保问题对应答案，用于身份核验

• user_pwd：全新登录密码

• user_pwd2：二次确认新密码，防止输入失误

• verify：图形验证码，拦截恶意提交请求

3、完整表单布局代码

<form method="post" action="">
    <h4>预留问题找回密码</h4>
    <div class="reg-group">
        <label class="bd-r">账号</label>
        <input type="text" name="user_name" placeholder="请输入您的登录账号">
    </div>
    <div class="reg-group">
        <label>找回问题</label>
        <input type="text" name="user_question" placeholder="请输入您密码找回问题">
    </div>
    <div class="reg-group">
        <label>找回答案</label>
        <input type="text" name="user_answer" placeholder="请输入您的密码找回答案">
    </div>
    <div class="reg-group">
        <label>新的密码</label>
        <input type="password" name="user_pwd" placeholder="请输入您的新密码">
    </div>
    <div class="reg-group">
        <label>确认密码</label>
        <input type="password" name="user_pwd2" placeholder="请输入您的确认密码">
    </div>
    <div class="reg-group">
        <label>验证码</label>
        <input type="text" class="reg-control w150" name="verify" placeholder="请输入验证码">
        <img class="fr mr10 mt10" src="{:url('verify/index')}" onClick="this.src=this.src+'?'" alt="单击刷新"/>
    </div>
    <input type="button" class="btn-brand btn-sub" value="立即找回">
</form>

4、AJAX提交交互代码

表单通过异步请求对接系统密码找回接口，无需页面刷新即可完成校验与重置，成功后自动跳转用户中心，失败弹窗提示错误原因。请求接口地址：{:url('user/findpass')}

$.ajax({
    url: "{:url('user/findpass')}",
    type: "post",
    dataType: "json",
    data: $('#fm').serialize(),
    success: function (r) {
        if(r.code==1){
            location.href="{:url('user/index')}";
        }else{
            alert(r.msg);
        }
    }
});

三、绑定信息验证码找回密码（findpass_msg.html）

1、模板文件路径

html/user/findpass_msg.html

该模板采用两步式验证逻辑，支持邮箱、手机号等绑定信息找回，先发送验证码核验身份，再提交新密码完成重置，适配主流账号找回场景。

2、动态参数说明

• ac：密码找回验证类型，区分邮箱、手机等核验方式

• ac_text：验证类型前台展示名称，动态适配页面文案

• to：用户绑定的手机号或邮箱地址

• verify：页面图形验证码

• code：接收的短信或邮件验证码

3、第一步：获取验证码表单

<form method="post" action="">
    <input type="hidden" name="ac" value="{$param['ac']}">
    <h4>{$param['ac_text']}找回密码</h4>
    <div class="reg-group">
        <label class="bd-r" style="letter-spacing: normal;">{$param['ac_text']}</label>
        <input type="text" name="to" class="reg-control" placeholder="请输入您绑定的{$param['ac_text']}">
    </div>
    <div class="reg-group">
        <label>验证码</label>
        <input type="text" class="reg-control w150" name="verify" placeholder="请输入验证码">
        <img class="fr mr10 mt10" src="{:url('verify/index')}" onClick="this.src=this.src+'?'" alt="单击刷新"/>
    </div>
    <input type="button" class="btn-brand btn-sub" value="发送验证码">
</form>

验证码发送请求接口：{:url('user/findpass_msg')}

4、第二步：验证码核验与密码重置表单

<form method="post" action="">
    <input type="hidden" name="ac" value="email">
    <h4>验证信息</h4>
    <div class="reg-group">
        <label class="bd-r">验证码</label>
        <input type="text" name="code" class="reg-control" placeholder="请输入验证码">
    </div>
    <div class="reg-group">
        <label>新密码</label>
        <input type="password" name="user_pwd" class="reg-control w150" placeholder="请输入新密码">
    </div>
    <div class="reg-group">
        <label>确认密码</label>
        <input type="password" name="user_pwd2" class="reg-control w150" placeholder="请输入确认密码">
    </div>
    <input type="button" class="btn-brand btn-sub" value="重置密码">
</form>

密码重置提交接口：{:url('user/findpass_reset')}

四、模板修改核心注意事项

• 修改模板前备份 findpass.html 与 findpass_msg.html 原始文件，避免功能损坏无法恢复。

• 禁止随意修改表单 name 属性值，字段名称与后台接收逻辑绑定，改动会导致数据提交失效。

• 前端JS选择器需与表单、按钮ID严格对应，避免出现点击无响应、提交不触发的问题。

• 系统内置URL接口地址不可随意修改，需保持接口与页面功能一一对应。

• 验证码刷新逻辑固定，依靠地址追加参数实现刷新，无需自定义修改刷新机制。

• 密码重置属于账号核心安全功能，需保留验证码校验机制，同时做好请求频率防护。

五、功能总结

苹果CMS V10密码找回功能由两套独立模板组成，密保问答模板适合无绑定手机邮箱的老账号找回，验证码模板适配现代化账号安全校验场景。仅修改页面样式可直接调整CSS布局，若需改动找回流程，需同步适配表单字段、前端AJAX请求与后台接口逻辑，保证功能完整可用。