HTML制作网页表单验证代码_第1页
HTML制作网页表单验证代码_第2页
HTML制作网页表单验证代码_第3页
HTML制作网页表单验证代码_第4页
HTML制作网页表单验证代码_第5页
已阅读5页，还剩5页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML制作网页表单验证代码<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>用户名注册</title><scriptlanguage="javascript">//验证表单是否为空functioncheckForm(){varflag=true;if(form1.textname.value==""){ divname.innerHTML="<fontcolor=red>请输入用户名</font>" flag=false; //returnfalse}if(form1.textpassword1.value==""){ divpassword1.innerHTML="<fontcolor=red>请输入密码</font>" flag=false; //returnfalse}if(form1.textpassword2.value==""){ divpassword2.innerHTML="<fontcolor=red>请再次输入密码</font>" flag=false; //returnfalse}if(form1.textarea.value==""){divarea.innerHTML="<fontcolor=red>请输入您的简历</font>"flag=false; } if(form1.textmail.value==""){divmail.innerHTML="<fontcolor=red>请输入您的邮箱</font>"flag=false;} returnflag;//returntrue;}</script><scriptlanguage="javascript">//验证用户名functioncheckna(){varna=form1.textname.value;if(na.length<6||na.length>12){ divname.innerHTML="<fontcolor=red>长度错误</font>" returnfalse;} else { divname.innerHTML="<fontcolor='green'>输入正确</font>" returntrue;}returntrue;}</script><scriptlanguage="javascript">//验证密码functioncheckpsd1(){ //div11=document.getElementById("divpassword1"); psd1=form1.textpassword1.value; varflagZM=false varflagSZ=false varflagQT=false if(psd1.length<6||psd1.length>12){ divpassword1.innerHTML="<fontcolor=red>长度错误</font>" returnfalse; } else { for(i=0;i<psd1.length;i++) { if((psd1.charAt(i)>='A'&&psd1.charAt(i)<='Z')||(psd1.charAt(i)>='a'&&psd1.charAt(i)<='z')) flagZM=true elseif(psd1.charAt(i)>='0'&&psd1.charAt(i)<='9') {flagSZ=true} else {flagQT=true} } if(!flagZM||!flagSZ||flagQT){ divpassword1.innerHTML="<fontcolor=red>密码必须是字母数字的组合</font>" returnfalse; } else divpassword1.innerHTML="<fontcolor='green'>输入正确</font>" returntrue; } returntrue;}//--></script><scriptlanguage="javascript">//验证确认密码functioncheckpsd2(){if(form1.textpassword1.value!=form1.textpassword2.value){divpassword2.innerHTML="<fontcolor=red>您两次输入的密码不一样</font>"}elsedivpassword2.innerHTML="<fontcolor='green'>输入正确</font>"}</script><scriptlanguage="javascript">//验证文本框functioncheckarea(){area=form1.textarea.value;if(area.length<10){ divarea.innerHTML="<fontcolor=red>请输入至少十个字符</font>"} else { divarea.innerHTML="<fontcolor='green'>输入正确</font>" }}</script><scriptlanguage="javascript">//验证复选框functionchecknum(){vars="";for(vari=0;i<document.form1.box.length;i++){//判断第i个复选框是否被选中if(document.form1.box[i].checked==true)s=s+document.form1.box[i].value+"\n";}elseif(s<2)divbox.innerHTML="<fontcolor='red'>请选择两个以上</font>"}</script><scriptlanguage="javascript">//验证邮箱functioncheckmail(){if(document.form1.textmail.value.charAt(0)=="."||document.form1.textmail.value.charAt(0)=="@"||document.form1.textmail.value.indexOf(’@’,0)==-1||document.form1.textmail.value.indexOf(’.’,0)==-1||document.form1.textmail.value.lastIndexOf("@")==document.form1.textmail.value.length-1||document.form1.textmail.value.lastIndexOf(".")==document.form1.textmail.value.length-1){divmail.innerHTML="<fontcolor=red>Email的格式不正确！</font>"returnfalse;}elsedivmail.innerHTML="<fontcolor=red>输入正确</font>"returntrue;}</script><scripttype="text/javascript">//定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组varcity=[["北京","天津","上海","重庆","香港","澳门"],["石家庄","唐山","秦皇岛","邯郸","邢台","保定","张家口","承德","沧州","廊坊","衡水"],["太原","大同","阳泉","长治","晋城","朔州","晋中","运城","忻州","临汾","吕梁"],["呼和浩特","包头","乌海","赤峰","通辽","鄂尔多斯","呼伦贝尔","巴彦淖尔","乌兰察布","兴安","锡林郭勒","阿拉善"],["沈阳","大连","鞍山","抚顺","本溪","丹东","锦州","营口","阜新","辽阳","盘锦","铁岭","朝阳","葫芦岛"],["长春","吉林","四平","辽源","通化","白山","松原","白城","延边"],["哈尔滨","齐齐哈尔","鸡西","鹤岗","双鸭山","大庆","伊春","佳木斯","七台河","牡丹江","黑河","绥化","大兴安岭"],["南京","苏州","扬州","无锡","徐州","常州","南通","连云港","淮安","盐城","镇江","泰州","宿迁"],["杭州","宁波","温州","嘉兴","湖州","绍兴","金华","衢州","舟山","台州","丽水"],["合肥","芜湖","蚌埠","淮南","马鞍山","淮北","铜陵","安庆","黄山","滁州","阜阳","宿州","巢湖","六安","亳州","池州","宣城"],["福州","宁德","南平","厦门","莆田","三明","泉州","漳州"],["南昌","上饶","萍乡","九江","景德镇","新余","鹰潭","赣州","吉安","宜春","抚州"],["济南","青岛","淄博","枣庄","东营","烟台","潍坊","威海","济宁","泰安","日照","莱芜","临沂","德州","聊城","滨州","菏泽"],["郑州","开封","洛阳","平顶山","焦作","鹤壁","新乡","安阳","濮阳","漯河","许昌","三门峡","南阳","商丘","信阳","周口","驻马店"],["武汉","十堰","襄樊","鄂州","黄石","荆州","宜昌","荆门","孝感","黄冈","咸宁","随州","恩施"],["长沙","株洲","湘潭","岳阳","邵阳","常德","衡阳","张家界","益阳","郴州","永州","怀化","娄底","湘西"],["广州","清远","潮州","东莞","珠海","深圳","汕头","韶关","佛山","江门","湛江","茂名","肇庆","惠州","梅州","汕尾","阳江","河源","中山","揭阳","云浮"],["南宁","柳州","桂林","梧州","北海","防城港","钦州","贵港","玉林","百色","贺州","河池","来宾","崇左"],["海口","三亚"],["成都","自贡","攀枝花","泸州","德阳","绵阳","广元","遂宁","内江","乐山","南充","宜宾","广安","达州","眉山","雅安","巴中","资阳","阿坝","甘孜","凉山"],["贵阳","六盘水","遵义","安顺","铜仁","毕节","黔西南","黔东南","黔南"],["昆明","曲靖","玉溪","保山","昭通","丽江","普洱","临沧","文山","红河","西双版纳","楚雄","大理","德宏","怒江","迪庆"],["拉萨","昌都","山南","日喀则","那曲","阿里","林芝"],["西安","铜川","宝鸡","咸阳","渭南","延安","汉中","榆林","安康","商洛"],["兰州","白银","定西","敦煌","嘉峪关","金昌","天水","武威","张掖","平凉","酒泉","庆阳","临夏","陇南","甘南"],["西宁","海东","海北","黄南","海南","果洛","玉树","海西"],["银川","石嘴山","吴忠","固原","中卫"],["乌鲁木齐","克拉玛依","吐鲁番","哈密","和田","阿克苏","喀什","克孜勒苏柯尔克孜","巴音郭楞蒙古","昌吉","博尔塔拉蒙古","伊犁哈萨克","阿勒泰"],["台北","高雄","基隆","台中","台南","新竹","嘉义"]];functiongetCity(){//获得省份下拉框的对象varsltProvince=document.forms[0].province;//获得城市下拉框的对象varsltCity=document.forms[0].city;//得到对应省份的城市数组varprovinceCity=city[sltProvince.selectedIndex-1];//清空城市下拉框，仅留提示选项sltCity.length=1;//将城市数组中的值填充到城市下拉框中for(vari=0;i<provinceCity.length;i++){sltCity[i+1]=newOption(provinceCity[i],provinceCity[i]);}}</script><styletype="text/css"><!--body{ background-image:url();}.style4{font-size:12px}--></style></head><body><formname="form1"method="post"action="js.htm"onSubmit="returncheckForm()"><tablewidth="688"border="0"align="center"><tralign="center"><tdcolspan="3">用户注册</td></tr><tr><tdwidth="130">用户名：</td><tdwidth="343"><inputtype="text"name="textname"id="divname"onBlur="checkna()"><spanclass="style4"></span></td><tdwidth="201"><divid="divname">请输入6-12位用户名</div></td></tr><tr><td>密码：</td><td><inputtype="password"name="textpassword1"id="textpassword1"onBlur="checkpsd1()"><spanclass="style4"></span></td><td><divid="divpassword1">请输入密码，长度6-12，字母和数字的组合</div></td></tr><tr><td>再次输入密码：</td><td><inputtype="password"name="textpassword2"id="textpassword2"onBlur="checkpsd2()"><spanclass="style4"></span></td><td><divid="divpassword2">请再次输入密码</div></td></tr><tr><tdheight="23">性别：</td><td><inputname="sex"type="radio"id="sex"onBlur="checksex()"value="1"checked>男<inputtype="radio"name="sex"value="0"id="sex"onBlur="checksex()">女</td><td><divid="divsex"></div></td></tr><tr><td>请选择兴趣爱好：</td><td><inputname="box"type="checkbox"id="box"value="checkbox">游泳<inputtype="checkbox"name="box"id="box"value="checkbox">电脑<inputtype="checkbox"name="box"id="box"value="checkbox">羽毛球<inputtype="checkbox"name="box"id="box"value="checkbox">篮球<inputtype="checkbox"name="box"id="box"value="checkbox">跑步<inputtype="checkbox"name="box"id="box"value="checkbox"onBlur="checknum()">音乐</td><td><divid="divbox">请选择至少两个</div></td></tr><tr><td>个人简历：</td><td><textareaname="textarea"id="textarea"onBlur="checkarea()"></textarea></td><td><divid="divarea">请输入您的个人简历</div></td></tr><tr><td>出生日期：</td><scriptlanguage="JavaScript"><!--functionwindow.onload(){strYYYY=document.form1.YYYY.outerHTML;strMM=document.form1.MM.outerHTML;strDD=document.form1.DD.outerHTML;MonHead=[31,28,31,30,31,30,31,31,30,31,30,31];//先给年下拉框赋内容vary=newDate().getFullYear();varstr=strYYYY.substring(0,strYYYY.length-9);for(vari=(y-30);i<(y+1);i++)//以今年为准，前30年{str+="<optionvalue='"+i+"'>"+i+"</option>\r\n";}document.form1.YYYY.outerHTML=str+"</select>";//赋月份的下拉框varstr=strMM.substring(0,strMM.length-9);for(vari=1;i<13;i++){str+="<optionvalue='"+i+"'>"+i+"</option>\r\n";}document.form1.MM.outerHTML=str+"</select>";document.form1.YYYY.value=y;document.form1.MM.value=newDate().getMonth()+1;varn=MonHead[newDate().getMonth()];if(newDate().getMonth()==1&&IsPinYear(YYYYvalue))n++;writeDay(n);//赋日期下拉框document.form1.DD.value=newDate().getDate();}functionYYYYMM(str)//年发生变化时日期发生变化(主要是判断闰平年){varMMvalue=document.form1.MM.options[document.form1.MM.selectedIndex].value;if(MMvalue==""){DD.outerHTML=strDD;return;}varn=MonHead[MMvalue-1];if(MMvalue==2&&IsPinYear(str))n++;writeDay(n)}functionMMDD(str)//月发生变化时日期联动{varYYYYvalue=document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value;if(str==""){DD.outerHTML=strDD;return;}varn=MonHead[str-1];if(str==2&&IsPinYear(YYYYvalue))n++;writeDay(n)}functionwriteDay(n)//据条件写日期的下拉框{vars=strDD.substring(0,strDD.length-9);for(vari=1;i<(n+1);i++)s+="<optionvalue='"+i+"'>"+i+"</option>\r\n";document.form1.DD.outerHTML=s+"</select>";}functionIsPinYear(year)//判断是否闰平年{return(0==year%4&&(year%100!=0||year%400==0))}//--></script><td><selectname=YYYYonchange="YYYYMM(this.value)"></select><selectname=MMonchange="MMDD(this.value)"></select><selectname=DD></select></td></tr><tr><td>出生地：</td><td><selectname="province"onChange="getCity()"><optionvalue="null"selected="selected">请选择所在省份</option><optionvalue="直辖市">直辖市</option><optionvalue="河北">河北</option><optionvalue="山西">山西</option><optionvalue="内蒙古">内蒙古</option><optionvalue="辽宁">辽宁</option><optionvalue="吉林">吉林</option><optionvalue="黑龙江">黑龙江</option><optionvalue="江苏">江苏</option><optionvalue="浙江">浙江</option><optionvalue="安徽">安徽</option><optionvalue="福建">福建</option><optionvalue="江西">江西</option><optionvalue="山东">山东</option><optionvalue="河南">河南</option><optionvalue="湖北">湖北</option><optionvalue="湖南">湖南</option><optionvalue="广东">广东</option><optionvalue="广西">广西</option><optionvalue="海南">海南</option><optionvalue="四川">四川</option><optionvalue="贵州">贵州</option><optionvalue="云南">云南</opti

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论