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>呐！！！成功啦！！！~~
实现效果
“第一印象”：
（不做任何输入时的页面）
“哦？什么？你不按规定输入？哼哼...”：
（有不合规范的输入时的页面）
“哎，这就对了嘛~~！”：
（输入全部成功后跳转的页面）
后记
呐~到这里，本篇文章就结束啦~
下一篇（预计 2~3 days later），我会实现数据库功能，记得来看呀~~
嘿嘿嘿可以写代码了（a当然，上课我不会摸鱼的）。
附上我的 GitHub：https://github.com/Geeker-LStar
（这个框架现在还是私有仓库，更新到十篇文章的时候会开源哒~主要是现在的代码还有一堆 bug 而且目录也超乱呜呜呜）（没错我写了 1024+ 行了，但是还没写文章，因为还有一些隐秘的 bug，而且目录肯定还要改的）
那么，我们下一篇见！
2022-11-20
By Geeker · LStar（李天星）
扫一扫
634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
