苹果CMS找回密码表单示例

发布时间：2025-04-05共13人阅读

苹果CMS V10找回密码模板介绍

苹果CMS V10用户中心提供了密码找回功能，相关页面主要用于处理用户忘记登录密码后的身份验证和密码重置。

在模板目录中，与找回密码功能相关的文件主要包括findpass.html和findpass_msg.html，分别对应预留问题找回密码以及通过绑定信息发送验证码后重置密码的功能。

findpass.html预留问题找回密码

文件路径：

html/user/findpass.html

该模板主要通过用户账号、预留问题以及预留答案验证身份，同时要求输入新密码和验证码。验证通过后，用户即可完成密码找回。

表单主要字段

  • user_name：用户登录账号。

  • user_question：用户设置的密码找回问题。

  • user_answer：密码找回问题对应的答案。

  • user_pwd：需要设置的新密码。

  • user_pwd2：再次输入新密码进行确认。

  • verify：验证码，用于进一步验证请求。

预留问题找回表单

<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>

AJAX找回密码

前端脚本通过jQuery监听提交按钮，并将表单数据提交到苹果CMS的找回密码接口：

{:url('user/findpass')}

请求成功后，如果返回的code为1，页面会跳转到用户中心；如果验证失败，则通过返回信息提示用户。

$.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);
        }
    }
});

需要注意的是，原始示例中的JavaScript使用了#btn_submit、#user_name、#user_pwd等ID进行事件绑定，而表单字段示例本身主要设置的是name属性。实际使用时，应确保HTML元素的id与JavaScript选择器保持一致，否则点击按钮可能不会触发对应的AJAX逻辑。

findpass_msg.html绑定信息找回密码

文件路径：

html/user/findpass_msg.html

与预留问题找回方式不同，findpass_msg.html主要用于通过用户绑定的信息进行身份验证。模板通常分为两个步骤：首先填写绑定信息并发送验证码，然后输入收到的验证码和新密码完成重置。

第一步：发送验证码

模板通过{$param['ac']}获取当前验证类型，通过{$param['ac_text']}显示对应的提示文字。例如绑定邮箱时，可以显示“邮箱找回密码”等内容。

  • ac：当前找回密码的验证类型。

  • ac_text：验证类型对应的显示名称。

  • to：用户绑定的邮箱或其他验证信息。

  • verify：页面验证码。

<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>

第二步：验证验证码并重置密码

用户成功获取验证码后，需要输入验证码、新密码以及确认密码。模板前端会检查两次密码是否一致，然后向user/findpass_reset提交重置请求。

<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>

findpass_msg.html AJAX流程

发送验证码时，前端将绑定信息和验证码提交至：

{:url('user/findpass_msg')}

用户输入收到的验证码后，再将相关数据提交至：

{:url('user/findpass_reset')}

整个过程可以理解为填写绑定信息 → 获取验证码 → 输入验证码 → 设置新密码 → 完成密码重置。

苹果CMS找回密码模板修改注意事项

  • 修改模板之前建议先备份原始findpass.html和findpass_msg.html文件。

  • 不要随意修改表单中的name参数，否则可能导致后台无法正常接收对应数据。

  • 修改JavaScript时，应确保按钮ID、表单ID与事件绑定选择器保持一致。

  • {:url('user/findpass')}、{:url('user/findpass_msg')}和{:url('user/findpass_reset')}属于模板调用的URL生成方式，修改时应注意保持接口对应关系。

  • 验证码图片使用{:url('verify/index')}生成，点击图片后通过追加参数刷新验证码。

  • 涉及密码重置的页面属于账户安全功能，正式网站建议同时做好验证码、频率限制以及异常请求防护。

总结

苹果CMS V10的找回密码功能主要可以通过预留问题验证和绑定信息验证码验证两种方式实现。对应模板分别为html/user/findpass.html和html/user/findpass_msg.html。

如果只是调整找回密码页面的样式，一般修改HTML结构和CSS即可；如果需要修改找回密码流程，则需要同时检查前端表单字段、JavaScript事件以及苹果CMS对应的用户控制器接口，避免出现页面显示正常但提交功能无法使用的问题。

相关标签