這個項(xiàng)目在這兒：https://download.csdn.net/download/ahanwhite/11139410
啊，我是前端菜鳥~ 第一節(jié)就是前端的內(nèi)容了，頭疼之后也沒得辦法，做唄：
實(shí)驗(yàn)要求
一、仿照下圖做一個注冊網(wǎng)頁（register.php），該頁面包含一個表單，表單中包含以下信息
當(dāng)用戶點(diǎn)擊 “注冊” 按鈕時，用戶所填寫的所有信息將被提交到一個目標(biāo)頁面（僅僅是一個普通頁面，不對傳來的數(shù)據(jù)做任何處理）（例如：registerverify.php）, 要求：
該頁面的內(nèi)容自行設(shè)計(jì)。
在表單提交之前要求使用 JS 對表單的所有輸入項(xiàng)進(jìn)行校驗(yàn)，包括：賬號、密碼、確認(rèn)密碼、驗(yàn)證碼不能為空；賬號長度不得少于 4 位；密碼長度在 6-8 位之間，必須要有字母或數(shù)字的組合；密碼和確認(rèn)密碼必須一致。
作業(yè)整體要求：
1、頁面布局及所有靜態(tài)元素的擺放必須使用 Div+CSS 或 flex 彈性布局
2、頁面元素的校驗(yàn)要使用 JavaScript 實(shí)現(xiàn)
網(wǎng)頁整體實(shí)現(xiàn)
根據(jù)頁面的內(nèi)容，我將它分成了三大部分來寫：1. 標(biāo)題欄，2. 表單內(nèi)容，3. 網(wǎng)站的著作權(quán)聲明（這里照貓畫虎了哈哈），然后整個網(wǎng)頁（body）的背景是 rgb(248, 248, 255)，中間內(nèi)容（allDv）的背景是 rgb(240, 248, 255)，表單內(nèi)容框（formDv）背景是 white。
小技巧：根據(jù)圖片獲取顏色值，可以使用微信、QQ 等自帶的截圖，就會有相應(yīng)的顏色代碼在。
- 網(wǎng)站整體
網(wǎng)站整體居中，關(guān)鍵 css 代碼為：margin 0 auto;（前提是設(shè)置好了寬度）。
#allDv {
width: 68%;
height: 65vh;
margin: 0 auto;
margin-top: 20px;
background: rgb(240,248,255);
}
- 標(biāo)題欄
標(biāo)題欄的內(nèi)容有 靠左的 LOGO，以及四個 靠右的可以點(diǎn)擊的操作塊兒。
所以，這里的思路應(yīng)該是，給 logo 設(shè)置 float=left 的屬性，給四個 div（圖片與操作標(biāo)題） float=left 的屬性（注意代碼第一個會在最右邊哦比如我的第一個是注冊用戶）。四個 div 用同一個 class 名，給外邊距（margin-left 或 margin-right），提供塊與塊之間的間距。最右邊的塊可以單獨(dú)設(shè)置 id，給多一點(diǎn)的右邊距。
-
表單內(nèi)容
首先是表單內(nèi)容這個 div 的邊框，因?yàn)橐獙?shí)現(xiàn)這個深藍(lán)色（rgb(70, 130, 180)）的邊框需要進(jìn)行設(shè)置。圖中僅有上邊框較寬，那么設(shè)置好所有的寬度之后，在后面另設(shè)上邊框高度即可。
#middleDv {
border: 1vw solid rgb(70,130,180);
border-top: 2vw solid rgb(70,130,180);
}
表單內(nèi)容里又包括標(biāo)題以及表單。
標(biāo)題：標(biāo)題其實(shí)就一個圖片與一個文字，設(shè)置好相應(yīng)字體顏色與適宜的高度即可。
表單：表單在圖中是居中的，但是為了方便我使用的是內(nèi)邊距將其頂過去。（哈哈比較懶）但是這樣容易使表單的 div 超出外面的 middle div，注意：padding-left+width 要等于 middle div 的 width（其實(shí)不等于也沒事，我是強(qiáng)迫癥哈哈哈）
表單里面的內(nèi)容，因?yàn)閮H允許使用 Div+CSS 或 flex 彈性布局（按老師講的意思是不能用 table），那么這里的思路是所以的提示文字為同一個 class 的 div，設(shè)置相同的寬度，然后文本靠右（text-align），輸入框也是一樣，這樣就能實(shí)現(xiàn)對齊，每一行的兩個元素都需要 float=left; 然后使用一個空的 div，作為清楚浮動使用（clear:both;）。為了好看……emm 我還加了個 blank 空白 div，給個高度，然后設(shè)置了間隔（別問我為什么不用 margin…… 可能當(dāng)時沒想那么多吧哈哈哈）
- 網(wǎng)站的著作權(quán)
這個其實(shí)更簡單了，就是一個 div 里面裝文本然后居中，顏色為 #999 。
網(wǎng)站細(xì)節(jié)
看到很多人在做下拉框以及驗(yàn)證碼的時候，下拉框就直接從 1990 年碼到 2019 年，月份也碼 12 個月，驗(yàn)證碼就用一張圖……
這樣其實(shí)是 OK 的，本來這重點(diǎn)就不在于 HTML，但是唉，都是強(qiáng)迫癥惹的禍呀，顯得極其不高端… 打字又累，所以我又去 study 了一下 JavaScript。（也是為了完成那個驗(yàn)證的要求）
- 年月的自動生成。
使用 JavaScript 在頁面訪問時就將年月生成好。1. 獲取 select 的 id，2. for 循環(huán)生成年月，復(fù)制給 option，添加 option 到 select，3. 設(shè)置兩個 select 的默認(rèn)值。
onload = function() {
var myDate= new Date();
var startYear=myDate.getFullYear()-60;//起始年份
var endYear=myDate.getFullYear();//結(jié)束年份
var endMonth = myDate.getMonth();//現(xiàn)在的月份
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;
}
- 年月的動態(tài)改變
作為出生年月來講，如果是 2019 年，用戶還能選擇 12 月…… 那就有點(diǎn)過分了，所以需要加一個動態(tài)改變的 js，當(dāng)選擇當(dāng)前年份的話，生成的月份不會超過當(dāng)前月份。
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);
}
}
}
- 驗(yàn)證碼的實(shí)現(xiàn)
驗(yàn)證碼實(shí)現(xiàn)的原理在各大語言中幾乎都很相似，有太多的博客寫過了~
我寫的驗(yàn)證碼就是借鑒（copy）的：http://www.php.cn/html5-tutorial-410216.html
- 最后還有驗(yàn)證環(huán)節(jié)
當(dāng)然，做事情得做到盡善盡美。這里的驗(yàn)證我分為兩種：一種是文本框?qū)崟r驗(yàn)證，另一種是提交驗(yàn)證。
文本框的驗(yàn)證使用 onblur 方法即可實(shí)現(xiàn)，我的代碼也是參考網(wǎng)上的，但是具體來源不記得了（(；′д｀) ゞ）這里貼一個文本框的代碼吧~
$(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);
}
});
}
然后是提交驗(yàn)證，提交驗(yàn)證時是通過 form 表單的一個 onsubmit 屬性來設(shè)置的，這個屬性大概的意思就是傳給它的值是 false 的話就不能通過。通過在每個輸入框的驗(yàn)證方法內(nèi)設(shè)置一個 boolean 參數(shù)，滿足返回 ture，不滿足返回 false，然后在最后設(shè)置一個方法來將幾個方法做與運(yùn)算，返回與運(yùn)算的值給 onsubmit。
function check() {
var check = checkUsername() && checkPassword() && checkSecpwd() && checkCaptcha();
return check;
}
<form action="mubiao.php " method="post" onSubmit="return check();">
</form>
那么這個小 demo 就完成啦~
為了完善一下，我還稍微看了眼 PHP 的表單處理，將目標(biāo)頁面的內(nèi)容設(shè)置成了~
Dear <font color="blue"><?php echo $_POST["username"]; ?></font>
<?php if ($_POST["sex"] == 1) {
echo "先生";
} else {
echo "女士";
}
?>,感謝您注冊本網(wǎng)站。
您的出生年月是<?php echo $_POST["year"];?>年<?php echo $_POST["month"];?>月。
這個項(xiàng)目在這兒：https://download.csdn.net/download/ahanwhite/11139410
歡迎下載哦~
