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

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

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

前言

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

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

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

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

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

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

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

开始吧！

首先当然是注册啦~

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

当前目录结构：

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

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

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

先把样式写出来：

sign.css：

/* 注册登录页面 CSS 样式 */

body {
    /* 这里的 position 和 min-height 是为了以后加上 footer 做准备的~（好吧其实 footer 我已经写完了）*/
    position: relative;
    min-height: 95vh;
    background-color: rgb(220, 250, 255);
}

.main {
    /* 也是为了 footer 做准备~ */
    padding-bottom: 160px;
}

h1 {
    text-align: center;
    font-size: 40px;
}

a {
    display: block;
    text-align: center;
    color: rgb(240, 0, 255);
    padding-top: 20px;
}

a:hover {
    color: blue;
}

a:active {
    color: yellow;
}

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

signup_success.html：

<!-- 注册成功页面 -->

<!DOCTYPE html>
<html>
    <head>
        <title>注册成功！</title>
        <link rel="stylesheet" href="sign.css">
        <style>
            h1 {
                padding-top: 18%;
            }
        </style>
    </head>

    <body>
        <div class="sign">
            <div class="main">
                <h1>注册成功！</h1>
            </div>
        </div>
    </body>
</html>

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

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

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

新建变量：

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

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

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

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

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

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

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

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

呐，把表单做出来：

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

用 <center></center> 让所有的 input 框居中显示。

<form method="post" action="signup.php">
    <!--需输入的项的名称+输入框+（*）+“输入不符合规范” 时的提示信息-->
    <center>手机号：<input type="text" name="phone" id="phone_number">
    <span, class="must">* <?php echo $pErr?></span></center><br><br>
    <center>用户名：<input type="text" name="usern">
    <span, class="must">* <?php echo $nErr?></span></center><br><br>
    <center>密码：<input type="password" name="pwd">
    <span, class="must">* <?php echo $pwdErr?></span></center><br><br>
    <center>确认密码：<input type="password" name="pwd2">
    <span, class="must">* <?php echo $pwd2Err?></span></center><br><br>
    <center>验证码：<input type="text" name="verification">
    <span, class="must">* <?php echo $vErr?></span></center><br><br>
    <center>个人网站：<input type="url" name="website">
    <span, class="must"><?php echo $wErr?></span></center><br><br>
    <center>邮箱：<input type="email" name="email">
    <span, class="must"><?php echo $eErr?></span></center><br><br>
    <center><input type="submit" name="注册" value="注册"></center>
</form>

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

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

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

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

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

我们一项一项来。

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

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

手机号完整判断：

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

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

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

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

用户名完整判断：

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

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

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

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

密码完整判断：

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

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

确认密码完整判断：

if (empty($_POST["pwd2"]))
    $pwd2Err = "确认密码是必填项哦~";
else
{   
    $pwd2 = $_POST["pwd2"];
    if ($pwd2 != $pwd)
        $pwd2Err = "两次输入的密码不一致！";
    else
        $flag++;
}

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

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

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

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

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

邮箱完整判断：

// 邮箱
if (empty($_POST["email"]))
    $flag++;
else
{   
    $email = test_input($_POST["email"]);
    if (!filter_var($email, FILTER_VALIDATE_EMAIL))
        $eErr = "非法的邮箱地址...";
    else
        $flag++;
}

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

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

个人网站完整判断：

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

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

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

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

那么，什么时候跳转呢？

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

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

也就是...

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

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

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

梳理一下逻辑~：

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

全部代码

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

sign.php：

<!-- 注册页面 -->

<!DOCTYPE html>
<html>
    <head>
        <title>注册</title>
        <link rel="stylesheet" href="sign.css">

        <style>
            .must {
                color: red;
            }
        </style>
    </head>

    <body>
        <?php
            $flag = 0;
            $phone = $usern = $pwd = $pwd2 = $verification = $website = $email = "";
            $pErr = $nErr = $pwdErr = $pwd2Err = $vErr = $wErr = $eErr = "";
            
            // 数据验证
            if (isset($_POST["注册"]))
            {   
                // 手机号
                if (empty($_POST["phone"]))
                    $pErr = "手机号是必填项哦~";
                else
                {   
                    $phone = test_input($_POST["phone"]);
                    if (!preg_match("/^1[3456789]\d{9}$/", $phone))   
                        $pErr = "非法的手机号...";
                    else
                        $flag++;
                }
                
                // 用户名
                if (empty($_POST["usern"]))
                    $nErr = "用户名是必填项哦~";
                else
                {   
                    $name = test_input($_POST["usern"]);
                    if (strlen($nErr) > 20)
                        $nErr = "用户名不得超过 20 个字符哦~";
                    else
                    {
                        // !/[A-Za-z0-9_]/ 意为：判断【是否不包含】大小写字母和数字；而 !/^[A-Za-z0-9_]$/ 意为：判断【是否不全为】大小写字母和数字
                        if (!preg_match("/[A-Za-z0-9_]/", $name))    // 此处不能加 ^ 和 $
                            $nErr = "用户名不得包含中文和特殊字符！";
                        else
                            $flag++;
                    }
                }
                
                // 密码（长度，是否包含三项）
                if (empty($_POST["pwd"]))
                    $pwdErr = "密码是必填项哦~";
                else
                {
                    $pwd = test_input($_POST["pwd"]);
                    if (strlen($pwd) > 24 || strlen($pwd) < 8)
                        $pwdErr = "密码的长度须在 8-24 之间哦~";
                    else
                    {
                        // /[A-Z]/ 意为：判断【是否包含】大写字母；而 /^[A-Z]$/ 意为：判断【是否全为】大写字母
                        if ((!preg_match("/[A-Z]/", $pwd)) || (!preg_match("/[a-z]/", $pwd)) || (!preg_match("/[0-9]/", $pwd)))
                            $pwdErr = "密码需同时包含大小写字母和数字哦！";
                        else
                            $flag++;
                    }
                }
                
                // 确认密码
                if (empty($_POST["pwd2"]))
                    $pwd2Err = "确认密码是必填项哦~";
                else
                {   
                    $pwd2 = $_POST["pwd2"];
                    if ($pwd2 != $pwd)
                        $pwd2Err = "两次输入的密码不一致！";
                    else
                        $flag++;
                }

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

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

                // 邮箱
                if(empty($_POST["email"]))
                    $flag++;
                else
                {   
                    $email = test_input($_POST["email"]);
                    if (!filter_var($email, FILTER_VALIDATE_EMAIL))
                        $eErr = "非法的邮箱地址...";
                    else
                        $flag++;
                }

                if ($flag == 7)
                {
                    // 将所有数据写入数据库
                    header("location: signup_success.html");
                }
            }
            
            // 数据过滤函数
            function test_input($data)
            {
                $data = trim($data);
                $data = stripslashes($data);
                $data = htmlspecialchars($data);
                return $data;
            }
        ?>
        
        <div class="sign">
            <div class="main">
                <h1>注册</h1>
                <center><p class="must">* 为必填字段</p></center>
                <form method="post" action="signup.php">
                    <center>手机号：<input type="text" name="phone" id="phone_number">
                        <span, class="must">* <?php echo $pErr?></span></center><br><br>
                    <center>用户名：<input type="text" name="usern">
                        <span, class="must">* <?php echo $nErr?></span></center><br><br>
                    <center>密码：<input type="password" name="pwd">
                        <span, class="must">* <?php echo $pwdErr?></span></center><br><br>
                    <center>确认密码：<input type="password" name="pwd2">
                        <span, class="must">* <?php echo $pwd2Err?></span></center><br><br>
                    <center>验证码：<input type="text" name="verification">
                        <span, class="must">* <?php echo $vErr?></span></center><br><br>
                    <center>个人网站：<input type="url" name="website">
                    <span, class="must"><?php echo $wErr?></span></center><br><br>
                    <center>邮箱：<input type="email" name="email">
                        <span, class="must"><?php echo $eErr?></span></center><br><br>
                    <center><input type="submit" name="注册" value="注册"></center>
                </form>
            </div>
        </div>
    </body>
</html>

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