JS表单有效性验证实验报告

教师成绩:JS表单有效性验证实验报告课程名称：网络编程技术基础实验内容： JS表单有效性验证作者所在系部： 计算机科学与工程系作者学号： 指导教师姓名：实验四JS表单有效性验证一、实验目的:完成用户注册页面的设计，实现表单的有效性验证。练习网页表格布局；练习HTML表单及表单控件；使用JS实现表单有效性验证；使用dw显示提示信息。实验内容:1•设计网站用户注册页面，综合应用表格、表单等，具体要求:•用户文本框：要求长度6-12位;密码框：要求长度6J2位；字母数字的组合，不能有其他字符:确认密码框：与密码框一致；年龄文本框：必须是数字，且值大于0；电子邮件文本框：性别单选框；爱好复选框：至少选择两项；个人简介多行文本域：至少10个字符；从网上查找JS年月口级联下拉列表、省市级联下拉列表，移植到本网页;学历下拉列表框，不能是“请选择S2.使用JS实现表单有效性验证文本框、密码框等失去焦点时进行验证;使用div显示错误或正确提示信息；•表单提交之前对表单进行有效性验证，如有错误，阻止提交;三、实验步首先明确这是用户注册界面,首先应该是姓名的输入，然后是密码的输入和确认。首先明确这是用户注册界面,首先应该是姓名的输入，然后是密码的输入和确认。用户名 用户名长度6-12密码 请输入密码，长度6-12,字母和数字的组合确认密码fiinctioncheckPsdl(){divll=document.getElementById(HdivlH);psdl=fonnl.textpsd1.value;varflagZM=falsevarflagSZ=falsevarflagQT=falseif(psdl.length<6||psdl.length>12){divl1.HinerHTNIL=H<fbntcolor=red>长度错误</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>密码必须是字母数字的组合</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>长度错误</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>//用户名应该是6-12位，对于这个长度是有要求的。<tdwidth=”182,,><iiiputname=MtextNameHtype=ntextMid=HtextNameMoiiBlu尸”ch亡ckName()”x/td><tdwidth=n322H><divid=HdivName,,>用户名长度6-12</div></td></tr><tr><td>密码</td><td><iiiput iiame=Htextpsd1H type=HpasswoidM id=Htextpsd1HoiiBlu尸"ch亡ckPsd1()Hx/td><td><divid="divr>请输入密码，长度6-12,字母和数字的组合Vdivx/td></tr><tr><td>确认密码</td><td><mputname=Htextpsd2ntype=Htextnid=Htextpsd2M></td><td> </td></tr>如果输入的不正确，会有相应的提示并进行重新的输入qq长度错误长度错误用户名密码确认密码qq长度错误长度错误如果用户能够输入正确的格式，则提示输入正确并进行I、•一步的输入。止碉输入正确下面就是出生口期、性别、爱好的输入了出生日期：性别：2012回止碉输入正确下面就是出生口期、性别、爱好的输入了出生日期：性别：2012回［HH@)男◎兴趣爱好:女®读书®j篮球m上网

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();//先给年卜拉框赋内容vai*sti=stiYYYY.substrmg(05strYYYY.lengtli-9);for(vari=(y-30);1<(y+30);i++){〃以今年为准，前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)//年发生变化时口期发生变化(主要是判断闰平年)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)//月发生变化时口期联动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)〃据条件写口期的卜•拉框{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>卜面就是出生地，个人简历，学历，邮箱的输入和填写了。出主地土卜人演丙=由B箱，请选揑所柱宵伪出主地土卜人演丙=由B箱，厶I大吉1▼I163・coni[扌足5E][壬虽]<scripttype=,ftext/javascriptH>//定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过selectedlndex获得省份的F标值来得到相应的城市数组varcitv^[["北京”，”天津“，"上海”,”重庆香港”，”澳门”],[”石家庄“，“唐山”，”秦皇岛”，”邯郸”，”邢台”，”保定”，”张家口”，”承德”，”沧州”，"廊坊衡水”],[“太原”，”大同”，”阳泉”,”长治"，”晋城"，"朔州“，“晋中运城"，”忻州”,”临汾”,”吕梁“],[”呼和浩特”,”包头"，”乌海”，"赤峰”，”通辽”，”鄂尔多斯"，”呼伦贝尔“，"巴彦淖尔"，”乌兰察布”，”兴安”，”锡林郭勒阿拉善”],[”沈阳”，”大连“，"鞍山”，”抚顺”,”本溪丹东”，"锦州”，”营II”,"阜新”，”辽阳”,”盘锦”,“铁岭嘲阳”，”葫芦岛“],[”长春”，”吉林”，”四平","辽源"，”通化"，"白山”，”松原”,”白城"，”延边”],[”哈尔滨”，”齐齐哈尔鸡西”，”鹤岗双鸭山,,，"人庆”，”伊春”，”佳木斯七台河”,”牡丹江”，”黑河”，”绥化,,，"大兴安岭”],[”南京苏州“，”扬州”，“无锡”，"徐州”，”常州”，”南通”，“连云港”，”淮安"，”盐城"，”镇江”，”泰州”,”宿迁”],[”杭州"，”宁波”，”温州”,"嘉兴"，”湖州”，"绍兴”，”金华”，”衢州”，”舟山”，”台州”,”丽水”],[”合肥芜湖”，"蚌埠"，”淮南”，”马鞍山淮北”，”铜陵”，"安庆”，”黄山”，”滁州”，”阜阳”，”宿州”，”巢湖”，”六安,,，"亳州”,”池州宣城”],[”福州”，”宁德”，”南平","厦门"，”莆田”，"三明”,”泉州”,”漳州”],[”南昌”，”上饶”，"萍乡”,”九江"，”景德镇"，”新余”，”鹰潭”,”赣州"，”吉安"，"宜春”,”抚州”],[”济南”，”青岛“，"淄博”，“枣庄”，"东营"，”烟台”，”潍坊威海”，”济宁”，"泰安”，"日照”,”莱芜"，“临沂德州”，”聊城”，”滨州；満泽”],[”郑州"，”开封洛阳"，”平顶山”，”焦作鹤壁"，”新乡”，"安阳”,”濮阳潔河许昌”，”三门峡“，”南阳”，”商丘”，”信阳”，”周口”，"驻马店“],[”武汉”，”十堰”，”襄樊”，“鄂州”，”黄石”，”荆州”，”宜昌”，“荆门”，”孝感”，"黄冈“，”咸宁”,”随州"，”恩施”],[”长沙”，”株洲”，"湘潭”,”岳阳邵阳”，”常德”，”衡阳”，”张家界”，”益阳”，”郴州”，”永州”，”怀化”,”娄底”,”湘西”],[”广州"，”清远潮州”，“东莞”，"珠海”,”深圳汕头韶关”，”佛山”，”江门,,，"湛江”,”茂名"，”肇庆”，”惠州”,”梅州汕尾"，"阳江”，"河源"，"中山”，”揭阳","云浮”],[”南宁”，”柳州”,"桂林"，”梧州,北海防城港"，”钦州”，"贵港”,”玉林百色”，”贺州”，”河池”,”来宾"，“崇左”],["海「1",”三亚”],["成都”，"自贡攀枝花"，”泸州"，”德阳”，"绵阳”，"广元遂宁"，”内江”，"乐山"，”南充”，”宜宾”，”广安”，”达州,,，"眉山雅安,巴中"，”资阳”，"阿坝”，"甘孜”,”凉山”],[”贵阳"，”六盘水”，"遵义”,"安顺"，”铜仁”，”毕节"，”黔西南"，”黔东南”,”黔南”],[”昆明”，"曲靖,,，"玉溪”，”保山”，"昭通”，"丽江普洱临沧文山”，"红河,,，"西双版纳"，“楚雄“，“大理”，”德宏”,”怒江"，”迪庆”],[”拉萨"，”昌都”，”山南”，"口喀则”，"那曲”，”阿里”,”林艺'],[”西安”，”铜川”，"宝鸡"，"咸阳”，"渭南"，"延安”，”汉中”，”榆林”,”安康"，嘀洛”],[”兰州”，”白银”，"定西"，”敦煌嘉峪关金昌"，”天水”，"武威”,”张掖平凉"，”酒泉"，”庆阳临夏”，”陇南T甘南”],[”西宁”，”海东”，”海北”,”黄南"，”海南"，”果洛”，”玉树”,”海西”]、[”银川”，”石嘴山”，”吴忠”，”固原”,”中卫”],[”乌鲁木齐”，”克拉玛依吐鲁番”,”哈密”，”和田”，”阿克苏喀什克孜勒苏柯尔克孜”，”巴音郭楞蒙古“，"昌吉”，”博尔塔拉蒙古"，”伊犁哈萨克”，"阿勒泰”],[”台北”，"高雄”，”基隆”,"台中"，”台南”，"新竹”，”嘉义”]]；functiongetCityQ{〃获得省份下拉框的对象varsltProvmce=document.fornis[0].province;〃获得城市下拉框的对象vaisltCitv=docuinent.forms[OJ.city;〃得到对应省份的城市数组vaiproviiiceCity=city[sltPiovmce.selectedIiidex-1];

〃清空城市下拉框，仅留提示选项sltCity.length=l;〃将城市数组中的值填充到城市下拉框中fbr(vari=0;i<provinceCity.length;i++){sltCity[i+l]=newOption(provmceCity[i].piovinceCitv[i]);}</script></HEAD><BODY><formname=nfl><table><tr><tda请选择企业所在城市vfbntcolor=nredH>*</font></td><td><selectname=HprovinceHonChange=,rgetCityO，f><optionvalue=nnullHselected=nselectedM>请选择所在省份</option><optionvalue=H直辖市"a直辖市</option><optionvalue』河北”>河北</option><optionvalue=H山西"a山西</option><optionvalue=n内蒙古”>内蒙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青海”a青海</option><optionvalue=n宁夏”〉宁夏</option><optionvalue=n新疆"a新疆</option><optionvalue=n台湾”a台湾</option>

</select><selectnaine=ncityn><optionselected=HselectedHvalue=MnullH>请选择所在城市</option></select></td></tr></table></form></BODY></HTML>〃这样能很好的实现了各个省市的输入<tdalign=Hcenter">学历:</table></form></BODY></HTML>〃这样能很好的实现了各个省市的输入<tdalign=Hcenter">学历:</td><td><selectnaine=Hselect,r><option>"、学</option>大专丘<option>初中</option>小学<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网易.©yahoo,com・cn雅虎@163.net@21cn・com@搜狐•S©vip.163・com@263.net©新浪1HF©niail.china,com©china,com©netease,comiSyeah・net触亿唐^新华网©亿邮©上海热线@56.com©©@163.coin网易 I▼<optionvalue=Hselected>@163.com网易</option><optionvalu