这个项目在这儿：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 等自带的截图，就会有相应的颜色代码在。- 网站整体
网站整体居中，关键 css 代码为：margin 0 auto;（前提是设置好了宽度）。
#allDv {
width: 68%;
height: 65vh;
margin: 0 auto;
margin-top: 20px;
background: rgb(240,248,255);
}
- 标题栏
标题栏的内容有 靠左的 LOGO，以及四个 靠右的可以点击的操作块儿。
所以，这里的思路应该是，给 logo 设置 float=left 的属性，给四个 div（图片与操作标题） float=left 的属性（注意代码第一个会在最右边哦比如我的第一个是注册用户）。四个 div 用同一个 class 名，给外边距（margin-left 或 margin-right），提供块与块之间的间距。最右边的块可以单独设置 id，给多一点的右边距。
-
表单内容
首先是表单内容这个 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…… 可能当时没想那么多吧哈哈哈）
- 网站的著作权
这个其实更简单了，就是一个 div 里面装文本然后居中，颜色为 #999 。
网站细节
看到很多人在做下拉框以及验证码的时候，下拉框就直接从 1990 年码到 2019 年，月份也码 12 个月，验证码就用一张图……
这样其实是 OK 的，本来这重点就不在于 HTML，但是唉，都是强迫症惹的祸呀，显得极其不高端… 打字又累，所以我又去 study 了一下 JavaScript。（也是为了完成那个验证的要求）
- 年月的自动生成。
使用 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;
}
- 年月的动态改变
作为出生年月来讲，如果是 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);
}
}
}
- 验证码的实现
验证码实现的原理在各大语言中几乎都很相似，有太多的博客写过了~
我写的验证码就是借鉴（copy）的：http://www.php.cn/html5-tutorial-410216.html
- 最后还有验证环节
当然，做事情得做到尽善尽美。这里的验证我分为两种：一种是文本框实时验证，另一种是提交验证。
文本框的验证使用 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
,感谢您注册本网站。
您的出生年月是年月。
这个项目在这儿：https://download.csdn.net/download/ahanwhite/11139410
欢迎下载哦~