【PHP学习】 Simple Message 系统

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

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

实验要求

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

 

当用户点击“注册”按钮时，用户所填写的所有信息将被提交到一个目标页面（仅仅是一个普通页面，不对传来的数据做任何处理）（例如：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等自带的截图，就会有相应的颜色代码在。

1. 网站整体

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

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

2. 标题栏

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

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

3. 表单内容

首先是表单内容这个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，当选择当前年份的话，生成的月份不会超过当前月份。

function selectYear() {
    var myDate= new Date();
    var myYear=document.getElementById('pickYear').value;
    var pickMonth=document.getElementById('pickMonth');
    pickMonth.options.length = 0;
    if (myYear != myDate.getFullYear()) {
        for (var i=1;i<=12;i++) {
            var option = document.createElement('option');
            option.value = i;
            var txt = document.createTextNode(i);
            option.appendChild(txt);
            pickMonth.appendChild(option);
        }
    } else {
        for (var i=1;i<=myDate.getMonth()+1;i++) {
            var option = document.createElement('option');
            option.value = i;
            var txt = document.createTextNode(i);
            option.appendChild(txt);
            pickMonth.appendChild(option);
        }
    }
}

3. 验证码的实现

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

我写的验证码就是借鉴（copy）的：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;
}

<form action="mubiao.php " method="post" onSubmit="return check();">
</form>

那么这个小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

欢迎下载哦~