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

前面我们已经分别实现了Ajax版登陆插件、Ajax版注册插件，唯一的小遗憾是没有将二者进行合二为一。那么今天，艺灵将为看官带来合二为一版，同时支持系统默认的登陆页、注册页。看官兴奋了吗？还等什么，赶紧来学习一下吧！比如：继续使用第三方UI库-layui，使用$is_ajax来识别ajax，使用$return_json来返回我们需要的ajax结果给前端展示等。

1、效果演示

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

（友情提示：点击上面的图片即可播放视频）

2、安装插件

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. ------member_loginfun.php /* 系统文件，有修改 */
11. skin
12. --layui /* 新增第三方UI库 */
13. --ylsj
14. ----css
15. ------register.css /* 新增文件，修改注册样式 */
16. ------login.css /* 新增文件，修改登录样式 */
17. ------loginAndRegisterTab.css /* 新增文件 */
18. ----js
19. ------ajaxRegister.js /* 新增文件，此次有修改 */
20. ------ajaxLogin.js /* 新增文件，此次有修改 */
21. ------ajaxLoginAndRegister.js /* 新增文件 */
22. ------ajaxLoginAndRegisterTab.js /* 新增文件 */
23. ----ajax-login.html /* 新增文件，此次有修改 */
24. ----ajax-register.html /* 新增文件，弹窗时实际上打开的是这个页面 */
25. ----ajax-loginAndRegisterTab.html /* 新增文件 */

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

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

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

注意了，上面黄色高亮的为此次新增的内容，其余的全为之前内容。然后ajaxRegister.js、ajaxLogin.js、ajax-login.html这三个文件有修改。这里建议看官以本次最新的skin为准，直接复制skin目录粘贴到本地网站根目录。正常情况下不会出现文件冲突，若出现冲突，进行解决，此处不再赘述。

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

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

3.1、弹窗版

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

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

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

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

3.1.2、Tab切换版的合二为一

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

1. <strong class="button__ajaxLoginAndRegisterTab">登录注册二合一(Tab版)</strong>
2. <script src="/skin/layui/layui.js"></script>
3. <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"即可。操作如图：

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

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

3.2.2、修改系统默认注册页

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

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

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