• 【前端】从 0 到 1 实现一个网站框架（一、注册 [1] ）

    Hi~你好呀，等你很久啦~

    我是 LStar，一枚来自北京的初二女生，2020 年年初加入 CSDN。

    话不多说，直入主题~（我现在看两年多前我 11 岁那会发的文章，越看越想笑。为了不让四年后 18 岁的我看着这篇文章露出 “一言难尽的笑容”，我还是不扯那么多闲篇了呃）

    前言

    今年寒假，我自学了前端三件套 & 一点点 PHP，给班级做了一个作业发布网站，效果如下：

    （嘿嘿，其实是和我两年半前在 CSDN 认识的曹智铭同学一起做的呀~~他搭建了一个后台，超厉害~~！）

    （这个字体也是他的，嘿嘿嘿~~）

    其实这也是一个网站框架（已经开源到了 GitHub），但功能非常简陋，纯静态，只有最基本的主页和文章页面，无注册登录/论坛/留言/聊天等动态的多样的功能。

    暑假的时候一直在奋战 C++，也就无暇顾及这个 “框架”。

    最近，我开始构思，在这个 “框架” 的基础上，开发一个功能更全面，更为 “动态” 的网站框架（点名 WordPress!! 哦当然我不是说我的框架能和 WP 相提并论...）。

    于是，我决定从最必要也最基本的（我之前一直不会的）注册登录功能开始写起。

    开始吧！

    首先当然是注册啦~

    这一篇我会搭出样式框架并实现信息判断功能，后续（一周）用 3-4 篇的篇幅将其完善。

    当前目录结构：

    · sign.css——注册登录页面 CSS 样式

    · signup.php——注册页面（主页面）

    · signup_success.html——注册成功后跳转至的页面（不是登录页面哦）

    先把样式写出来：

    sign.css：

    1. /* 注册登录页面 CSS 样式 */
    2.  
    3. body {
    4.     /* 这里的 position 和 min-height 是为了以后加上 footer 做准备的~（好吧其实 footer 我已经写完了）*/
    5.     position: relative;
    6.     min-height: 95vh;
    7.     background-color: rgb(220, 250, 255);
    8. }
    9.  
    10. .main {
    11.     /* 也是为了 footer 做准备~ */
    12.     padding-bottom: 160px;
    13. }
    14.  
    15. h1 {
    16.     text-align: center;
    17.     font-size: 40px;
    18. }
    19.  
    20. a {
    21.     display: block;
    22.     text-align: center;
    23.     color: rgb(240, 0, 255);
    24.     padding-top: 20px;
    25. }
    26.  
    27. a:hover {
    28.     color: blue;
    29. }
    30.  
    31. a:active {
    32.     color: yellow;
    33. }

    再把注册成功页面写出来...

    signup_success.html：

    2.  
    3. html>
    4. <html>
    5.     <head>
    6.         <title>注册成功！title>
    7.         <link rel="stylesheet" href="sign.css">
    8.         <style>
    9.             h1 {
    10.                 padding-top: 18%;
    11.             }
    12.         style>
    13.     head>
    14.  
    15.     <body>
    16.         <div class="sign">
    17.             <div class="main">
    18.                 <h1>注册成功！h1>
    19.             div>
    20.         div>
    21.     body>
    22. html>

    写完这两个，重头戏开始了——注册主页面！

    我们首先需要确定，注册时都需要用户填写哪些信息？

    我确定了如下几个：手机号、用户名、密码（以及二次输入确认密码）、短信验证码、邮箱和个人网站（后两个选填）。

    新建变量：

    第一行 $flag 是指示变量，决定是否跳转到注册成功页面。

    第二行的变量用于存储用户输入的信息。

    第三行的变量用于存储 “输入不符合规范” 时的提示信息（具体输入规范见后文）。

    1. $flag = 0;
    2. $phone = $usern = $pwd = $pwd2 = $verification = $website = $email = "";
    3. $pErr = $nErr = $pwdErr = $pwd2Err = $vErr = $wErr = $eErr = "";

    而提交信息，自然要用 PHP 表单咯~

    由于有两个是选填信息，我们用 * 来表示必填，没有 * 则为选填。

    我希望前端的显示是这样的：

    也就是：需输入的项的名称+输入框+（*）+“输入不符合规范” 时的提示信息。

    呐，把表单做出来：

    （我比较喜欢用 POST，安全，数据长度不受限，而且 url 也会好看呀~）

    用

    让所有的 input 框居中显示。

    1. <form method="post" action="signup.php">
    2.     
    3.     <center>手机号：<input type="text" name="phone" id="phone_number">
    4.     * span>center><br><br>
    5.     <center>用户名：<input type="text" name="usern">
    6.     * span>center><br><br>
    7.     <center>密码：<input type="password" name="pwd">
    8.     * span>center><br><br>
    9.     <center>确认密码：<input type="password" name="pwd2">
    10.     * span>center><br><br>
    11.     <center>验证码：<input type="text" name="verification">
    12.     * span>center><br><br>
    13.     <center>个人网站：<input type="url" name="website">
    14.     span>center><br><br>
    15.     <center>邮箱：<input type="email" name="email">
    16.     span>center><br><br>
    17.     <center><input type="submit" name="注册" value="注册">center>
    18. form>

    well，做完表单，就要进入到最关键的——信息判断环节！

    在正式开始判断之前，我们需要对用户输入的数据做一些处理...

    （每一个函数的具体功能都在注释中写啦~）

    1. // 数据过滤函数
    2. function test_input($data)
    3. {
    4.     $data = trim($data);    // 移除字符串两侧的空白字符或其他预定义字符
    5.     $data = stripslashes($data);    // 删除由 addslashes() 函数添加的反斜杠
    6.     $data = htmlspecialchars($data);    // 把一些预定义的字符转换为 HTML 实体
    7.     return $data;
    8. }

    做好预处理，就开始判断吧！

    我们一项一项来。

    首先是手机号（它也是数据表的主键）。它是必填项，所以需要先判断是否为空。为空则无需接着进行正则判断，不为空则继续进行正则判断，判断是否为合法手机号。

    正则表达式：/^1[3456789]\d{9}$/

    手机号完整判断：

    1. // 手机号
    2. if (empty($_POST["phone"]))
    3.     $pErr = "手机号是必填项哦~";
    4. else
    5. {   
    6.     $phone = test_input($_POST["phone"]);
    7.     if (!preg_match("/^1[3456789]\d{9}$/", $phone))   
    8.         $pErr = "非法的手机号...";
    9.     else
    10.         $flag++;
    11. }

    接着是用户名。它和手机号一样是必填项，先判断是否为空。为空则无需接着进行正则判断，不为空则继续进行正则判断，判断格式是否正确。

    判断标准：不超过 20 个字符且仅包含字母和数字。

    正则表达式：/[A-Za-z0-9_]/

    用户名完整判断：

    1. // 用户名
    2. if (empty($_POST["usern"]))
    3.     $nErr = "用户名是必填项哦~";
    4. else
    5. {   
    6.     $name = test_input($_POST["usern"]);
    7.     if (strlen($nErr) > 20)
    8.         $nErr = "用户名不得超过 20 个字符哦~";
    9.     else
    10.     {
    11.         // !/[A-Za-z0-9_]/ 意为：判断【是否不包含】大小写字母和数字；而 !/^[A-Za-z0-9_]$/ 意为：判断【是否不全为】大小写字母和数字
    12.         if (!preg_match("/[A-Za-z0-9_]/", $name))    // 此处不能加 ^ 和 $
    13.             $nErr = "用户名不得包含中文和特殊字符！";
    14.         else
    15.             $flag++;
    16.     }
    17. }

    接着是密码。判断逻辑同上。

    判断标准：长度 > 8 && 长度 <24，同时包含大小写字母和数字。

    正则表达式（三个分开）：/[A-Z]/、/[a-z]/、/[0-9]/

    密码完整判断：

    1. // 密码（长度，是否包含三项）
    2. if (empty($_POST["pwd"]))
    3.     $pwdErr = "密码是必填项哦~";
    4. else
    5. {
    6.     $pwd = test_input($_POST["pwd"]);
    7.     if (strlen($pwd) > 24 || strlen($pwd) < 8)
    8.         $pwdErr = "密码的长度须在 8-24 之间哦~";
    9.     else
    10.     {
    11.         // /[A-Z]/ 意为：判断【是否包含】大写字母；而 /^[A-Z]$/ 意为：判断【是否全为】大写字母
    12.         if ((!preg_match("/[A-Z]/", $pwd)) || (!preg_match("/[a-z]/", $pwd)) || (!preg_match("/[0-9]/", $pwd)))
    13.             $pwdErr = "密码需同时包含大小写字母和数字哦！";
    14.         else
    15.             $flag++;
    16.     }
    17. }

    接着是确认密码。只需判断它和密码是否一致即可。

    确认密码完整判断：

    1. if (empty($_POST["pwd2"]))
    2.     $pwd2Err = "确认密码是必填项哦~";
    3. else
    4. {   
    5.     $pwd2 = $_POST["pwd2"];
    6.     if ($pwd2 != $pwd)
    7.         $pwd2Err = "两次输入的密码不一致！";
    8.     else
    9.         $flag++;
    10. }

    接着是短信验证码。这个我还没有做出来，将在后续文章中完成~。

    这里用 111 做的测试，代码如下：

    1. // 验证码
    2. if (empty($_POST["verification"]))
    3.     $vErr = "验证码是必填项哦~";
    4. else
    5. {      
    6.     $verification = test_input($_POST["verification"]);
    7.     // 和发出的验证码不一致
    8.     // 发送验证码功能暂未开发，此处 111 仅为测试数据
    9.     if ($verification != "111")    
    10.         $vErr = "啊哦...验证码错误...";
    11.     else
    12.         $flag++;
    13. }

    接着是邮箱。它是选填项，所以可以为空。如果不为空则需要进行判断，判断是否为合法的邮箱号。

    这里不用正则，用 PHP 自带的 filter_var() 函数。

    邮箱完整判断：

    1. // 邮箱
    2. if (empty($_POST["email"]))
    3.     $flag++;
    4. else
    5. {   
    6.     $email = test_input($_POST["email"]);
    7.     if (!filter_var($email, FILTER_VALIDATE_EMAIL))
    8.         $eErr = "非法的邮箱地址...";
    9.     else
    10.         $flag++;
    11. }

    接着是个人网站，判断逻辑同上。

    正则表达式：/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i

    个人网站完整判断：

    1. // 个人网站
    2. if(empty($_POST["website"]))
    3.     $flag++;
    4. else
    5. {   
    6.     $website = $_POST["website"];
    7.     if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i", $website))
    8.         $wErr = "非法的 URL...";
    9.     else
    10.         $flag++;
    11. }

    到现在为止，所有的信息判断就完成啦！！

    $flag：到我上场了，嘿嘿...~

    前文说过，$flag 是指示变量，决定是否跳转到注册成功页面。

    那么，什么时候跳转呢？

    ——自然是以上七项都满足条件的时候呀~！

    而如果以上七项都满足，$flag 的值会为 7。

    也就是...

    1. if ($flag == 7)
    2. {
    3.     // 将所有数据写入数据库
    4.     header("location: signup_success.html");             
    5. }

    （数据库将在下一篇文章中连上哒~）

    至此，本篇文章计划需要实现的功能已经全部实现！

    梳理一下逻辑~：

     下一篇文章会实现数据库功能，记得来看哦！！~~

    全部代码

    （sign.css 和 signup_success.html 的代码前面都写过啦~）

    sign.php：

    2.  
    5.     
    6.         注册
    7.         "stylesheet" href="sign.css">
    8.  
    9.         
    10.     
    11.  
    12.     
    13.         
    14.             $flag = 0;
    15.             $phone = $usern = $pwd = $pwd2 = $verification = $website = $email = "";
    16.             $pErr = $nErr = $pwdErr = $pwd2Err = $vErr = $wErr = $eErr = "";
    17.             
    18.             // 数据验证
    19.             if (isset($_POST["注册"]))
    20.             {   
    21.                 // 手机号
    22.                 if (empty($_POST["phone"]))
    23.                     $pErr = "手机号是必填项哦~";
    24.                 else
    25.                 {   
    26.                     $phone = test_input($_POST["phone"]);
    27.                     if (!preg_match("/^1[3456789]\d{9}$/", $phone))   
    28.                         $pErr = "非法的手机号...";
    29.                     else
    30.                         $flag++;
    31.                 }
    32.                 
    33.                 // 用户名
    34.                 if (empty($_POST["usern"]))
    35.                     $nErr = "用户名是必填项哦~";
    36.                 else
    37.                 {   
    38.                     $name = test_input($_POST["usern"]);
    39.                     if (strlen($nErr) > 20)
    40.                         $nErr = "用户名不得超过 20 个字符哦~";
    41.                     else
    42.                     {
    43.                         // !/[A-Za-z0-9_]/ 意为：判断【是否不包含】大小写字母和数字；而 !/^[A-Za-z0-9_]$/ 意为：判断【是否不全为】大小写字母和数字
    44.                         if (!preg_match("/[A-Za-z0-9_]/", $name))    // 此处不能加 ^ 和 $
    45.                             $nErr = "用户名不得包含中文和特殊字符！";
    46.                         else
    47.                             $flag++;
    48.                     }
    49.                 }
    50.                 
    51.                 // 密码（长度，是否包含三项）
    52.                 if (empty($_POST["pwd"]))
    53.                     $pwdErr = "密码是必填项哦~";
    54.                 else
    55.                 {
    56.                     $pwd = test_input($_POST["pwd"]);
    57.                     if (strlen($pwd) > 24 || strlen($pwd) < 8)
    58.                         $pwdErr = "密码的长度须在 8-24 之间哦~";
    59.                     else
    60.                     {
    61.                         // /[A-Z]/ 意为：判断【是否包含】大写字母；而 /^[A-Z]$/ 意为：判断【是否全为】大写字母
    62.                         if ((!preg_match("/[A-Z]/", $pwd)) || (!preg_match("/[a-z]/", $pwd)) || (!preg_match("/[0-9]/", $pwd)))
    63.                             $pwdErr = "密码需同时包含大小写字母和数字哦！";
    64.                         else
    65.                             $flag++;
    66.                     }
    67.                 }
    68.                 
    69.                 // 确认密码
    70.                 if (empty($_POST["pwd2"]))
    71.                     $pwd2Err = "确认密码是必填项哦~";
    72.                 else
    73.                 {   
    74.                     $pwd2 = $_POST["pwd2"];
    75.                     if ($pwd2 != $pwd)
    76.                         $pwd2Err = "两次输入的密码不一致！";
    77.                     else
    78.                         $flag++;
    79.                 }
    80.  
    81.                 // 验证码
    82.                 if (empty($_POST["verification"]))
    83.                     $vErr = "验证码是必填项哦~";
    84.                 else
    85.                 {      
    86.                     $verification = test_input($_POST["verification"]);
    87.                     // 和发出的验证码不一致
    88.                     // 发送验证码功能暂未开发，此处 111 仅为测试数据
    89.                     if ($verification != "111")    
    90.                         $vErr = "啊哦...验证码错误...";
    91.                     else
    92.                         $flag++;
    93.                 }
    94.  
    95.                 // 个人网站
    96.                 if(empty($_POST["website"]))
    97.                     $flag++;
    98.                 else
    99.                 {   
    100.                     $website = $_POST["website"];
    101.                     if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i", $website))
    102.                         $wErr = "非法的 URL...";
    103.                     else
    104.                         $flag++;
    105.                 }
    106.  
    107.                 // 邮箱
    108.                 if(empty($_POST["email"]))
    109.                     $flag++;
    110.                 else
    111.                 {   
    112.                     $email = test_input($_POST["email"]);
    113.                     if (!filter_var($email, FILTER_VALIDATE_EMAIL))
    114.                         $eErr = "非法的邮箱地址...";
    115.                     else
    116.                         $flag++;
    117.                 }
    118.  
    119.                 if ($flag == 7)
    120.                 {
    121.                     // 将所有数据写入数据库
    122.                     header("location: signup_success.html");
    123.                 }
    124.             }
    125.             
    126.             // 数据过滤函数
    127.             function test_input($data)
    128.             {
    129.                 $data = trim($data);
    130.                 $data = stripslashes($data);
    131.                 $data = htmlspecialchars($data);
    132.                 return $data;
    133.             }
    134.         ?>
    135.         
    136.         
      class="sign">
    137.             <div class="main">
    138.                 <h1>注册h1>
    139.                 <center><p class="must">* 为必填字段p>center>
    140.                 <form method="post" action="signup.php">
    141.                     <center>手机号：<input type="text" name="phone" id="phone_number">
    142.                         <span, class="must">* php echo $pErr?>span>center><br><br>
    143.                     <center>用户名：<input type="text" name="usern">
    144.                         <span, class="must">* php echo $nErr?>span>center><br><br>
    145.                     <center>密码：<input type="password" name="pwd">
    146.                         <span, class="must">* php echo $pwdErr?>span>center><br><br>
    147.                     <center>确认密码：<input type="password" name="pwd2">
    148.                         <span, class="must">* php echo $pwd2Err?>span>center><br><br>
    149.                     <center>验证码：<input type="text" name="verification">
    150.                         <span, class="must">* php echo $vErr?>span>center><br><br>
    151.                     <center>个人网站：<input type="url" name="website">
    152.                     <span, class="must">php echo $wErr?>span>center><br><br>
    153.                     <center>邮箱：<input type="email" name="email">
    154.                         <span, class="must">php echo $eErr?>span>center><br><br>
    155.                     <center><input type="submit" name="注册" value="注册">center>
    156.                 form>
    157.             div>
    158.         div>
    159.     body>
    160. html>

    呐！！！成功啦！！！~~

    实现效果

    “第一印象”：

    （不做任何输入时的页面）

    “哦？什么？你不按规定输入？哼哼...”：

    （有不合规范的输入时的页面）

     “哎，这就对了嘛~~！”：

    （输入全部成功后跳转的页面）

    后记

    呐~到这里，本篇文章就结束啦~

    下一篇（预计 2~3 days later），我会实现数据库功能，记得来看呀~~

     嘿嘿嘿可以写代码了（a当然，上课我不会摸鱼的）。

    附上我的 GitHub：https://github.com/Geeker-LStar

    （这个框架现在还是私有仓库，更新到十篇文章的时候会开源哒~主要是现在的代码还有一堆 bug  而且目录也超乱呜呜呜）（没错我写了 1024+ 行了，但是还没写文章，因为还有一些隐秘的 bug，而且目录肯定还要改的）

    那么，我们下一篇见！

    2022-11-20

    By Geeker · LStar（李天星）

  • 相关阅读:
    [GXYCTF2019]BabySQli 1
    HIVE高级调优（四）
    搜索之：【保序组合型枚举】【从n个数里面选出m个数保序的组合】【启发:以后做题想枚举组合，用保序的组合型枚举更加省时间】
    Nginx监控模块vts
    Java学习笔记（三）：抽象类
    agileBPM 广州宏天BPM功能对比
    SpringBoot整合freemarker模板导出word文件
    用于将内存边界对齐到指定的对齐方式
    「Vue3」手把手教你使用 Vite 快速搭建项目
    每日五道java面试题之spring篇（五）
  • 原文地址：https://blog.csdn.net/weixin_46836893/article/details/127951736