layui-简单的登录注册界面

傷城~ 2022-04-18 05:38 517阅读 0赞

1.  `<!DOCTYPE html>`
2.  `<html lang="en">`
3.  `<head>`
4.  `<meta charset="UTF-8">`
5.  `<meta name="renderer" content="webkit">`
6.  `<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">`
7.  `<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">`
8.  `<title>注册页</title>`
9.  `<link rel="stylesheet" href="../frame/layui/css/layui.css">`
10. `<link rel="stylesheet" href="../frame/static/css/style.css">`
11. `<link rel="icon" href="../frame/static/image/code.png">`
12. `</head>`
13. `<body>`
14.  
15. `<div class="login-main">`
16. `<header class="layui-elip" style="width: 82%">注册页</header>`
17.  
18. ``
19. `<form class="layui-form">`
20. `<div class="layui-input-inline">`
21. ``
22. `<div class="layui-inline" style="width: 85%">`
23. `<input type="text" id="user" name="account" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">`
24. `</div>`
25. ``
26. `<div class="layui-inline">`
27. `<i class="layui-icon" id="ri" style="color: green;font-weight: bolder;" hidden></i>`
28. `</div>`
29. ``
30. `<div class="layui-inline">`
31. `<i class="layui-icon" id="wr" style="color: red; font-weight: bolder;" hidden>ဆ</i>`
32. `</div>`
33. `</div>`
34. ``
35. `<div class="layui-input-inline">`
36. `<div class="layui-inline" style="width: 85%">`
37. `<input type="password" id="pwd" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">`
38. `</div>`
39. ``
40. `<div class="layui-inline">`
41. `<i class="layui-icon" id="pri" style="color: green;font-weight: bolder;" hidden></i>`
42. `</div>`
43. ``
44. `<div class="layui-inline">`
45. `<i class="layui-icon" id="pwr" style="color: red; font-weight: bolder;" hidden>ဆ</i>`
46. `</div>`
47. `</div>`
48. ``
49. `<div class="layui-input-inline">`
50. `<div class="layui-inline" style="width: 85%">`
51. `<input type="password" id="rpwd" name="repassword" required lay-verify="required" placeholder="请确认密码" autocomplete="off" class="layui-input">`
52. `</div>`
53. ``
54. `<div class="layui-inline">`
55. `<i class="layui-icon" id="rpri" style="color: green;font-weight: bolder;" hidden></i>`
56. `</div>`
57. ``
58. `<div class="layui-inline">`
59. `<i class="layui-icon" id="rpwr" style="color: red; font-weight: bolder;" hidden>ဆ</i>`
60. `</div>`
61. `</div>`
62.  
63.  
64. `<div class="layui-input-inline login-btn" style="width: 85%">`
65. `<button type="submit" lay-submit lay-filter="sub" class="layui-btn">注册</button>`
66. `</div>`
67. `<hr style="width: 85%" />`
68. `<p style="width: 85%"><a href="login.html" class="fl">已有账号？立即登录</a><a href="javascript:;" class="fr">忘记密码？</a></p>`
69. `</form>`
70. `</div>`
71.  
72.  
73. `<script src="../frame/layui/layui.js"></script>`
74. `<script type="text/javascript">`
75. `layui.use(['form','jquery','layer'], function () {`
76. `var form = layui.form;`
77. `var $ = layui.jquery;`
78. `var layer = layui.layer;`
79. `//添加表单失焦事件`
80. `//验证表单`
81. `$('#user').blur(function() {`
82. `var user = $(this).val();`
83.  
84. `//alert(user);`
85. `$.ajax({`
86. `url:'checkUser.php',`
87. `type:'post',`
88. `dataType:'text',`
89. `data:{user:user},`
90. `//验证用户名是否可用`
91. `success:function(data){`
92. `if (data == 1) {`
93. `$('#ri').removeAttr('hidden');`
94. `$('#wr').attr('hidden','hidden');`
95.  
96.  
97. `} else {`
98. `$('#wr').removeAttr('hidden');`
99. `$('#ri').attr('hidden','hidden');`
100. `layer.msg('当前用户名已被占用! ')`
101.  
102. `}`
103.  
104. `}`
105. `})`
106.  
107. `});`
108.  
109. `// you code ...`
110. `// 为密码添加正则验证`
111. `$('#pwd').blur(function() {`
112. `var reg = /^[\w]{6,12}$/;`
113. `if(!($('#pwd').val().match(reg))){`
114. `//layer.msg('请输入合法密码');`
115. `$('#pwr').removeAttr('hidden');`
116. `$('#pri').attr('hidden','hidden');`
117. `layer.msg('请输入合法密码');`
118. `}else {`
119. `$('#pri').removeAttr('hidden');`
120. `$('#pwr').attr('hidden','hidden');`
121. `}`
122. `});`
123.  
124. `//验证两次密码是否一致`
125. `$('#rpwd').blur(function() {`
126. `if($('#pwd').val() != $('#rpwd').val()){`
127. `$('#rpwr').removeAttr('hidden');`
128. `$('#rpri').attr('hidden','hidden');`
129. `layer.msg('两次输入密码不一致!');`
130. `}else {`
131. `$('#rpri').removeAttr('hidden');`
132. `$('#rpwr').attr('hidden','hidden');`
133. `};`
134. `});`
135.  
136. `//`
137. `//添加表单监听事件,提交注册信息`
138. `form.on('submit(sub)', function() {`
139. `$.ajax({`
140. `url:'reg.php',`
141. `type:'post',`
142. `dataType:'text',`
143. `data:{`
144. `user:$('#user').val(),`
145. `pwd:$('#pwd').val(),`
146. `},`
147. `success:function(data){`
148. `if (data == 1) {`
149. `layer.msg('注册成功');`
150. `///location.href = "login.html";`
151. `}else {`
152. `layer.msg('注册失败');`
153. `}`
154. `}`
155. `})`
156. `//防止页面跳转`
157. `return false;`
158. `});`
159.  
160. `});`
161. `</script>`
162. `</body>`
163. `</html>`

reg.php源代码:

1.  `<?php`
2.   
3.  `#接收表单注册数据`
4.  `$user = $_POST['user'];`
5.  `$pwd = $_POST['pwd'];`
6.   
7.  `#连接数据库`
8.  `$db = new mysqli('localhost','root','','0104test');`
9.   
10. `#设置查询数据格式`
11. `$db->query("SET NAMES UTF8");`
12.  
13. `#编辑sql语句`
14. `$sql = "insert into t_user values (null,\"$user\",\"$pwd\",\"php小白\")";`
15.  
16. `#执行sql 语句`
17. `$result = $db->query($sql);`
18.  
19. `#判断是否注册成功并返回数据`
20. `if ($result) {`
21. `echo "1";`
22. `}else{`
23. `echo "0";`
24. `}`
25.  
26. `?>`

checkUser.php源代码:

1.  `<?php`
2.   
3.  `//接收表单数据`
4.  `$user = $_POST['user'];`
5.   
6.  `//数据库连接语句, 参数包含:服务器地址,用户名,登录密码,数据库名称,默认端口)`
7.  `$db = new mysqli('localhost','root','','0104test','3306');`
8.  `//判断是否成功连接数据库`
9.  `if (mysqli_connect_error()) {`
10. `echo '0';`
11. `exit();`
12. `}`
13. `//设置数据库查询数据编码格式 (相当重要) 如果不设置从数据库查出来的数据就是乱码`
14. `$db->query("SET NAMES UTF8");`
15. `//查询语句`
16. `$sql = "select * from t_user WHERE uname = \"$user\"";`
17. `//echo $sql;`
18.  
19. `//执行查询语句`
20. `$result = $db->query($sql);`
21.  
22. `//执行 fetch_assoc()函数`
23. `$na = $result->fetch_assoc();`
24. `//判断用户名是否存在`
25. `if ($na == null){`
26. `echo'1';`
27. `}else{`
28. `echo '0';`
29. `}`
30. `?>`

1.  `<!DOCTYPE html>`
2.  `<html lang="en">`
3.  `<head>`
4.  `<meta charset="UTF-8">`
5.   
6.  `<title>登录页</title>`
7.  `<link rel="stylesheet" href="../layui/css/layui.css">`
8.  `<link rel="stylesheet" href="../frame/static/css/style.css">`
9.   
10. `</head>`
11. `<body>`
12.  
13. `<div class="login-main">`
14. `<header class="layui-elip">登录</header>`
15. `<form class="layui-form">`
16. `<div class="layui-input-inline">`
17. `<input type="text" name="account" required lay-verify="required" placeholder="用户名" autocomplete="off"`
18. `class="layui-input">`
19. `</div>`
20. `<div class="layui-input-inline">`
21. `<input type="password" name="password" required lay-verify="required" placeholder="密码" autocomplete="off"`
22. `class="layui-input">`
23. `</div>`
24. `<div class="layui-input-inline login-btn">`
25. `<button lay-submit lay-filter="login" class="layui-btn">登录</button>`
26. `</div>`
27. `<hr/>`
28. ``
34. `<p><a href="register.html" class="fl">立即注册</a><a href="javascript:;" class="fr">忘记密码？</a></p>`
35. `</form>`
36. `</div>`
37.  
38.  
39. `<script src="../layui/layui.js"></script>`
40. `<script type="text/javascript">`
41. `layui.use(['form','layer','jquery'], function () {`
42.  
43. `// 操作对象`
44. `var form = layui.form;`
45. `var $ = layui.jquery;`
46. `form.on('submit(login)',function (data) {`
47. `// console.log(data.field);`
48. `$.ajax({`
49. `url:'login.php',`
50. `data:data.field,`
51. `dataType:'text',`
52. `type:'post',`
53. `success:function (data) {`
54. `if (data == '1'){`
55. `location.href = "../index.php";`
56. `}else{`
57. `layer.msg('登录名或密码错误');`
58. `}`
59. `}`
60. `})`
61. `return false;`
62. `})`
63.  
64. `});`
65. `</script>`
66. `</body>`
67. `</html>`

1.  `<?php`
2.  `session_start();`
3.  `//获取post的数据`
4.  `$account = $_POST['account'];`
5.  `$pwd = $_POST['password'];`
6.  `//连接数据库`
7.  `$db = new mysqli('localhost','root','','0104test');`
8.  `$db->query("SET NAMES UTF8");`
9.  `$sql = "select * from t_user where uname = \"{$account}\"";`
10.  
11. `$result = $db->query($sql);`
12. `$user = $result->fetch_row();`
13.  
14.  
15. `if(!empty($user)&&$pwd == $user[2]){`
16. `$_SESSION['user'] = $account;`
17. `echo '1';`
18. `}else{`
19. `echo '0';`
20. `}`

主页面index.php源代码:

1.  `<?php`
2.  `session_start();`
3.  `if(empty($_SESSION['user'])){`
4.  `header('Location:demo/login.html');`
5.  `}?>`
6.  `<!DOCTYPE html>`
7.  `<html lang="en">`
8.  `<head>`
9.  `<meta charset="UTF-8">`
10. `<meta name="renderer" content="webkit">`
11. `<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">`
12. `<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">`
13. `<title>首页 · 后台模板 HTML</title>`
14. `<link rel="stylesheet" href="./frame/layui/css/layui.css">`
15. `<link rel="stylesheet" href="./frame/static/css/style.css">`
16. `<link rel="icon" href="./frame/static/image/code.png">`
17. `</head>`
18. `<body>`
19.  
20. ``
21. `<div class="layui-layout layui-layout-admin"> `
22. ``
23. `<div class="layui-header my-header">`
24. `<a href="index.html">`
25. ``
26. `<div class="my-header-logo">后台模板 HTML</div>`
27. `</a>`
28. `<div class="my-header-btn">`
29. `<button class="layui-btn layui-btn-small btn-nav"><i class="layui-icon"></i></button>`
30. `</div>`
31.  
32. ``
33. `<ul class="layui-nav" lay-filter="side-top-left">`
34. ``
42. `</ul>`
43.  
44. ``
45. `<ul class="layui-nav my-header-user-nav" lay-filter="side-top-right">`
46. `<li class="layui-nav-item"><a href="javascript:;" class="pay" href-url="">支持作者</a></li>`
47. `<li class="layui-nav-item">`
48. `<a class="name" href="javascript:;"><i class="layui-icon"></i>主题</a>`
49. `<dl class="layui-nav-child">`
50. `<dd data-skin="0"><a href="javascript:;">默认</a></dd>`
51. `<dd data-skin="1"><a href="javascript:;">纯白</a></dd>`
52. `<dd data-skin="2"><a href="javascript:;">蓝白</a></dd>`
53. `</dl>`
54. `</li>`
55. `<li class="layui-nav-item">`
56. `<a class="name" href="javascript:;"><img src="./frame/static/image/code.png" alt="logo"> <?php echo $_SESSION['user'] ?> </a>`
57. `<dl class="layui-nav-child">`
58. `<dd><a href="javascript:;" href-url="demo/login.html"><i class="layui-icon"></i>登录页</a></dd>`
59. `<dd><a href="javascript:;" href-url="demo/map.html"><i class="layui-icon"></i>图表</a></dd>`
60. `<dd><a href="demo/logout.php"><i class="layui-icon">ဆ</i>退出</a></dd>`
61. `</dl>`
62. `</li>`
63. `</ul>`
64.  
65. `</div>`
66. ``
67. `<div class="layui-side my-side">`
68. `<div class="layui-side-scroll">`
69. ``
70. `<ul class="layui-nav layui-nav-tree" lay-filter="side-main">`
71. `<li class="layui-nav-item"> `
72. `<a href="javascript:;"><i class="layui-icon"></i>基础</a>`
73. `<dl class="layui-nav-child">`
74. `<dd><a href="javascript:;" href-url="pages/btn.html"><i class="layui-icon"></i>按钮</a></dd>`
75. `<dd><a href="javascript:;" href-url="pages/form.html"><i class="layui-icon"></i>表单</a></dd>`
76. `<dd><a href="javascript:;" href-url="pages/table.html"><i class="layui-icon"></i>表格</a></dd>`
77. `<dd><a href="javascript:;" href-url="pages/tab-card.html"><i class="layui-icon"></i>选项卡</a></dd>`
78. `<dd><a href="javascript:;" href-url="pages/progress-bar.html"><i class="layui-icon"></i>进度条</a></dd>`
79. `<dd><a href="javascript:;" href-url="pages/folding-panel.html"><i class="layui-icon"></i>折叠面板</a></dd>`
80. `<dd><a href="javascript:;" href-url="pages/auxiliar.html"><i class="layui-icon"></i>辅助元素</a></dd>`
81. `</dl>`
82. `</li>`
83. `<li class="layui-nav-item layui-nav-itemed"> `
84. `<a href="javascript:;"><i class="layui-icon"></i>扩展</a>`
85. `<dl class="layui-nav-child">`
86. `<dd><a href="javascript:;" href-url="pages/login.html"><i class="layui-icon"></i>登录页</a></dd>`
87. `<dd><a href="javascript:;" href-url="pages/register.html"><i class="layui-icon"></i>注册页</a></dd>`
88. `<dd><a href="javascript:;" href-url="pages/login2.html"><i class="layui-icon"></i>登录页2</a></dd>`
89. `<dd><a href="javascript:;" href-url="pages/map.html"><i class="layui-icon"></i>图表</a></dd>`
90. `<dd><a href="javascript:;" href-url="pages/add-edit.html"><i class="layui-icon"></i>添加-修改</a></dd>`
91. `<dd><a href="javascript:;" href-url="pages/data-table.html"><i class="layui-icon"></i>data-table 表格页</a></dd>`
92. `<dd><a href="javascript:;" href-url="pages/tree-table.html"><i class="layui-icon"></i>Tree table树表格页</a></dd>`
93. `<dd><a href="javascript:;" href-url="pages/404.html"><i class="layui-icon"></i>404页</a></dd>`
94. `<dd><a href="javascript:;" href-url="pages/tips.html"><i class="layui-icon"></i>提示页</a></dd>`
95. `</dl>`
96. `</li>`
97. `<li class="layui-nav-item"><a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=ad6ba602ae228be2222ddb804086e0cfa42da3d74e34b383b665c2bec1adfc6e"><i class="layui-icon"></i>加入群下载源码</a></li>`
98. `</ul>`
99.  
100. `</div>`
101. `</div>`
102. ``
103. `<div class="layui-body my-body">`
104. `<div class="layui-tab layui-tab-card my-tab" lay-filter="card" lay-allowClose="true">`
105. `<ul class="layui-tab-title">`
106. `<li class="layui-this" lay-id="1"><span><i class="layui-icon"></i>欢迎页</span></li>`
107. `</ul>`
108. `<div class="layui-tab-content">`
109. `<div class="layui-tab-item layui-show">`
110. `<iframe id="iframe" src="demo/welcome.html" frameborder="0"></iframe>`
111. `</div>`
112. `</div>`
113. `</div>`
114. `</div>`
115. ``
116. `<div class="layui-footer my-footer">`
117. `<p><a href="http://vip-admin.com" target="_blank">vip-admin后台模板v1.8.0</a> & <a href="http://vip-admin.com/index/gather/index.html" target="_blank">vip-admin管理系统v1.2.0</a></p>`
118. `<p>2017 © copyright 蜀ICP备17005881号</p>`
119. `</div>`
120. `</div>`
121.  
122. ``
123. `<div class="my-pay-box none">`
124. `<div><img src="./frame/static/image/zfb.png" alt="支付宝"><p>支付宝</p></div>`
125. `<div><img src="./frame/static/image/wx.png" alt="微信"><p>微信</p></div>`
126. `</div>`
127.  
128. ``
129. `<div class="my-dblclick-box none">`
130. `<table class="layui-tab dblclick-tab">`
131. `<tr class="card-refresh">`
132. `<td><i class="layui-icon">ဂ</i>刷新当前标签</td>`
133. `</tr>`
134. `<tr class="card-close">`
135. `<td><i class="layui-icon">ဆ</i>关闭当前标签</td>`
136. `</tr>`
137. `<tr class="card-close-all">`
138. `<td><i class="layui-icon">ဆ</i>关闭所有标签</td>`
139. `</tr>`
140. `</table>`
141. `</div>`
142.  
143. `<script type="text/javascript" src="frame/layui/layui.js"></script>`
144. `<script type="text/javascript" src="./frame/static/js/vip_comm.js"></script>`
145. `<script type="text/javascript">`
146. `layui.use(['layer','vip_nav'], function () {`
147.  
148. `// 操作对象`
149. `var layer = layui.layer`
150. `,vipNav = layui.vip_nav`
151. `,$ = layui.jquery;`
152.  
153. `// 顶部左侧菜单生成 [请求地址,过滤ID,是否展开,携带参数]`
154. `vipNav.top_left('./json/nav_top_left.json','side-top-left',false);`
155. `// 主体菜单生成 [请求地址,过滤ID,是否展开,携带参数]`
156. `vipNav.main('./json/nav_main.json','side-main',true);`
157.  
158. `// you code ...`
159.  
160.  
161. `});`
162. `</script>`
163. `</body>`
164. `</html>`

退出页logout.php 源代码:

1.  `<?php`
2.  `#启动session`
3.  `session_start();`
4.   
5.  `#清除session`
6.  `unset($_SESSION["user"]);`
7.   
8.  `#重定向`
9.  `header("location:login.html");`
10. `?>　`

实现效果如图:

![20180614174126671][]

[20180614174126671]: /images/20220418/4352c699efbf49a9ac0cf70128cb2b32.png