JS表單有效性驗(yàn)證實(shí)驗(yàn)報(bào)告

教師成績(jī):JS表單有效性驗(yàn)證實(shí)驗(yàn)報(bào)告課程名稱：網(wǎng)絡(luò)編程技術(shù)基礎(chǔ)實(shí)驗(yàn)內(nèi)容： JS表單有效性驗(yàn)證作者所在系部： 計(jì)算機(jī)科學(xué)與工程系作者學(xué)號(hào)： 指導(dǎo)教師姓名：實(shí)驗(yàn)四JS表單有效性驗(yàn)證一、實(shí)驗(yàn)?zāi)康?完成用戶注冊(cè)頁面的設(shè)計(jì)，實(shí)現(xiàn)表單的有效性驗(yàn)證。練習(xí)網(wǎng)頁表格布局；練習(xí)HTML表單及表單控件；使用JS實(shí)現(xiàn)表單有效性驗(yàn)證；使用dw顯示提示信息。實(shí)驗(yàn)內(nèi)容:1?設(shè)計(jì)網(wǎng)站用戶注冊(cè)頁面，綜合應(yīng)用表格、表單等，具體要求:?用戶文本框：要求長(zhǎng)度6-12位;密碼框：要求長(zhǎng)度6J2位；字母數(shù)字的組合，不能有其他字符:確認(rèn)密碼框：與密碼框一致；年齡文本框：必須是數(shù)字，且值大于0；電子郵件文本框：性別單選框；愛好復(fù)選框：至少選擇兩項(xiàng)；個(gè)人簡(jiǎn)介多行文本域：至少10個(gè)字符；從網(wǎng)上查找JS年月口級(jí)聯(lián)下拉列表、省市級(jí)聯(lián)下拉列表，移植到本網(wǎng)頁;學(xué)歷下拉列表框，不能是“請(qǐng)選擇S2.使用JS實(shí)現(xiàn)表單有效性驗(yàn)證文本框、密碼框等失去焦點(diǎn)時(shí)進(jìn)行驗(yàn)證;使用div顯示錯(cuò)誤或正確提示信息；?表單提交之前對(duì)表單進(jìn)行有效性驗(yàn)證，如有錯(cuò)誤，阻止提交;三、實(shí)驗(yàn)步首先明確這是用戶注冊(cè)界面,首先應(yīng)該是姓名的輸入，然后是密碼的輸入和確認(rèn)。首先明確這是用戶注冊(cè)界面,首先應(yīng)該是姓名的輸入，然后是密碼的輸入和確認(rèn)。用戶名 用戶名長(zhǎng)度6-12密碼 請(qǐng)輸入密碼，長(zhǎng)度6-12,字母和數(shù)字的組合確認(rèn)密碼fiinctioncheckPsdl(){divll=document.getElementById(HdivlH);psdl=fonnl.textpsd1.value;varflagZM=falsevarflagSZ=falsevarflagQT=falseif(psdl.length<6||psdl.length>12){divl1.HinerHTNIL=H<fbntcolor=red>長(zhǎng)度錯(cuò)誤</font>Mreturnfalse;}elsefbr(i=O;i<psd1.length;i++){if((psdl.charAt(i)>='A*&&psdl.chaiAt(i)<=Z)||(psdl?chaiAt(i)>=h&&psd1.charAt(i)<=,z,))flagZM=tiiieelseif(psd1.charAt(i)>=,0*&&psd1.chaiAt(i)<=,9,){flagSZ=tme}else{flagQT=tme}}if(!flagZM||!flagSZ|flagQT){divl1.umerHTML="<fontcolor=red>密碼必須是字母數(shù)字的組合</font>"returnfalse;}else{divl1.iimerHTML=H<fontcoloi-^reen^輸入正確</fbnt>Mreturntrue;}}returntme;}fiinctioncheckNameQ{varuseiName=forml.textName.value;if(userName.lengtli<6||userNainelength>12){divName.uinerHTML=M<fontcoloi=red>長(zhǎng)度錯(cuò)誤</font>M;returnfalsedivName.imieiHTML=M<fbntcoloi=green>正確</font>";returntme;}returntine;}fiinctioncheckForm(){if(!checkNameQ)returnfalse;if(!checkPsdl())retuinfalse;returntine;}</script></head>

<bodv>J<fonn name=Mfbrmr, method=MpostMaction=njs省份城市&書32852;动；?htm"onSubniit=HieturncheckFomi()"><tablewidth=H600nbordei*=HOnalign^'center^<tr><tdcolspan=,r3H> </td></tr><tr><tdwidth=“82”>用戶名</td>//用戶名應(yīng)該是6-12位，對(duì)于這個(gè)長(zhǎng)度是有要求的。<tdwidth=”182,,><iiiputname=MtextNameHtype=ntextMid=HtextNameMoiiBlu尸”ch亡ckName()”x/td><tdwidth=n322H><divid=HdivName,,>用戶名長(zhǎng)度6-12</div></td></tr><tr><td>密碼</td><td><iiiput iiame=Htextpsd1H type=HpasswoidM id=Htextpsd1HoiiBlu尸"ch亡ckPsd1()Hx/td><td><divid="divr>請(qǐng)輸入密碼，長(zhǎng)度6-12,字母和數(shù)字的組合Vdivx/td></tr><tr><td>確認(rèn)密碼</td><td><mputname=Htextpsd2ntype=Htextnid=Htextpsd2M></td><td> </td></tr>如果輸入的不正確，會(huì)有相應(yīng)的提示并進(jìn)行重新的輸入qq長(zhǎng)度錯(cuò)誤長(zhǎng)度錯(cuò)誤用戶名密碼確認(rèn)密碼qq長(zhǎng)度錯(cuò)誤長(zhǎng)度錯(cuò)誤如果用戶能夠輸入正確的格式，則提示輸入正確并進(jìn)行I、?一步的輸入。止碉輸入正確下面就是出生口期、性別、愛好的輸入了出生日期：性別：2012回止碉輸入正確下面就是出生口期、性別、愛好的輸入了出生日期：性別：2012回［HH@)男◎興趣愛好:女?讀書?j籃球m上網(wǎng)

s旅游口交友<bodv>J<formname=fonnl><selectname=YYYYonchange=MYYYYNDvI(this.value)H></select><selectname=MMonchange=nMMDD(tliis.value)"></select><selectname=DD></select></form><scriptlanguage=MJavaScnptH><!~fiinctionwmdow.oiiload(){strYYYY=document.fbrml.YYYY.outerHTML;strMM=document,form1.MM.oute田TML;strDD=document.fbrml.DD.outerHTML;MoiiHead=[31,28,31,30.31,30.31，31,30、31,30,31];vai*y=newDateQ.getFullYeai();//先給年卜拉框賦內(nèi)容vai*sti=stiYYYY.substrmg(05strYYYY.lengtli-9);for(vari=(y-30);1<(y+30);i++){〃以今年為準(zhǔn)，前30年，后30年str+=M<optionvalue=,H+i+Mt>”+i+,,</option>\r\nH;}document.fonnl.YYYY.outerHTML=sti+H</select>H;varsti=stiNIM.substiing(O.stiNIM.length-9);//賦月份的卜拉框for(vari=1;i<13;i++){str+=M<optionvalue=,H+i+Mt>”+i+,,</option>\r\nH;2012▼iF2012▼iF1983▲119842198531986419875198861989719908"199191992101993111994121995131996IQg199715■1998199917200018■2001192002202003212004：22200523200624：2007252008262009272010282011292012▼30document.fonnl.NIM.oute田TML=str+M</select>H;document.fbrml.YYYY.value=y;document.fbrml.NIM.value=newDateQ.getMonthQ+1;varn=MoiiHead[newDateQ.getMonth()];if(newDate().getMonthQ==1&&IsPmYear(YYYY\*alue))n++;writeDay(n);//賦日期F拉框document.fbrml.DD.value=newDate().getDate();}fbncuonYYYYMM(sti)//年發(fā)生變化時(shí)口期發(fā)生變化(主要是判斷閏平年)vaiMMvalue=document.fbrml.MM.options[documen匚fbmil.MM.sel亡ctedlnd亡x].valu亡;if(MMvalue==Mn){DD.outerHTML=strDD;reuirn;}varn=MoiiHead[MMvalue-1];if(MMvalue==2&&IsPmYeai(str))n-H-;writeDay(n)}

functionMNIDD(str)//月發(fā)生變化時(shí)口期聯(lián)動(dòng)var YYYYValuedocument.fbiml.YYYY.options[document.forml.YYYY.selectedIiidex].value;if(str=MM){DD.outerHTML=strDD;retuni;}varn=MoiiHead[sti--1];if(str==2&&IsPmYear(YYYYvralue))n++;writeDay(n)}functionwriteDav(n)〃據(jù)條件寫口期的卜?拉框{vars=stiDD.substiiiig(O,stiDD.length-9);for(vari=l;i<(n+l);i++)s+=H<optionvalue=H,+1+H+i+H</option>\i\nH;document.fonnl.DD.outerHTNIL=s+H</select>H;}functionIsPinYear(vear)//判斷是否閏平年{retum(0=yeai^o4&&(year%100!=0||year%400=0))}//_></sciipt></body></htnil>卜面就是出生地，個(gè)人簡(jiǎn)歷，學(xué)歷，郵箱的輸入和填寫了。出主地土卜人演丙=由B箱，請(qǐng)選揑所柱宵偽出主地土卜人演丙=由B箱，厶I大吉1▼I163?coni[扌足5E][壬雖]<scripttype=,ftext/javascriptH>//定義了城市的二維數(shù)組，里面的順序跟省份的順序是相同的。通過selectedlndex獲得省份的F標(biāo)值來得到相應(yīng)的城市數(shù)組varcitv^[["北京”，”天津“，"上?！?”重慶香港”，”澳門”],[”石家莊“，“唐山”，”秦皇島”，”邯鄲”，”邢臺(tái)”，”保定”，”張家口”，”承德”，”滄州”，"廊坊衡水”],[“太原”，”大同”，”陽泉”,”長(zhǎng)治"，”晉城"，"朔州“，“晉中運(yùn)城"，”忻州”,”臨汾”,”呂梁“],[”呼和浩特”,”包頭"，”烏?！保?赤峰”，”通遼”，”鄂爾多斯"，”呼倫貝爾“，"巴彥淖爾"，”烏蘭察布”，”興安”，”錫林郭勒阿拉善”],[”沈陽”，”大連“，"鞍山”，”撫順”,”本溪丹東”，"錦州”，”營(yíng)II”,"阜新”，”遼陽”,”盤錦”,“鐵嶺嘲陽”，”葫蘆島“],[”長(zhǎng)春”，”吉林”，”四平","遼源"，”通化"，"白山”，”松原”,”白城"，”延邊”],[”哈爾濱”，”齊齊哈爾雞西”，”鶴崗雙鴨山,,，"人慶”，”伊春”，”佳木斯七臺(tái)河”,”牡丹江”，”黑河”，”綏化,,，"大興安嶺”],[”南京蘇州“，”揚(yáng)州”，“無錫”，"徐州”，”常州”，”南通”，“連云港”，”淮安"，”鹽城"，”鎮(zhèn)江”，”泰州”,”宿遷”],[”杭州"，”寧波”，”溫州”,"嘉興"，”湖州”，"紹興”，”金華”，”衢州”，”舟山”，”臺(tái)州”,”麗水”],[”合肥蕪湖”，"蚌埠"，”淮南”，”馬鞍山淮北”，”銅陵”，"安慶”，”黃山”，”滁州”，”阜陽”，”宿州”，”巢湖”，”六安,,，"亳州”,”池州宣城”],[”福州”，”寧德”，”南平","廈門"，”莆田”，"三明”,”泉州”,”漳州”],[”南昌”，”上饒”，"萍鄉(xiāng)”,”九江"，”景德鎮(zhèn)"，”新余”，”鷹潭”,”贛州"，”吉安"，"宜春”,”撫州”],[”濟(jì)南”，”青島“，"淄博”，“棗莊”，"東營(yíng)"，”煙臺(tái)”，”濰坊威海”，”濟(jì)寧”，"泰安”，"日照”,”萊蕪"，“臨沂德州”，”聊城”，”濱州；満澤”],[”鄭州"，”開封洛陽"，”平頂山”，”焦作鶴壁"，”新鄉(xiāng)”，"安陽”,”濮陽潔河許昌”，”三門峽“，”南陽”，”商丘”，”信陽”，”周口”，"駐馬店“],[”武漢”，”十堰”，”襄樊”，“鄂州”，”黃石”，”荊州”，”宜昌”，“荊門”，”孝感”，"黃岡“，”咸寧”,”隨州"，”恩施”],[”長(zhǎng)沙”，”株洲”，"湘潭”,”岳陽邵陽”，”常德”，”衡陽”，”張家界”，”益陽”，”郴州”，”永州”，”懷化”,”婁底”,”湘西”],[”廣州"，”清遠(yuǎn)潮州”，“東莞”，"珠?！?”深圳汕頭韶關(guān)”，”佛山”，”江門,,，"湛江”,”茂名"，”肇慶”，”惠州”,”梅州汕尾"，"陽江”，"河源"，"中山”，”揭陽","云浮”],[”南寧”，”柳州”,"桂林"，”梧州,北海防城港"，”欽州”，"貴港”,”玉林百色”，”賀州”，”河池”,”來賓"，“崇左”],["海「1",”三亞”],["成都”，"自貢攀枝花"，”瀘州"，”德陽”，"綿陽”，"廣元遂寧"，”內(nèi)江”，"樂山"，”南充”，”宜賓”，”廣安”，”達(dá)州,,，"眉山雅安,巴中"，”資陽”，"阿壩”，"甘孜”,”涼山”],[”貴陽"，”六盤水”，"遵義”,"安順"，”銅仁”，”畢節(jié)"，”黔西南"，”黔東南”,”黔南”],[”昆明”，"曲靖,,，"玉溪”，”保山”，"昭通”，"麗江普洱臨滄文山”，"紅河,,，"西雙版納"，“楚雄“，“大理”，”德宏”,”怒江"，”迪慶”],[”拉薩"，”昌都”，”山南”，"口喀則”，"那曲”，”阿里”,”林藝'],[”西安”，”銅川”，"寶雞"，"咸陽”，"渭南"，"延安”，”漢中”，”榆林”,”安康"，嘀洛”],[”蘭州”，”白銀”，"定西"，”敦煌嘉峪關(guān)金昌"，”天水”，"武威”,”張掖平?jīng)?，”酒泉"，”慶陽臨夏”，”隴南T甘南”],[”西寧”，”海東”，”海北”,”黃南"，”海南"，”果洛”，”玉樹”,”海西”]、[”銀川”，”石嘴山”，”吳忠”，”固原”,”中衛(wèi)”],[”烏魯木齊”，”克拉瑪依吐魯番”,”哈密”，”和田”，”阿克蘇喀什克孜勒蘇柯爾克孜”，”巴音郭楞蒙古“，"昌吉”，”博爾塔拉蒙古"，”伊犁哈薩克”，"阿勒泰”],[”臺(tái)北”，"高雄”，”基隆”,"臺(tái)中"，”臺(tái)南”，"新竹”，”嘉義”]]；functiongetCityQ{〃獲得省份下拉框的對(duì)象varsltProvmce=document.fornis[0].province;〃獲得城市下拉框的對(duì)象vaisltCitv=docuinent.forms[OJ.city;〃得到對(duì)應(yīng)省份的城市數(shù)組vaiproviiiceCity=city[sltPiovmce.selectedIiidex-1];

〃清空城市下拉框，僅留提示選項(xiàng)sltCity.length=l;〃將城市數(shù)組中的值填充到城市下拉框中fbr(vari=0;i<provinceCity.length;i++){sltCity[i+l]=newOption(provmceCity[i].piovinceCitv[i]);}</script></HEAD><BODY><formname=nfl><table><tr><tda請(qǐng)選擇企業(yè)所在城市vfbntcolor=nredH>*</font></td><td><selectname=HprovinceHonChange=,rgetCityO，f><optionvalue=nnullHselected=nselectedM>請(qǐng)選擇所在省份</option><optionvalue=H直轄市"a直轄市</option><optionvalue』河北”>河北</option><optionvalue=H山西"a山西</option><optionvalue=n內(nèi)蒙古”>內(nèi)蒙A</option><optionvalue=n遼寧憐遼寧</option><optionvalue=n吉林”〉吉林</option><optionvalue=n黑龍江"〉黑龍江</option><optionvalue=n江蘇”a江蘇</option><optionvalue=n浙江”a浙江</option><optionvalue=n安徽"〉安徽</option><optionvalue=M福建”〉福建</option><optionvalue=n江西”a江西</option><optionvalue=”dj東”〉山東</option><optionvalue=n河南”〉河南</option><optionvalue=n湖北">湖北</option><optionvalue=n湖南"a湖南</option><optionvalue-1J*?東廣*東v/option><optionvalue-1J*?西丿'*西</option><optionvalue=n海南”〉海南</option><optionvalue=n四川”〉四川</option><optionvalue=n貴州"〉貴州</option><optionvalue=n云南"a云南</option><optionvalue=n西藏”〉西藏</option><optionvalue=H陜西H>陜西</option><optionvalue=M甘肅">甘肅</option><optionvalue=n青?！盿青海</option><optionvalue=n寧夏”〉寧夏</option><optionvalue=n新疆"a新疆</option><optionvalue=n臺(tái)灣”a臺(tái)灣</option>

</select><selectnaine=ncityn><optionselected=HselectedHvalue=MnullH>請(qǐng)選擇所在城市</option></select></td></tr></table></form></BODY></HTML>〃這樣能很好的實(shí)現(xiàn)了各個(gè)省市的輸入<tdalign=Hcenter">學(xué)歷:</table></form></BODY></HTML>〃這樣能很好的實(shí)現(xiàn)了各個(gè)省市的輸入<tdalign=Hcenter">學(xué)歷:</td><td><selectnaine=Hselect,r><option>"、學(xué)</option>大專丘<option>初中</option>小學(xué)<option>高中</option>初中高中<optionselected>A^</option>大專<option>本科</option>本期<option>研究生</option>研究生<option>碩士生</option><option>博士生</option>博Gt?<option>博士后</option></select></td><td> </td></ti><tt><tdheight=H48Halign=ncenteiH>郵箱:</td><td><iiiputt\?pe=MtextHname=HtextfieldM><selectname=HselectH>?新浪@126.com網(wǎng)易.?yahoo,com?cn雅虎@163.net@21cn?com@搜狐?S?vip.163?com@263.net?新浪1HF?niail.china,com?china,com?netease,comiSyeah?net觸億唐^新華網(wǎng)?億郵?上海熱線@56.com??@163.coin網(wǎng)易 I▼<optionvalue=Hselected>@163.com網(wǎng)易</option><optionvalu