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（李天星）

【前后端结合】从 0 到 1 实现一个网站框架（一、注册 [1] ）相关推荐

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战：Vuex 其实很简单
前言哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书我的前后端开发简史...
---新内容开始--- 番外大家周一好呀,又是元气满满的一个周一呀!感谢大家在周一这个着急改Bug的黄金时期,抽出时间来看我的博文哈哈哈,时间真快,已经到第十四篇博文了,也很顺顺(跌跌)利利 (撞撞 ...
前后端分离Oauth2.0 - springsecurity + spring-authorization-server —授权码模式
序言对于目前有很多的公司在对旧的web工程做重构,拆分服务,使用前端vue,后端springboot微服务,重构的要点之一是认证授权框架的选型. 对于原有的 spring-security-oaut ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇：JS对象字面量this
缘起书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch...
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
【Vue3 造轮子项目 ------ kaite-ui】基于vue3.0 + vite + TypeScript 实现一个UI框架 - kaiteUI
基于vue3.0 + vite + TypeScript 实现一个UI框架 - kaiteUI 前言前段时间笔者一直忙于学习Vue3方面新知识,比如如何从vue2.0版本过渡到vue3.0,如何理解 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础：使用Vue.js 来画博客首页（一）...
缘起书说前两篇文章< 十五 ║ Vue前篇:JS对象&字面量&this>和 < 十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：组件详解+项目说明...
缘起新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

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

前言

开始吧！

全部代码

实现效果

后记

【前后端结合】从 0 到 1 实现一个网站框架（一、注册 [1] ）相关推荐

最新文章

热门文章