艺灵设计

全部文章
×

帝国CMS7.5二次开发之使用Ajax实现快捷注册并检测密码强弱度

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2021-01-23 22:56:39 - 阅: - 评:0 - 积分:0

摘要:上周分享了帝国CMS7.5Ajax版快捷登录插件,今天继续分享注册版的。花了一天时间,终于整理完了。修改注册的话会改动4个系统文件,然后前端继续做了优化。用户在输入时就进行提示,比如密码为纯数字时提示弱,密码中带字母和下划线时会提示强......

说明:本插件为帝国CMS7.5简体UTF-8版,非升级程序。从本站下载的插件无后门,但不保证转手后的安全性。检测插件安全性也很简单,直接拿帝国CMS官方的与下载的源码进行对比即可。

上一篇我们实现了《Ajax版快捷登录(戳我访问)》,今天我们继续来改造注册功能。在开始今天的讲解前,强烈建议看官先阅读上一篇内容。这篇文章中会延续上一篇的风格,比如:继续使用第三方UI库-layui,使用$is_ajax来识别ajax,使用$return_json来返回我们需要的ajax结果给前端展示等。

1、效果演示

插件最终的效果见下方视频,有兴趣的看官可以在看完视频后动手练习下。如图:(0~36秒演示的弹窗注册,38秒之后演示的是系统默认注册)帝国CMS7.5Ajax版注册插件视频封面(友情提示:点击上面的图片即可播放视频)

2、手把手带你实现Ajax版快捷注册

2.1、插件目录

完整源码在文章末尾,解压文件后目录结构见下方所示。

  1. e
  2. --class
  3. ----connect.php /* 系统文件,有修改 */
  4. --config
  5. ----config.php /* 系统文件,有修改 */
  6. --member
  7. ----class
  8. ------member_registerfun.php /* 系统文件,有修改 */
  9. ------member_actfun.php /* 系统文件,有修改 */
  10. skin
  11. --layui /* 新增第三方UI库 */
  12. --ylsj
  13. ----css
  14. ------register.css /* 新增文件,修改注册样式*/
  15. ----js
  16. ------ajaxRegister.js /* 新增文件,负责弹窗、表单校验、ajax提交等操作 */
  17. ----ajax-register.html /* 新增文件,弹窗时实际上打开的是这个页面 */

2.2、修改e目录下的系统文件

接下来就是把解压文件中的e文件夹直接复制到自己本地网站的根目录中进行替换,强烈建议看官在修改或替换前做好数据备份工作!

  1. /e/config/config.php
  2. /e/member/class/member_registerfun.php
  3. /e/member/class/member_actfun.php
  4. /e/class/connect.php

此次修改注册会影响上面提到的4个文件,已经做好备份的小伙伴可以继续往下看了,下面来逐个修改。

2.2.1、关闭会员组跳转功能

帝国默认的注册功能会走选择会员组这一步,如果看官不需要这一步的话就需要修改config.php这个文件。打开文件后搜索changeregisterurl,大概在54行,然后删除右侧双引号""中的代码即可。

  1. $ecms_config['member']['changeregisterurl']="ChangeRegister.php";
  1. $ecms_config['member']['changeregisterurl']=""; /* 关闭注册时选择会员组 20210123*/

上述代码改动如图:config.php中的第54行处有修改修改后,再点击注册按钮时会直接跳转到注册页面,不会再出现选择会员组页面了。如图:修改之前↓↓↓帝国CMS默认注册时会跳转到会员组选择页面
修改之后↓↓↓修改后再点击注册时会跳过会员组选择

2.2.2、修改注册函数register

接下来修改member_registerfun.php这个文件,修改的地方比较多,修改的函数有9个,具体如下。

  1. register /* 用户注册 */
  2. CheckMemberGroupCanReg /* 验证会员组是否可注册 */
  3. eCheckIpRegTime /* 验证注册时间 */
  4. eCheckTimeCloseDo /* 验证时间段允许操作 */
  5. eCheckAccessDoIp /* 验证提交IP */
  6. CheckCanPostUrl /* 验证提交来源 */
  7. ecmsCheckShowKey /* 检查验证码 */
  8. toCheckCloseWord /* 验证用户名保留字符(后台可设置,如禁止注册admin等) */
  9. SendActUserEmail /* 发送激活帐号邮件(需要在后台配置才能使用!) */

除了第一个register用户注册函数外,剩余8个都需要传递一个名为$is_ajax的变量进去,主要是为了在相关函数中根据条件进行输出对应的内容。比如:

  1. eCheckTimeCloseDo('reg', $is_ajax); /* 验证时间段允许操作 */
  2. eCheckAccessDoIp('register', $is_ajax); /* 验证IP */
  3. CheckCanPostUrl($is_ajax); /* 验证来源 */
  4. ......

代码改动如图:修改注册函数register等相关的一系列函数.png修改注册函数register等相关的一系列函数

2.2.3、修改发送激活帐号邮件的函数SendActUserEmail

member_registerfun.php中通过跟踪SendActUserEmail函数会跳转到member_actfun.php这个文件,原来这个函数是用来给用户发送一封激活邮件的。我们要做的改动就是在158行新增一个if条件判断,如果代码走ajax的话就输出$return_json,否则就走默认的错误信息页。改动如图:修改member_actfun.php文件中的发送激活邮件函数.png修改member_actfun.php文件中的发送激活邮件函数

2.2.4、修改connect.php文件

通过2.1.2这一步的代码定位,有一些函数要在connect.php这个文件中进行修改。比如:
CheckCanPostUrl
eCheckAccessDoIp
eCheckTimeCloseDo
toCheckCloseWord
ecmsCheckShowKey
部分改动如图:connect.php文件中有5个函数要修改.pngconnect.php文件中有5个函数要修改

系统文件修改完毕后,接下来就好搞多了,无非是修改后台中对应的模板页面。我们先把skin整个目录粘贴到看官本地网站根目录,正常情况下不会出现文件冲突。若出现冲突,看官可参照上一篇的文章→→《Ajax版快捷登录(戳我访问)》进行解决,此处不再赘述。

2.3、插件的调用

在插件调用方面,艺灵提供了两种模式。分别是:弹窗注册系统默认注册,两种模式各有优缺点,详见下方表格。

优缺点对比
模式优点缺点
弹窗注册1、精简表单字段
2、配合三方UI库,错误提示更加友好。比如:密码强弱、前端校验
3、单文件好管理,不需要去后台更新
4、任意页面可实现弹窗调用,无需把代码写到每个页面中
1、需要引入三方UI库,增加文件体积。大概就几百kb吧,影响不大
2、为了用户体验,不得不写大量的代码。包括界面美化、功能优化。
默认注册页帝国自带的表单注册,页面改动最小1、字段太多,对于非必填字段没必要展示
2、前端没有了表单校验,只有后端校验

通过上方的对比,看官可以根据实际情况选择使用哪种模式,下面来具体说下如何调用。

2.3.1、弹窗的方式

一共就3行代码,非常简单。如果看官不想在页面上添加一个新按钮“ajax注册”的话,可以在页面上给需要有弹窗功能的元素添加一个名为button__ajaxRegister的类名即可。

  1. <strong class="button__ajaxRegister">ajax注册</strong>
  2. <script src="/skin/layui/layui.js"></script>
  3. <script src="/skin/ylsj/js/ajaxLogin.js"></script>

为了演示效果,此处仍以全局登录模板为例。具体的步骤是:进入后台-模板-公共模板-JS调用登陆模板。注意粘贴的位置,是第一个</form>的后面粘贴上面3行代码。如图:在帝国CMS后台修改JS调用登陆模板

这个时候直接刷新前台页面是看不到变化的,因为帝国的模板需要手动更新才行。如图:在帝国CMS后台点击数据更新此时再打开首页即可看到刚才添加的代码已经生效了,然后点击那个新增的“ajax注册”即可弹出快捷登录窗口。动态gif如图:Ajax版快捷注册效果演示

2.3.2、默认注册页的方式

如果看官不想使用弹窗的方式,没关系,系统默认的注册页此时也是支持的。我们只需要复制前面的2行js代码到后台粘贴并给“马上注册”按钮添加一个 id="ajaxRegister_default"即可,具体步骤如下:进入后台-模板-动态页面模板管理-会员基本页面-会员注册页面。操作如图:在帝国CMS后台修改会员注册页面修改完后同样要进行数据更新,然后再点前台的注册可看到ajax生效了。动态gif演示如下图:默认的注册页也支持ajax了

需要注意的是,前面提到的button__ajaxRegister id="ajaxRegister_default"不建议修改,除非你在修改后把/skin/ylsj/js/ajaxRegister.js文件中对应的代码也进行修改,否则会出现代码无效的情况!

3、积分下载插件

资源下载→→帝国CMS7.5-Ajax版快捷注册插件.zip 下载需要100积分,慎重点击!

4、最后

登录和注册已经搞定,下一篇会继续干取回密码,敬请期待哦!

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/jquery/2021-01-23/EmpireCMS75-ajax-register.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: 帝国CMS7.5 网站管理系统 EmpireCMS ajax注册插件 正则表达式 jquery layui 用户体验 表单校验 php开发 二次开发

上一篇: 帝国CMS7.5二次开发之使用Ajax实现快捷登录,提升用户体验   下一篇: 返回列表

评论区