动态网页程序设计-实验报告-用户注册界面设计

单个实验报告·首页1一、实验目的综合利用前面几章学习的知识，编写一动态网站或管理系统的用户注册流程，以加强学生的综合知识运用能力。二、实验内容必做部分:1.设计用于输入注册信息的表单2.对注册信息进行如下完整性判断：a)密码为数字与字母组合，必须大于7位；b)注册时两次输入的密码必须相同；c)身份证号码为16或18位数字；d)注册邮箱格式为：***@***格式；e)学生自行想到的其他条件。3.根据完整性判断情况，转向或重定向到相应的注册成功或注册失败页面，即如输入无误，转入注册成功页面并输出注册信息，否则请求重定向到注册失败页面，并显示失败原因。也可以在输入注册信息时实时判断其是否满足要求。选做部分：1.防止恶意的批量注册；2.统计有效的注册人数；3.学生设计的其他功能。三、实验原理在HTML的表单中填入相应的数据，即输入注册信息，提交并进行解析，对输入的注册信息进行校验判断，如输入无误，转入注册成功页面并输出注册信息，否则请求重定向到注册失败页面，并显示失败原因。四、主要仪器设备或实验条件1.硬件：计算机2.软件：JDK、Tomcat、MyEclipse或Dreamweaver或其他动态网站编程软件。五、实验步骤（含实验数据记录处理）或操作设计过程记录1.总体设计（自己设计了几个文件（比如可以通过例如下面的截图方式展示），以及每个文件的主要功能、文件之间的关系）单个实验报告·首页2Login.html是主要的运行页面1.css是login.html中的样式2.js是login.html判断输入正确性的function集合Index.jsp无用Print.jsp是login.Html输入正确后跳转的位置Yanzheng.js是验证码的生成和验证函数Sta.js是点击输入框，恢复初始设置的函数集以及最后提交，判断全部内容是否符合条件函数的存储位置2.实验结果（利用网页截图和必要的文字说明来阐述你所设计的作品）注册界面的整体格式如图所示如图是输入正确格式后的显示界面，如果显示正确，则符合提交的条件，可以跳转单个实验报告·首页3如图是跳转后的界面如果输入有问题，为空，不符合条件，会用红字表明用验证码可以防止多次的恶意注册代码：login.Html主页面代码：htmlheadmetacharset=GB2312scripttype=text/javascriptsrc=2.js/scriptscripttype=text/javascriptsrc=sta.js/scriptscripttype=text/javascriptsrc=yanzheng.js/scriptstyletype=text/css@importurl(1.css);/style单个实验报告·首页4/headbodyformname=regFormaction=print.jspmethod=getonsubmit=returncheckall()divclass=divtitledivclass=divclassspanclass=title用户名:    /spaninputplaceholder=输入你想注册的用户名type=textname=inAccountclass=inputtextid=inuseronclick=stauser()spanclass=noteid=usernote长度在4位以上,不能包含空格,不能是纯数字/span/divdivclass=divclassspanclass=title密码:      /spaninputplaceholder=输入密码type=passwordid=passclass=inputtextname=inpassonclick=checkuser(),stapass()spanclass=noteid=passnote8-20位字符，数字与字母结合/span/divdivclass=divclassspanclass=title重复密码:/spaninputplaceholder=再次输入密码type=passwordname=inpass2id=pass2class=inputtextonclick=stapass2(),checkuser(),checkpass()spanid=passnote2class=note/span/divdivclass=divclassspanclass=title身份证号:/spaninputplaceholder=请输入你的身份证号type=textname=inIDid=IDclass=inputtextonclick=staid(),checkuser(),checkpass(),checkpass2()spanclass=noteid=idnote请输入正确的身份证号/span/divdivclass=divclassspanclass=title注册邮箱:/spaninputplaceholder=请输入你的邮箱type=textname=inemailid=emailclass=inputtextonclick=staemail(),checkuser(),checkpass(),checkpass2(),checkid()spanclass=noteid=emailnote请输入正确的邮箱([e-mail])/span/divdivdivclass=divyangzhengtableborder=0trtdrowspan=2spanclass=title验证码:    /span/td单个实验报告·首页5tdrowspan=2inputplaceholder=请输入验证码id=inputCodeonclick=createCode(4),checkemail()/input/tdtddivid=checkCodeclass=codeonclick=createCode(4)/div/tdtdrowspan=2spanclass=noteid=codenote/span/td/trtrtdspanclass=noseeonclick=createCode(4)看不清换一张/span/td/tr/table/divdivclass=logCinputtype=submitname=submitclass=logCvalue=提交onclick=checkemail(),validateCode()/div/div/div/form/body/html1.css是login.html中的样式.divtitle{width:500px;float:center;background-image:url(2.jpg);margin:0auto;margin-top:100px;}.inputtext{margin-left:16px;}.inputcode{margin-left:10px;}.divclass{margin-bottom:16px;}.divyangzheng{margin-bottom:15px;}.note{color:#bbb;font-size:9px;}.notediv{width:160px;height:20px;单个实验报告·首页6}.logC{width:100%;height:45px;background-color:green;border:none;color:white;font-size:18px;}.code{font-family:Arial;font-style:italic;color:blue;font-size:30px;border:0;padding:2px3px;letter-spacing:3px;font-weight:bolder;float:right;cursor:pointer;width:150px;height:50px;line-height:60px;text-align:center;vertical-align:middle;background-color:#D8B7E3;}.nosee{font-size:10px;margin-left:40px;}2.js是login.html判断输入正确性的function集合functioncheckuser(){varuser1=document.getElementById(inuser).value;varuser2=document.getElementById(usernote);varre1=/^[0-9]*$/;if(user1==)单个实验报告·首页7{user2.innerText=用户名不能为空;user2.style.color=red;}elseif(user1.length4&&user1.length0){user2.innerText=用户名不能小于4位;user2.style.color=red;}elseif(re1.test(user1)&&user1!=){user2.innerText=请输入合法用户名;user2.style.color=red;}else{user2.innerText=正确;user2.style.color=green;}}functioncheckpass(){varpwd=document.getElementById(pass).value;varuser2=document.getElementById(passnote);varre2=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;if(pwd==){user2.innerText=密码不能为空;user2.style.color=red;}elseif(pwd.length8&&pwd.length0){user2.innerText=密码不能小于8位;user2.style.color=red;}elseif(!re2.test(pwd)){user2.innerText=密码必须是数字和字母的组合！！！;user2.style.color=red;}else{user2.innerText=正确;user2.style.color=green;}}functioncheckpass2(){单个实验报告·首页8varpwd1=document.getElementById(pass).value;varpwd2=document.getElementById(pass2).value;varuser2=document.getElementById(passnote2);if(pwd1!=pwd2){user2.innerText=两次密码不一致！！！;user2.style.color=red;}elseif(pwd2!=){user2.innerText=正确;user2.style.color=green;}}functioncheckid(){varID1=document.getElementById(ID).value;varuser2=document.getElementById(idnote);varre3=/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|