网站登录注册页面

一、登录页面

login.php:

<!DOCTYPE html>                                                                                                     <!--声明为html-->
<html lang="en">                                                                                                    <!--html标签-->
   <head>                                                                                                           <!--头部标签-->
        <meta charset="utf-8">                                                                                      <!--定义编码-->
        <title>用户登录界面</title>                                                                                   <!--定义标题-->
        <link rel="stylesheet" type="text/css" href="public.css"/>                                                  <!--调用css-->
        <link rel="icon" type="image/x-icon" href="ico.ico"/>                                                       <!--设置图标-->
        <?php                                                                                                       //php头
            session_start();                                                                                        //开启session控制会话
            // include "database.php";                                                                              //引用database.php
            $conn = mysqli_connect("localhost","root","root");                                                      //打开数据库
            $selet = mysqli_select_db($conn,"hacker");                                                              //连接数据库
            mysqli_query($conn,"set name 'utf-8'");                                                                 //设置表编码
            // var_dump($selet);                                                                                    //看是否连接成功
            function abc($filtration){                                                                              //过滤函数
                $filtration = trim($filtration);
                $filtration = stripcslashes($filtration);
                $filtration = htmlspecialchars($filtration);
                return $filtration;
            }
            if(!empty($_SESSION['username'])){                                                                      //防止一次登录多个账号
                echo "<script>window.location.href='list.php'</script>";
            }  
            if (isset($_POST['submit'])){                                                                          //接收按钮值
                $username = abc($_POST['username']);                                                               //接收用户名,用abc函数过滤,赋值给username
                $password = abc($_POST['password']);                                                               //接收密码,用abc函数过滤,赋值给password
                $sql = "select password from user where username = '$username'";                                   //在user表中查密码是否正确
                $huixian = mysqli_query($conn,$sql);                                                               //转换数据类型
                $aaa = mysqli_fetch_row($huixian);                                                                 //转为数组
                if(!empty($aaa) && $aaa[0] == $password){                                                          
                    $_SESSION['username'] = $username;
                    echo "<script>alert('登录成功');window.location.href='list.php'</script>";
                }else{
                    echo "<script>alert('密码错误');</script>";
                }
                // var_dump($aaa);
                // $usernameErr = "";
                // $passwordErr = "";
                // if ($username == "hacker"){
                //     if($password == "hacker"){
                //         echo "<script>alert('登录成功')</script>";
                //     }else{
                //         $passwordErr = "密码错误";
                //     }
                // }else{
                //     $usernameErr = "用户名错误";
                // }
            }
        ?>
    </head>
    <body class="container">                                                                                     <!--内容标签-->                                                        
        <form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>" method="post" autocomplete="on">                                                        <!--form表单-->
            <table>                                                                                              <!--定义表格-->
                 <tr>
                    <td class="login-wrapper">
                        <h1>登录</h1>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <label>
                            <input type="text" placeholder="用户名" name="username" value='<?php echo $username;?>'/>
                            <!-- <spen style="color:red; font-size:15px;"><?php echo $usernameErr; ?></spen>  -->
                        </label>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <label>
                            <input type="password" placeholder="密码" name="password" value='<?php echo $password;?>'/>
                            <!-- <spen style="color:red; font-size:15px;"><?php echo $passwordErr; ?></spen> -->
                        </label>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <scan class="login">
                            <input type="submit" name="submit" value="登录"/>
                        </scan>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <scan id="post">
                            没有账号?<a href="enroll.php">注册</a>
                        </scan>
                    </td>
                 </tr>
            </table>
        </form>
    </body>
</html>

二、注册页面

 enroll.php:

<!DOCTYPE html>                                                                                                  <!--声明为html-->
<html>                                                                                                           <!--html标签-->
   <head>                                                                                                        <!--头部标签-->
        <meta charset="utf-8">                                                                                   <!--定义编码-->
        <title>用户注册界面</title>                                                                                <!--定义标题-->
        <link rel="stylesheet" type="text/css" href="public.css"/>                                               <!--调用css-->
        <link rel="icon" type="image/x-icon" href="ico.ico"/>                                                    <!--设置图标-->
        <?php                                                                                                    //php头
            //include "database.php";                                                                            //引用database.php
            $conn = mysqli_connect("localhost","root","root");                                                   //打开数据库
            $selet = mysqli_select_db($conn,"hacker");                                                           //连接数据库
            mysqli_query($conn,"set name 'utf-8'");                                                              //设置表编码
            //var_dump($selet);                                                                                  //看是否连接成功
            if (isset($_POST['submit'])){                                                                        //接收注册按钮所带值
                function abc($filtration){                                                                       //过滤函数                                                                       
                    $filtration = trim($filtration);
                    $filtration = stripcslashes($filtration);
                    $filtration = htmlspecialchars($filtration);
                    return $filtration;
                }  
                $username = abc($_POST['username']);                                                             //接收用户名,用abc函数过滤,赋值给username
                $password = abc($_POST['password']);                                                             //接收密码,用abc函数过滤,赋值给password
                $Confirmpassword = abc($_POST['Confirmpassword']);                                               //接收确认密码,用abc函数过滤,赋值给Confirmpassword
                $phone = abc($_POST['phone']);                                                                   //接收手机号,用abc函数过滤,赋值给phone
                $emil = abc($_POST['emil']);                                                                     //接收邮箱,用abc函数过滤,赋值给emil
                $usernameErr = "";
                $passwordErr = "";
                $ConfirmpasswordErr = "";
                $phoneErr = "";
                $emilErr = "";
                $match = '/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,16}$/';                  //密码正则表达式
                if(!empty($username)){                                                                          //判断用户名是否为空
                    if(!preg_match("/^[a-zA-Z]*$/",$username)){                                                 //如果用户名不为空,判断用户名格式
                        $usernameErr = "名称格式错误";
                    }else  if(!empty($password)){                                                               //如果用户名格式合格,判断密码是否为空
                         if(!preg_match($match, $password)){                                                    //如果密码不为空,判断密码格式
                            $passwordErr = "密码格式错误";
                        }else  if(!empty($Confirmpassword)){                                                    //如果密码格式合格,判断确认密码是否为空
                             if($Confirmpassword == $password){                                                 //如果确认密码不为空,判断密码与确认密码是否相同
                                if(!empty($phone)){                                                             //如果密码与确认密码相同,判断手机号是否为空
                                    if(!preg_match("/^1[3456789]\d{9}$/",$phone)){                              //如果手机号不为空,判断手机号格式
                                        $phoneErr = "号码格式错误";
                                    }else  if(!empty($emil)){                                                   //如果手机号格式合格,判断邮箱是否为空
                                         if(!preg_match('/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/',$emil)){//如果邮箱不为空,判断邮箱格式
                                            $emilErr = "邮箱格式错误";
                                        }else {
                                            $usersql = "select username from user where username = '$username'"; //在user表中查是否有此名称                                          
                                            $userselect = mysqli_query($conn,$usersql);                          //对数据进行转换
                                            //var_dump($userselect);                                             //看$userselect类型
                                            $userall = mysqli_fetch_row($userselect);                            //转成数组
                                            // var_dump($userall);                                               //看$userall类型
                                            if(!empty($userall)){                                                //看数据库中是否有此数据
                                                   echo "<script>alert('用户名已存在');window.history.back(-1)</script>"; 
                                            }else{                                                               //如果无此数据则向数据库写入此数据
                                                $charu = "insert into user(username,password,phone,emil)"."values('$username','$password','$phone','$emil')";
                                                mysqli_query($conn,$charu);
                                                echo "<script>alert('注册成功');window.location.href='login.php'</script>";
                                            }
                                        }
                                    }else{
                                        $emilErr = "邮箱不能为空";
                                    }
                                }else{
                                    $phoneErr = "电话不能为空";
                                }
                            }else{$ConfirmpasswordErr = "两次密码不一致";
                            }
                        }else{
                            $ConfirmpasswordErr = "密码不能为空";
                        }
                    }else{
                        $passwordErr = "密码不能为空";
                    }
                }else{
                   $usernameErr = "名称不能为空";
                }
            }
        ?>
   </head>
    <body class="container">                                                                                     <!--内容标签-->                                                        
        <form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>" method="post" autocomplete="on">                                                        <!--form表单-->
            <table>                                                                                              <!--定义表格-->
                 <tr>
                    <td class="login-wrapper">
                        <h1>注册</h1>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <label>
                            <input type="text" name="username" placeholder="用户名" value="<?php echo $username;?>"/>
                            <spen style="color:red; font-size:15px;"><?php echo $usernameErr; ?></spen>                  
                        </label>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <label>
                            <input type="password" name="password" placeholder="密码" value="<?php echo $password;?>"/>
                            <spen style="color:red; font-size:15px;"><?php echo $passwordErr; ?></spen>
                        </label>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <label>
                            <input type="password" name="Confirmpassword" placeholder="确认密码" value="<?php echo $Confirmpassword;?>"/>
                            <spen style="color:red; font-size:15px;"><?php echo $ConfirmpasswordErr; ?></spen>
                        </label>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <label>
                            <input type="text" name="phone" placeholder="电话号码" value="<?php echo $phone;?>"/>
                            <spen style="color:red; font-size:15px;"><?php echo $phoneErr; ?></spen>
                        </label>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <label>
                            <input type="text" name="emil" placeholder="邮箱" value="<?php echo $emil;?>"/>
                            <spen style="color:red; font-size:15px;"><?php echo $emilErr; ?></spen>
                        </label>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <scan class="login">
                            <input type="submit" name="submit" value="注册"/>
                        </scan>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <scan id="post">
                           已经有账号?<a href="login.php">登录</a>
                        </scan>
                    </td>
                 </tr>
            </table>
        </form>
    </body>
</html>

三、公共css

public.css:

  /* 去掉网页空白 */ 
  *{
    margin: 0;
    padding: 0;
}
 
.container{
    height: 100%;
    /* 创建一个表示多种颜色的渐变图片 */
    background-image: linear-gradient(to right,#a3fbf9,#f89ed0);
}
 
/* 设置背景颜色 */
body{
    text-align: center;
}
 
/* 设置字体大小 */
h1{
    font-size: 45px;
}
 
a:link,a:visited{
    color: rgba(230, 28, 139, 0.35);
    /* 去除超链接下划线 */
    text-decoration: none;
}
 
a:hover{
    color: cyan;
    /* 鼠标放置出现下划线 */
    text-decoration: none;
}
 
/* 表单背景颜色 */
table{
    background-color: white;
    margin-top: 50px;
    margin-left: 440px;
    width: 480px;
    height: 600px;
    border-radius: 20px;
}
 
.login input{
    font-size: 20px;
    width: 200px;
    height: 40px;
    background-image: linear-gradient(to right,#a3fbf9,#f89ed0);
    color: #fff;
    border-radius: 20px;
}
 
input{
    outline: none;
    width: 350px;
    border-bottom: 1px solid #dbdbdb;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}
 
::placeholder{
    font-size: 14px;
}

四、用户中心页面

list.php:

<!DOCTYPE html>                                                                                                  <!--声明为html-->
<html>                                                                                                           <!--html标签-->
   <head>                                                                                                        <!--头部标签-->
        <meta charset="utf-8">                                                                                   <!--定义编码-->
        <title>个人中心</title>                                                                                   <!--定义标题-->
        <link rel="stylesheet" type="text/css" href="public.css"/>                                               <!--调用css-->
        <link rel="icon" type="image/x-icon" href="ico.ico"/>                                                    <!--设置网页图标-->
        <?php                                                                                                    //php头
            session_start();                                                                                     //开启session验证
            function abc($filtration){                                                                           //过滤函数
                $filtration = trim($filtration);
                $filtration = stripcslashes($filtration);
                $filtration = htmlspecialchars($filtration);
                return $filtration;
            }  
            if(empty($_SESSION['username'])){                                                                    //登录验证
               echo "<script>alert('您还没有登录,请先登录!!!');window.location.href='login.php'</script>";
            }else{
            //include "database.php";                                                                           //连接数据库
            $conn = mysqli_connect("localhost","root","root");                                                   //打开数据库
            $selet = mysqli_select_db($conn,"hacker");                                                           //连接数据库
            mysqli_query($conn,"set name 'utf-8'");                                                              //设置表编码 
            $username = abc($_SESSION['username']);                                                              //接收用户名并用函数过滤,然后赋值给username
            $sql = "select * from user where username = '$username'";                                            //在user表中查是否有此名称 
            $sqlzz = mysqli_query($conn,$sql);                                                                   //执行数据库语法
            $all = mysqli_fetch_row($sqlzz);                                                                     //转为数组
            if(isset($_POST['submit'])){                                                                         //接收修改的数据
                $password = abc($_POST['password']);                                                             //接收密码,用abc函数过滤,赋值给password
                $phone = abc($_POST['phone']);                                                                   //接收手机号,用abc函数过滤,赋值给phone
                $emil = abc($_POST['emil']);                                                                     //接收邮箱,用abc函数过滤,赋值给emil
                $updatesql = "update user set password='$password',phone='$phone',emil='$emil' where username='$username'";
                                                                                                                 //更新数据库
                $aa = mysqli_query($conn,$updatesql);
                //var_dump($aa);                                                                                 //看$aa类型
                echo "<script>alert('修改成功');window.history.back(-1)</script>";         
            }                                                                                                    
            if(isset($_POST['outlog'])){                                                                         //接收退出登录
                session_destroy();                                                                               //销毁session
                header("location:login.php");                                                                    //重定向到login.php
            }
            }                                                                                                    
        ?>                    
   </head>
    <body class="container">                                                                                     <!--内容标签-->                                                        
        <form action="list.php" method="post" autocomplete="on">                                                 <!--form表单-->                                                 
            <table>                                                                                              <!--定义表格-->
                 <tr>
                    <td class="login-wrapper">
                        <h1>个人中心</h1>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <label>
                            <span>欢迎你<?php echo $username;?>用户</span>
                        </label>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <label>
                            修改原密码: <input type="password" name="password" placeholder="密码" value="<?php echo $all[2]?>"/>
                        </label>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <label>
                            修改手机号码: <input type="text" name="phone" placeholder="手机号码"value="<?php echo $all[3]?>"/>
                        </label>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <label>
                            修改邮箱: <input type="text" name="emil" placeholder="邮箱"value="<?php echo $all[4]?>"/>
                        </label>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <scan class="login">
                            <input type="submit" name="submit" value="修改"/>
                        </scan>
                    </td>
                 </tr>
                 <tr>
                    <td>
                        <scan id="post">
                            <input type="submit" name="outlog" value="退出登录"/>
                        </scan>
                    </td>
                 </tr>
            </table>
        </form>
    </body>
</html>

 

五、数据库文件

database.php:

<?php
$conn = mysqli_connect("localhost","root","root");                                                   //打开数据库
$selet = mysqli_select_db($conn,"hacker");                                                           //连接数据库
mysqli_query($conn,"set name 'utf-8'");                                                              //设置表编码
?>

数据库可以调用database.php,也可以直接写入登录注册页

六、网页图标

ico.ico:

 

 

七、本数据库设置

数据库名称:hacker

数据库表名:user

 

 

 八、效果图

 

 

 

  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的网站登录注册页面的 HTML、CSS 和 JS 代码: HTML 代码: ``` <!DOCTYPE html> <html> <head> <title>网站登录注册页面</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <form id="login-form" class="form" action="#" method="post"> <h2>登录</h2> <input type="text" name="username" placeholder="用户名"> <input type="password" name="password" placeholder="密码"> <button type="submit" class="btn">登录</button> </form> <form id="register-form" class="form" action="#" method="post"> <h2>注册</h2> <input type="text" name="username" placeholder="用户名"> <input type="password" name="password" placeholder="密码"> <input type="password" name="confirm-password" placeholder="确认密码"> <button type="submit" class="btn">注册</button> </form> </div> <script src="script.js"></script> </body> </html> ``` CSS 代码: ``` * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #f2f2f2; } .container { margin: 50px auto; width: 400px; background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.2); } .form { display: none; } .form h2 { margin-bottom: 20px; text-align: center; } .form input { display: block; margin-bottom: 20px; width: 100%; padding: 10px; font-size: 16px; border: none; border-bottom: 2px solid #ccc; } .form button { margin-top: 20px; width: 100%; padding: 10px; font-size: 16px; background-color: #4CAF50; color: #fff; border: none; border-radius: 5px; cursor: pointer; } .form button:hover { background-color: #3e8e41; } .form .error { display: none; margin-top: 10px; color: red; font-size: 14px; } .form .success { display: none; margin-top: 10px; color: green; font-size: 14px; } ``` JS 代码: ``` const loginForm = document.getElementById('login-form'); const registerForm = document.getElementById('register-form'); document.getElementById('login-btn').addEventListener('click', function() { registerForm.style.display = 'none'; loginForm.style.display = 'block'; }); document.getElementById('register-btn').addEventListener('click', function() { loginForm.style.display = 'none'; registerForm.style.display = 'block'; }); loginForm.addEventListener('submit', function(e) { e.preventDefault(); const username = loginForm.username.value; const password = loginForm.password.value; // 做登录验证 }); registerForm.addEventListener('submit', function(e) { e.preventDefault(); const username = registerForm.username.value; const password = registerForm.password.value; const confirmPassword = registerForm['confirm-password'].value; if (password !== confirmPassword) { registerForm.querySelector('.error').textContent = '两次输入的密码不一致'; registerForm.querySelector('.error').style.display = 'block'; registerForm.querySelector('.success').style.display = 'none'; } else { // 做注册验证 registerForm.querySelector('.success').textContent = '注册成功'; registerForm.querySelector('.success').style.display = 'block'; registerForm.querySelector('.error').style.display = 'none'; } }); ``` 在这个代码中,我们创建了两个表单,一个是登录表单,一个是注册表单。我们使用 CSS 将表单隐藏起来,并且通过 JS 实现表单之间的切换。在登录和注册表单中,我们使用 JS 监听表单的提交事件,然后进行登录和注册验证。在注册表单中,我们还验证了两次输入的密码是否一致,并且根据验证结果显示相应的提示信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值