[toc]
php网页注册登录，以下提供一代目简陋版代码，代码十分粗糙，还有不少冗余的地方，以后随缘修改。由于是一代目的问题，人机交互并不够好，可能会有很多非预期bug。且完全没有安全防护，请不要进行恶意攻击。实际实验环境：http://47.110.54.152:1579/
index.html(登录界面):
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>登录界面</title>
<link rel="stylesheet" href="登录界面.css" />
</head>
<body>
<div class="box1">
<form action="登录界面.php" method="post">
<h1>用户登录</h1>
<div class="form">账号:
<label>
<input type="text" name="username" id="qy1" placeholder=" 请输入账号"/>
</label>
</div>
<div class="form">密码:
<label>
<input type="password" name="password" id="qy2" placeholder=" 请输入密码"/>
</label>
</div>
<br><button onclick="check()">登录</button>
<p class="p1">还没有账号？ <a href="注册界面.html" >注册账号</a></p>
</form>
<div>
<script type="text/javascript">
function check()
{
if(document.getElementById('qy1').value.length==0){
alert('用户名为空，请重新输入！');
document.getElementById('qy1').focus();
return false;
}
if(document.getElementById('qy2').value.length==0){
alert('密码为空，请重新输入！');
document.getElementById('qy2').focus();
return false;
}
}
</script>
</div>
</div>
</body>
</html>
登录界面.php：
<?php
$conn = mysqli_connect('localhost','root','password','database') or die('数据库连接失败');
$conn->query("SET NAMES 'UTF8'");
$username = $_POST['username'];
$password = $_POST['password'];
$url = "index.html";
if(empty($username))
{
header("Location:$url");
}
if(empty($password))
{
header("Location:$url");
}
$sql="SELECT * FROM user where username='{$username}' and password='{$password}'";
$result=$conn->query($sql);
$row = mysqli_num_rows($result);
if($row == 1){
echo $row['user']."登录成功!";
}
else{
echo"该账号不存在或者密码错误，请重新登录！";
}注册界面.html：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>注册界面</title>
<link rel="stylesheet" href="注册界面.css" />
</head>
<body>
<div class="box2">
<form action="注册界面.php" method="post">
<h1>用户注册</h1>
<div class="form2">账号：
<label>
<input type="text" name="username" id="qy1" placeholder="请输入账号"/>
</label>
</div>
<div class="form2">密码：
<label>
<input type="text" name="password" id="qy2" placeholder="请输入密码"/>
</label>
</div>
<div class="form2">Email：
<label>
<input type="text" name="email" id="qy3" placeholder="请输入邮箱地址"/>
</label>
</div>
<br><button onclick="check()">注册</button>
</form>
<script type="text/javascript">
function check()
{
if(document.getElementById('qy1').value.length==0){
alert('用户名为空，请重新输入！');
document.getElementById('qy1').focus()
return false;
}
if(document.getElementById('qy2').value.length==0){
alert('密码为空，请重新输入！');
document.getElementById('qy2').focus();
return false;
}
if(document.getElementById('qy3').value.length==0){
alert('邮箱为空，请重新输入！');
document.getElementById('qy3').focus();
return false;
}
}
</script>
</div>
</body>
</html>
注册界面.php：
<?php
$conn = mysqli_connect('localhost','root','password','database') or die('数据库连接失败');
$conn->set_charset('utf8');
$username = $_POST['username'];
$password = $_POST['password'];
$email = $_POST['email'];
$url = "注册界面.html";
if(empty($username))
{
header("Location:$url");
}
if(empty($password))
{
header("Location:$url");
}
if(empty($email))
{
header("Location:$url");
}
if(!preg_match("/^[a-zA-Z0-9]+$/",$username))
{
echo "用户名格式错误，仅允许出现数字和字母！ <br/><a href='注册界面.html'>重新注册</a>";
return;
}
$sql1="SELECT * FROM user where username='{$username}'";
$result1=$conn->query($sql1);
$row1 = mysqli_num_rows($result1);
if($row1 == 1)
{
echo $row1['user']."该用户已存在,请重新注册<br/><a href='注册界面.html'>重新注册</a>";
return;
}
$sql2="SELECT * FROM user where email='{$email}'";
$result2=$conn->query($sql2);
$row2 = mysqli_num_rows($result2);
if($row2 == 1)
{
echo $row2['user']."该邮箱已被注册,请重新注册<br/><a href='注册界面.html'>重新注册</a>";
return;
}
$sql = "INSERT INTO user(username,password,email)
VALUES ('{$username}' ,'{$password}','{$email}')";
mysqli_query($conn,$sql) or die(mysqli_error($conn));
echo("注册成功！！！<br/><a href='index.html'>点击登录</a>");登录界面.css：
*{
margin:auto auto;
padding: 0px;
}
body{
font-size: 20px;
color: #03e9f4;
background: url(img/background.jpg)no-repeat;
background-size: 100% 200%;
}
.box1{
width: 300px;
height: 335px;
text-align: center;
margin-top: 10%;
border: 0.1px solid rgba(0,0,0,0.3);
background-color:rgba(0,0,0,0.15);
}
h1{
margin-top: 20px;
font-size: 30px;
color: azure;
}
.box1 .form{
margin-top: 35px;
}
.box1 .form input{
outline: none;
background-color:rgba(0,0,0,0);
text-align: center;
width: 150px;
height: 30px;
font-size: 15px;
border: 0;
border-bottom: 1.5px solid #000000;
}
.box1 .form input:focus{
top: 0;
font-size: 15px;
color: #000;
}
.box1 .p1{
margin-top: 25px;
}
a{
color: #E8198B;
}
a:hover{
outline: none;
color: #00FFFF;
}
.box1 button{
outline: none;
margin-left: auto;
color: #000;
width: 70px;
height: 25px;
border: 0;
background-image: linear-gradient(to right,#0eb4dd,#0eb4dd);
}
.box1 button:hover{
outline: none;
margin-left: auto;
color: #F0FFFF;
width: 70px;
height: 25px;
border: 0;
border-radius: 20px;
background-image: linear-gradient(to right,#e8198b,#0eb4dd);
transition: all 0.5s linear;
}注册界面.css：
*{
margin: auto auto;
padding: 0;
}
body{
font-size: 20px;
color: #03e9f4;
background: url(img/background.jpg)no-repeat;
background-size: 100% 200%;
}
.box2{
width:300px;
height: 370px;
text-align: center;
margin-top: 10%;
border: 1px solid rgba(0,0,0,0.15);
background-color: rgba(0,0,0,0.15);
}
h1{
margin-top: 20px;
font-size: 30px;
color: azure;
}
.box2 .form2{
margin-top: 20px;
}
.box2 .form3{
margin-top: 10px;
outline: none;
}
.box2 .form2 input{
outline: none;
text-align: center;
width: 150px;
height: 30px;
font-size: 15px;
border: 0;
border-bottom: 1.5px solid #000000;
background-color: rgba(0,0,0,0)
}
.box2 button{
outline: none;
margin-left: auto;
color: #000;
width: 70px;
height: 25px;
border: 0;
background-image: linear-gradient(to right,#0eb4dd,#0eb4dd);
}
.box2 button:hover{
outline: none;
margin-left: auto;
color: #F0FFFF;
width: 70px;
height: 25px;
border: 0;
border-radius: 20px;
background-image: linear-gradient(to right,#e8198b,#0eb4dd);
transition: all 0.5s linear;
}