摘要：之前单独分享了登陆插件、注册插件，今天这篇将把登陆、注册合二为一。除了兼容之前的独立插件外，还提供Tab切换的版本，同时也是支持系统默认登陆页、注册页的。并且还新增了前端校验，强烈建议使用这款插件......

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

前面我们已经分别实现了Ajax版登陆插件、Ajax版注册插件，唯一的小遗憾是没有将二者进行合二为一。那么今天，艺灵将为看官带来合二为一版，同时支持系统默认的登陆页、注册页。看官兴奋了吗？还等什么，赶紧来学习一下吧！在开始今天的讲解前，强烈建议看官先阅读1月17号的文章→→《Ajax版快捷登录插件（戳我访问）》。这篇文章中会延续之前的风格，比如：继续使用第三方UI库-layui，使用$is_ajax来识别ajax，使用$return_json来返回我们需要的ajax结果给前端展示等。

1、效果演示

登陆注册二合一插件最终的效果见下方视频演示↓↓↓。（提示：0~22秒演示的二合一版，24~39秒演示的是二合一Tab切换版，43~1:04演示的系统默认登录页，最后演示的是系统默认注册页。）（友情提示：点击上面的图片即可播放视频）

2、安装插件

2.1、插件目录

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

    
e
    
--class
    
----connect.php /* 系统文件，有修改 */
    
--config
    
----config.php /* 系统文件，有修改 */
    
--member
    
----class
    
------member_registerfun.php /* 系统文件，有修改 */
    
------member_actfun.php /* 系统文件，有修改 */
    
------member_loginfun.php /* 系统文件，有修改 */
    
skin
    
--layui /* 新增第三方UI库 */
    
--ylsj
    
----css
    
------register.css /* 新增文件，修改注册样式 */
    
------login.css /* 新增文件，修改登录样式 */
    
------loginAndRegisterTab.css /* 新增文件 */
    
----js
    
------ajaxRegister.js /* 新增文件，此次有修改 */
    
------ajaxLogin.js /* 新增文件，此次有修改 */
    
------ajaxLoginAndRegister.js /* 新增文件 */
    
------ajaxLoginAndRegisterTab.js /* 新增文件 */
    
----ajax-login.html /* 新增文件，此次有修改 */
    
----ajax-register.html /* 新增文件，弹窗时实际上打开的是这个页面 */
    
----ajax-loginAndRegisterTab.html  /* 新增文件 */
    

2.1.1、替换e目录下的系统文件

如果看官在之前曾下载过本站的独立版登陆插件或注册插件的话，这一步可跳过。没有下载过的话，请先做好数据备份工作！然后把解压文件中的e文件夹直接复制到自己本地网站的根目录中进行替换即可。一共是5个系统文件，再次建议替换前做好备份工作！

2.1.2、粘贴skin模板文件到本地

注意了，上面黄色高亮的为此次新增的内容，其余的全为之前内容。然后ajaxRegister.js、ajaxLogin.js、ajax-login.html这三个文件有修改。这里建议看官以本次最新的skin为准，直接复制skin目录粘贴到本地网站根目录。正常情况下不会出现文件冲突，若出现冲突，看官可参照1月17号的文章→→《Ajax版快捷登录（戳我访问）》进行解决，此处不再赘述。

3、改模板，只需3行代码

此插件继承前面的风格，同样提供弹窗版和系统默认页面版，下面分开来说。看官可根据自己需求来应用到自己的网站中，喜欢的可以打赏下艺灵哦！

3.1、弹窗版

弹窗版我又分为两种，一种是保留原来的登陆插件、注册插件，一种是用一个新的页面替换。

3.1.1、原来的登陆页和注册页合二为一

复制下面3行代码，进入帝国CMS后台，找到JS调用登陆状态模板，在第一个</form>的后面粘贴即可。如图：

    
<strong class="button__ajaxLoginAndRegister">登录注册二合一</strong>
    
<script src="/skin/layui/layui.js"></script>
    
<script src="/skin/ylsj/js/ajaxLoginAndRegister.js"></script>
    

3.1.2、Tab切换版的合二为一

复制下面3行代码，进入帝国CMS后台，找到JS调用登陆状态模板，在第一个</form>的后面粘贴即可。如图：

    
<strong class="button__ajaxLoginAndRegisterTab">登录注册二合一(Tab版)</strong>
    
<script src="/skin/layui/layui.js"></script>
    
<script src="/skin/ylsj/js/ajaxLoginAndRegisterTab.js"></script>
    

那这两种有什么区别呢？

功能上没区别，只在界面展示上有区别！3.1.1这种使用原来下载的登陆插件和注册插件就能使用，而3.1.2则是此次新增的一个名为ajax-loginAndRegisterTab.html的页面。见动态gif图：也可以看文章开头的视频对比区别。

3.2、让系统默认登陆页、注册页也支持ajax

3.2.1、修改系统默认登陆页

登录帝国CMS后台，接着点模板-动态页面模板管理-会员基本页面-会员登录页面。然后在右侧模板底部的</table>下面粘贴2行js代码，并给默认的“登 录”按钮添加 id="ajaxLogin_default"即可。操作如图：

    
<input type="submit" name="Submit" value=" 登 录 "  id="ajaxLogin_default" />
    
<script src="/skin/layui/layui.js"></script>
    
<script src="/skin/ylsj/js/ajaxLoginAndRegisterTab.js"></script>
    

此时刷新登陆页面，点击“登 录”会发现新增了前端校验哦！注意此时并没有发送请求，只有当所有字段填写完毕时才会发送请求哈。如图：

3.2.2、修改系统默认注册页

登录帝国CMS后台，接着点模板-动态页面模板管理-会员基本页面-会员注册页面。然后在右侧模板底部的</table>下面粘贴2行js代码，并给默认的“马上注册”按钮添加 id="ajaxRegister_default"即可。操作如图：

    
<input type='submit' name='Submit' value='马上注册'  id="ajaxRegister_default" />
    
<script src="/skin/layui/layui.js"></script>
    
<script src="/skin/ylsj/js/ajaxLoginAndRegisterTab.js"></script>
    

此时刷新注册页面，点击“马上注册”会出现toast提示，这是前端添加的校验。如图：

好了，今天的插件可以完全替换前面的登陆插件和注册插件，在弹窗版上也提供了两种版本，是不是很强大呀！当然了，积分的话也是前两者之和，150积分，有需要的看官可以进行下载。

4、积分下载插件

资源下载→→帝国CMS7.5-Ajax版登陆注册二合一插件.zip 下载需要150积分，慎重点击！

5、最后

目前为止，我们已经制作了6个插件，分别是：
帝国CMS7.5 Ajax版登录插件
帝国CMS7.5 Ajax版注册插件
帝国CMS7.5 Ajax版找回密码插件
帝国CMS7.5 Ajax版重发帐号激活插件
帝国CMS7.5 Ajax版密码安全修改插件
帝国CMS7.5 Ajax版登陆注册二合一插件
下一篇会介绍在不修改e目录下系统文件的情况下，制作一个Ajax版的登录插件，敬请期待哦~

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2021-01-31/EmpireCMS75-ajax-loginAndRegister.html

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