自己的水平还是有限,回头看看代码,根本没多少是自己写的,大多用的是bootstrap框架的例子! 本想着自己要把功能搞好就行,却被bootstrap的各种组件爱不释手!死活也要把界面弄的美观一点!(如果能像昨晚想的那样~~就好~~~了)。这下好了一弄就是一夜没睡!一弄就是昼夜颠倒! 关于心情和过程以后再补,因为现在真的太累了,一天一夜就在边学边做这个,根本没做别的,哎~~苦恼,现直接分析代码!

index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!\-\- 引入 Bootstrap -->
<link href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://v3.bootcss.com/assets/js/ie-emulation-modes-warning.js"></script>
<!\-\- HTML5 ShimRespond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!\-\- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
<!--\[if lt IE 9\]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <!\[endif\]-->
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<!\-\- 登陆样式 -->
<link href="css/signin.css" rel="stylesheet">
<script>
$(document).ready(function() {
$(".signin").click(function() {
$(".form-signin").fadeIn();
});
$(".joinin").click(function() {
$(".form-joinin").fadeIn();
});
});
</script>
</head>

<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">MEandNI</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="joinin"><a href="joinin.php">注册模块</a></li>
<li class="signin"><a href="loginin.php">登录模块</a></li>
<li><a href="#">发表模块</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container">
</div> <!-- /container -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js "></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js "></script>
</body>
</html>

呃~~~就加了一个表格~~~

join.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!\-\- 引入 Bootstrap -->
<link href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://v3.bootcss.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<!\-\- 登陆样式 -->
<link href="css/signin.css" rel="stylesheet">
<script>
$(document).ready(function() {
$(".startjoin").click(function(){
var div=$(".form-joinin");
div.fadeIn();
div.animate({width:'500px',opacity:'1'});
div.animate({width:'330px',opacity:'1'});
});
});
</script>
</head>

<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">MEandNI</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active joinin"><a href="#">注册模块</a></li>
<li class="signin"><a href="loginin.php">登录模块</a></li>
<li><a href="#">发表模块</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="startjoin">
<button type="button" id="loadingButton" class="btn btn-primary" autocomplete="off">点击唤出注册页面</button>
</div>
<div class="container">
<form id="defaultForm" class="form-joinin" style="display: none;" method="POST" action="checkjoin.php">
<h2 class="form-signin-heading">Join in</h2>

<div class="form-group">
<label for="username" class="sr-only">UserName</label>
<input type="text" id="username" class="form-control" placeholder="输入用户名" name="username" required >
</div>

<div class="form-group">
<label for="email" class="sr-only">Email address</label>
<input type="email" id="email" class="form-control" placeholder="输入邮箱地址" name="email" required>
</div>

<div class="form-group">
<label for="password " class="sr-only">Password</label>
<input type="password" class="form-control" id="password" placeholder="输入密码" name="password" required>
</div>


<div class="form-group">
<label for="confirmPassword" class="sr-only ">Password Again</label>
<input type="password" class="form-control" id="confirmPassword" placeholder="输 again " name="confirmPassword" required>
</div>

<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" value="agree">同意搞基。
</label>
</div>
</div>


<button id="#validateBtn" class="btn btn-primary btn-block" type="submit " onclick="checkForm">Join in</button>
</form>
<div id="checkerror">

<button type="button" class="btn btn-primary" data-toggle="button"> <?php
$err = isset($\_GET\['err'\])?$\_GET\['err'\]:"";
switch ($err) {
case '1':
echo "用户名已存在!";
break;
case '2':
echo "用户名长度应该在3-30之间!";
break;
case '3':
echo "两次密码不一致!";
break;
case '4':
echo "此邮箱已被注册!";
break;
case '5':
echo "注册成功!";
break;

default:
echo "你看看这里";
break;
}
?>
</button>
</div>

</div> <!-- /container -->




<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js "></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js "></script>
</body>
</html>

我都不想吐槽写的过程了!早知道表单验证就用php写的! 上验证代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<?php
$username = $_POST\['username'\];
$email = $_POST\['email'\];
$password = $_POST\['password'\];
$confirmpassword = $_POST\['confirmPassword'\];

if($password != $confirmpassword){
header("Location:joinin.php?err=3");
}
else{
if (strlen($username) < 3 || strlen($username) > 30) {
header("Location:joinin.php?err=2");
}
else{
$host = 'localhost';
$db_user = 'root';
$db_pass = '4688128yang#@!';

$conn = mysql\_connect($host, $db\_user, $db_pass);

if(! $conn){
die("数据库连接失败:".mysql_error());
}
mysql\_select\_db("meandni");

$sql_name = "SELECT UserName FROM users WHERE username = '$username'";
$sql_email = "SELECT UserName FROM users WHERE email = '$email'";

$result\_name = mysql\_query($sql\_name) OR die("<br>ERROE:".mysql\_error().'语块:'.$sql_name);
$result\_email = mysql\_query($sql\_email) OR die("<br>ERROE:".mysql\_error().'语块:'.$sql_email);

if(mysql\_num\_rows($result_name)){
header("Location:joinin.php?err=1");
}else if (mysql\_num\_rows($result_email)) {
header("Location:joinin.php?err=4");
}else{
$sql_insert ="insert into users set UserName = '$username', email = '$email', password = '$password'";
mysql\_query($sql\_insert) OR die("<br>ERROE:".mysql\_error().'语块'.$sql\_insert);
mysql_close();
header("Location:joinin.php?err=5");
}
}

}

?>

好了、登陆模块和发表模块以后加吧!