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

创始人

2024-02-04 12:36:05

0次

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：


注册成功！注册成功！

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

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

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

新建变量：

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

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

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

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

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

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

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

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

呐，把表单做出来：

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

用

让所有的 input 框居中显示。

手机号：* 

用户名：* 

密码：* 

确认密码：* 

验证码：* 

个人网站：

邮箱：

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：


注册 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;}?>注册
* 为必填字段手机号：* 

用户名：* 

密码：* 

确认密码：* 

验证码：* 

个人网站：

邮箱：