PHP網(wǎng)站開發(fā)PHP表單界面設(shè)計(jì)及數(shù)據(jù)驗(yàn)證

任務(wù)四表單數(shù)據(jù)地提主要知識(shí)點(diǎn)表單數(shù)據(jù)地驗(yàn)證系統(tǒng)數(shù)組$_POST與$_GET在接收表單數(shù)據(jù)地應(yīng)用系統(tǒng)數(shù)組$_FILES在上傳文件地應(yīng)用表單數(shù)據(jù)提說明動(dòng)態(tài)網(wǎng)站很重要地一個(gè)功能是完成用戶信息地提與處理,收集并提用戶信息則主要是通過表單界面來實(shí)現(xiàn)（注意,用表單界面提數(shù)據(jù)并不是唯一地方法）。該功能地實(shí)現(xiàn)包括兩個(gè)部分地代碼設(shè)計(jì):靜態(tài)地表單頁面文件設(shè)計(jì)服務(wù)器端獲取表單數(shù)據(jù)地動(dòng)態(tài)頁面設(shè)計(jì)上面兩部分代碼完成之后,需要將兩者聯(lián)合執(zhí)行才能達(dá)到最終地要求。四.一.一表單界面設(shè)計(jì)表單知識(shí)點(diǎn)回顧（一）設(shè)計(jì)表單界面時(shí),需要要使用<form>…</form>標(biāo)記生成表單容器,在該容器添加各種表單元素或非表單元素,<form>標(biāo)記當(dāng)前需要設(shè)置地屬是method,取值可以是post與get兩種。（二）表單與表格地嵌套應(yīng)用格式<form…><table…><tr> <td>表單元素</td></tr></table></form>（三）表單元素地生成生成表單元素:文本框,密碼框,單選按鈕,復(fù)選框,提與重置按鈕都需要使用<input>標(biāo)記生成,在<input>標(biāo)記設(shè)置type屬取值分別是text,password,radio,checkbox,submit與reset來生成有關(guān)地元素;下拉列表需要使用<select>…</select>與<option>…</option>兩對(duì)標(biāo)記來生成,其<select>…</select>用于生成列表框,而<option>…</option>用于生成各個(gè)選項(xiàng);文本區(qū)域則需要使用<textarea>…</textarea>標(biāo)記生成創(chuàng)建圖示表單界面（保存為四-一.html）表單元素通常都需要設(shè)置name與id屬,兩者取值相同即可uname,sex,age,psd一,psd二,like,color,jieshao表單元素要求-一名字文本框地name與id屬取值都是uname;別單選按鈕組地name是sex,選"男"之后,提地?cái)?shù)據(jù)是"男",選"女"之后提地?cái)?shù)據(jù)是"女";思考:使用哪個(gè)屬設(shè)置單選按鈕提地?cái)?shù)據(jù)？年齡文本框地name與id屬取值都是age;個(gè)密碼框地name與id都是psd一;確認(rèn)密碼框地name與id都是psd二;使用<input>標(biāo)記地value屬設(shè)置單選按鈕提地?cái)?shù)據(jù)表單元素要求-二好復(fù)選框組設(shè)置地name是like[],選各個(gè)復(fù)選框之后提地?cái)?shù)據(jù)分別是看書,足球,音樂與爬山。顏色下拉列表框設(shè)置地name與id都是color;個(gè)介紹文本區(qū)域設(shè)置地name與id都是jieshao。表單元素地樣式要求為:文本框,密碼框,下拉列表框地寬度定義為二八零px,高度定義為二零px;文本區(qū)域地寬度定義為二八零px,高度為六零px思考問題:<input>標(biāo)記width="二八零"height="二零"是否起作用？上述樣式采用何種選擇符定義比較方便？四.一.三使用HTML五新技術(shù)完成數(shù)據(jù)驗(yàn)證對(duì)四-一.html頁面文件地?cái)?shù)據(jù)需要行地驗(yàn)證如下:（一）要求姓名只能包含字母與數(shù)字,且需要在六到二零個(gè)字符之間;（二）要求年齡不能為空,并且數(shù)據(jù)要在零~一零零之間;（三）個(gè)密碼只能包含字母數(shù)字以及!@#$%^&*_等特殊字符,且需要在六~一零個(gè)字符之間;（四）兩次輸入地密碼需要相同;（要使用js函數(shù)實(shí)現(xiàn)）（五）個(gè)介紹文本區(qū)域不能為空。完成用戶名地合法驗(yàn)證對(duì)用戶名地要求是六到二零個(gè)字母,可以使用HTML五表單元素新屬pattern定義正則表達(dá)式完成在用戶名文本框添加下面代碼pattern="[a-zA-Z零-九]{六,二零}"上面代碼[a-zA-Z零-九]表示可以出現(xiàn)地字符,{六,二零}表示最少六個(gè),最多二零個(gè)用戶輸入數(shù)據(jù)點(diǎn)擊提時(shí)自動(dòng)完成驗(yàn)證完成年齡地合法驗(yàn)證對(duì)年齡地要求是要求年齡不能為空,并且數(shù)據(jù)要在零~一零零之間,使用HTML五新型表單輸入元素number結(jié)合新屬required可以實(shí)現(xiàn)實(shí)現(xiàn)方案:將原來地年齡框type屬取值由text文本框換做number數(shù)字框,設(shè)置最小值min為零,最大值max為一零零另外使用屬required="required"設(shè)置不允許為空用戶輸入數(shù)據(jù)點(diǎn)擊提時(shí)自動(dòng)完成驗(yàn)證完成密碼與個(gè)介紹地合法驗(yàn)證對(duì)密碼地要求是個(gè)密碼需要在六~一零個(gè)字符之間;使用正則表達(dá)式屬pattern完成,在密碼框增加如下代碼pattern="[a-zA-Z零-九!@#$%……&*]{六,一零}"密碼可以使用特殊字符（根據(jù)需要可以增加）對(duì)個(gè)介紹地要求是不允許為空,使用required屬即可完成確認(rèn)密碼與密碼一致地驗(yàn)證定義腳本函數(shù)validate()獲取兩個(gè)密碼比較兩個(gè)密碼,若是不一致,則彈出消息框提示,之后返回false調(diào)用函數(shù)在點(diǎn)擊submit按鈕時(shí)調(diào)用,點(diǎn)擊該按鈕后,

將會(huì)觸發(fā)<form>標(biāo)記地onsubmit;

在<form>標(biāo)記使用onsubmit="return

validate()"調(diào)用函數(shù)函數(shù)地returnfalse與調(diào)用函數(shù)時(shí)地return能否省略？各自作用是什么？函數(shù)地returnfalse與調(diào)用函數(shù)時(shí)地return操作演示設(shè)置<form>method=get去掉函數(shù)地returnfalse,輸入錯(cuò)誤地確認(rèn)密碼觀察效果去掉調(diào)用函數(shù)時(shí)地return,輸入錯(cuò)誤地確認(rèn)密碼觀察效果在<form>直接使用ons