【PHP学习】 Simple Message 系统

客官°小女子只卖身不卖艺 2022-02-15 02:20 164阅读 0赞

这个项目在这儿：[https://download.csdn.net/download/ahanwhite/11139410][https_download.csdn.net_download_ahanwhite_11139410]

啊，我是前端菜鸟~第一节就是前端的内容了，头疼之后也没得办法，做呗：

# 实验要求 #

一、仿照下图做一个注册网页（register.php），该页面包含一个表单，表单中包含以下信息

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FoYW53aGl0ZQ_size_16_color_FFFFFF_t_70][]

当用户点击“注册”按钮时，用户所填写的所有信息将被提交到一个目标页面（仅仅是一个普通页面，不对传来的数据做任何处理）（例如：registerverify.php）,要求：

该页面的内容自行设计。

在表单提交之前要求使用JS对表单的所有输入项进行校验，包括：账号、密码、确认密码、验证码不能为空；账号长度不得少于4位；密码长度在6-8位之间，必须要有字母或数字的组合；密码和确认密码必须一致。

**作业****整体要求****：**

1、页面布局及所有静态元素的摆放必须使用Div+CSS或flex弹性布局

2、页面元素的校验要使用JavaScript实现

# 网页整体实现 #

根据页面的内容，我将它分成了三大部分来写：1. 标题栏，2. 表单内容，3.网站的著作权声明（这里照猫画虎了哈哈），然后整个网页（body）的背景是rgb(248, 248, 255)，中间内容（allDv）的背景是rgb(240, 248, 255)，表单内容框（formDv）背景是white。

小技巧：根据图片获取颜色值，可以使用微信、QQ等自带的截图，就会有相应的颜色代码在。

![20190423172852603.png][]

1. 网站整体

网站整体居中，关键css代码为：margin 0 auto;（前提是设置好了宽度）。

#allDv {
        width: 68%;
        height: 65vh;
        margin: 0 auto;
        margin-top: 20px;
        background: rgb(240,248,255);
    }

2. 标题栏

标题栏的内容有 靠左的LOGO，以及四个 靠右的可以点击的操作块儿。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FoYW53aGl0ZQ_size_16_color_FFFFFF_t_70 1][]

所以，这里的思路应该是，给logo设置 float=left 的属性，给四个div（图片与操作标题） float=right 的属性（注意代码第一个会在最右边哦比如我的第一个是注册用户）。四个div用同一个class名，给外边距（margin-left或margin-right），提供块与块之间的间距。最右边的块可以单独设置id，给多一点的右边距。

3. 表单内容

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FoYW53aGl0ZQ_size_16_color_FFFFFF_t_70 2][]

首先是表单内容这个div的边框，因为要实现这个深蓝色（rgb(70, 130, 180)）的边框需要进行设置。图中仅有上边框较宽，那么设置好所有的宽度之后，在后面另设上边框高度即可。

#middleDv {
            border: 1vw solid rgb(70,130,180);
            border-top: 2vw solid rgb(70,130,180);
    }

表单内容里又包括标题以及表单。

标题：标题其实就一个图片与一个文字，设置好相应字体颜色与适宜的高度即可。

表单：表单在图中是居中的，但是为了方便我使用的是内边距将其顶过去。（哈哈比较懒）但是这样容易使表单的div超出外面的middle div，注意：padding-left+width要等于middle div的width（其实不等于也没事，我是强迫症哈哈哈）

表单里面的内容，因为仅允许使用Div+CSS或flex弹性布局（按老师讲的意思是不能用table），那么这里的思路是所以的提示文字为同一个class的div，设置相同的宽度，然后文本靠右（text-align），输入框也是一样，这样就能实现对齐，每一行的两个元素都需要float=left;然后使用一个空的div，作为清楚浮动使用（clear:both;）。为了好看……emm我还加了个blank空白div，给个高度，然后设置了间隔（别问我为什么不用margin……可能当时没想那么多吧哈哈哈）

3. 网站的著作权

这个其实更简单了，就是一个div里面装文本然后居中，颜色为 \#999 。

# 网站细节 #

看到很多人在做下拉框以及验证码的时候，下拉框就直接从1990年码到2019年，月份也码12个月，验证码就用一张图……

这样其实是OK的，本来这重点就不在于HTML，但是唉，都是强迫症惹的祸呀，显得极其不高端…打字又累，所以我又去study了一下JavaScript。（也是为了完成那个验证的要求）

1. 年月的自动生成。

使用JavaScript在页面访问时就将年月生成好。1. 获取select的id，2. for循环生成年月，复制给option，添加option到select，3. 设置两个select的默认值。

onload = function() {
        var myDate= new Date();
        var startYear=myDate.getFullYear()-60;//起始年份
        var endYear=myDate.getFullYear();//结束年份
        var endMonth = myDate.getMonth();//现在的月份
    
        var pickYear=document.getElementById('pickYear');
        for (var i=endYear;i>=startYear;i--) {
            var option = document.createElement('option');
            option.value = i;
            var txt = document.createTextNode(i);
            option.appendChild(txt);
            pickYear.appendChild(option);
        }
    
        var pickMonth=document.getElementById('pickMonth');
        for (var i=1;i<=endMonth+1;i++) {
            var option = document.createElement('option');
            option.value = i;
            var txt = document.createTextNode(i);
            option.appendChild(txt);
            pickMonth.appendChild(option);
        }
    
        pickYear.value = endYear;
        pickMonth.value = endMonth+1;
    }

2. 年月的动态改变

作为出生年月来讲，如果是2019年，用户还能选择12月……那就有点过分了，所以需要加一个动态改变的js，当选择当前年份的话，生成的月份不会超过当前月份。

3. 验证码的实现

验证码实现的原理在各大语言中几乎都很相似，有太多的博客写过了~

我写的验证码就是借鉴（copy）的：[http://www.php.cn/html5-tutorial-410216.html][http_www.php.cn_html5-tutorial-410216.html]

4. 最后还有验证环节

当然，做事情得做到尽善尽美。这里的验证我分为两种：一种是文本框实时验证，另一种是提交验证。

文本框的验证使用onblur方法即可实现，我的代码也是参考网上的，但是具体来源不记得了（(；´д｀)ゞ）这里贴一个文本框的代码吧~

$(document).ready(function() {
    	//username的判断
        $("#username").blur(function() {
        	var check = false;
    		var inputName = document.getElementById("username").value;
    		var div = document.getElementById("checkName");
    		div.innerHTML = "";
    		var font = document.createElement("font");
    		if (inputName.length <= 0) { 
    			font.setAttribute('color', 'red' ); 
    			font.innerText="账号不能为空！" ; 
    			div.appendChild(font); 
    		} else if (inputName.length < 4) {
    			font.setAttribute('color', 'red' ); 
    			font.innerText="账号长度不能小于4位！" ; 
    			div.appendChild(font);
    		} else {
    			font.setAttribute('color', 'green' ); 
    			font.innerText=" " ;
    			div.appendChild(font);
    		}
        });
    }

然后是提交验证，提交验证时是通过form表单的一个onsubmit属性来设置的，这个属性大概的意思就是传给它的值是false的话就不能通过。通过在每个输入框的验证方法内设置一个boolean参数，满足返回ture，不满足返回false，然后在最后设置一个方法来将几个方法做与运算，返回与运算的值给onsubmit。

function check() {
    	var check = checkUsername() && checkPassword() && checkSecpwd() && checkCaptcha();
    	return check;
    }

那么这个小demo就完成啦~

为了完善一下，我还稍微看了眼PHP的表单处理，将目标页面的内容设置成了~

Dear <font color="blue"><?php echo $_POST["username"]; ?></font> 
    
    	<?php if ($_POST["sex"] == 1) {
    		echo "先生";
    	} else {
    		echo "女士";
    	}
    	?>,感谢您注册本网站。
    
    	您的出生年月是<?php echo $_POST["year"];?>年<?php echo $_POST["month"];?>月。

这个项目在这儿：[https://download.csdn.net/download/ahanwhite/11139410][https_download.csdn.net_download_ahanwhite_11139410]

欢迎下载哦~

[https_download.csdn.net_download_ahanwhite_11139410]: https://download.csdn.net/download/ahanwhite/11139410
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FoYW53aGl0ZQ_size_16_color_FFFFFF_t_70]: /images/20220215/bf6bee211dac41498de7d9b2019fc3e9.png
[20190423172852603.png]: /images/20220215/68044657a7404217a6b8bc21b20d3838.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FoYW53aGl0ZQ_size_16_color_FFFFFF_t_70 1]: /images/20220215/7474bfc29dbf4bde8b5219ede899a1d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FoYW53aGl0ZQ_size_16_color_FFFFFF_t_70 2]: /images/20220215/0c76fceabcba4a37a6a09521e7ea701f.png
[http_www.php.cn_html5-tutorial-410216.html]: http://www.php.cn/html5-tutorial-410216.html