网页截图

登录

首先是登录页面。特别说明一下，如果真的要实现用户名和密码配对功能的话，要连接数据库做。因为这里我只是对JavaScript技术的学习，没有连接数据库，所以不论输入什么密码都会显示错误。

验证码是利用随机函数生成的，验证码的验证就是正则表达式的应用了。

点击小眼睛图标可以显示你输入的密码。

点验证码图片还可以换一张新的验证码。这次验证码输入正确了。

因为没有连数据库验证用户名和密码是否匹配，点登录是没有用滴（就算有用我也没做主页网站哈哈^_^）。

注册

在刚才的登录界面点击注册按钮，就可以转到注册页面。

填写信息啦，我写写写。注意爱好可以多选，但是学业只能单选哦。

咦，怎么除了姓名全写错了？这个格式检验功能也太精确了吧！（自卖自夸中，大家不要理我）

哦哦，这次基本写对了。

(づ｡◕‿‿◕｡)づ宝宝想再写一次？点重写，帮你重新开始。

代码

login.html

<script type="text/javascript">var str;window.addEventListener ("load",Cha,false);/*判断验证码是否正确*/function Code(){var scode=document.getElementById ("scode");var code=document.getElementById ("code");if(code.value==""||code.value!=str){scode.innerHTML="错误";scode.style.backgroundColor="red";}else{scode.innerHTML="正确";scode.style.backgroundColor="green";}}/*判断验密码格式是否正确*/function Password(){var password=document. getElementById("password");var spass=document.getElementById ("spanp");if(password.value==""){spass.innerHTML="错误";spass.style.backgroundColor="red";}else{spass.innerHTML="正确";spass.style.backgroundColor="green";}if(password.value.length<8||password.value.length>20){spass.innerHTML="错误";spass.style.backgroundColor="red";}else{spass.innerHTML="正确";spass.style.backgroundColor="green";}}/*判断用户名格式是否正确*/function Name(){var name=document.getElementById ("name");var sname=document.getElementById ("spann");if(name.value==""){sname.innerHTML="错误";sname.style.backgroundColor="red";}else{sname.innerHTML="正确";sname.style.backgroundColor="green";}}/*判断数据提交前数据的验证*/function Check(){var name=document.getElementById ("name");var password=document. getElementById("password");var sname=document.getElementById ("spann");var spass=document.getElementById ("spanp");var scode=document.getElementById ("scode");var c=true;var code=document.getElementById ("code");if(code.value==""||code.value!=str){CHa();c=false;scode.innerHTML="错误";scode.style.backgroundColor="red";}else{scode.innerHTML="正确";scode.style.backgroundColor="green";}if(name.value==""){sname.innerHTML="错误";sname.style.backgroundColor="red";c=false;}else{sname.innerHTML="正确";sname.style.backgroundColor="green";}if(password.value==""){spass.innerHTML="错误";spass.style.backgroundColor="red";c=false;}else{spass.innerHTML="正确";spass.style.backgroundColor="green";}if(password.value.length<8||password.value.length>20){spass.innerHTML="错误";spass.style.backgroundColor="red";c=false;}else{spass.innerHTML="正确";spass.style.backgroundColor="green";}return c;}function register(){window.location.href="register.html";}/*产生验证码*/function Cha(){var a=new Array(10);var k=0;for(k=0;k<10;k++){a[k]=k;}var t1=Math.round (Math.random()*9);var t2=Math.round (Math.random()*9);var t3=Math.round (Math.random()*9);var t4=Math.round (Math.random()*9);var ss=new Array(4);ss[0]=a[t1];ss[1]=a[t2];ss[2]=a[t3];ss[3]=a[t4];str=ss.join("");var pain=document.getElementById ("canv");var draw=pain.getContext("2d");draw.clearRect(0,0,60,60);draw.font="20px Times New Roman";draw.fillText(str,pain.width/10,pain.height/1.5);draw.stroke()}</script>

register.html

<script type="text/javascript">function Phone(){var sphone=document.getElementById("sph");var phone=document.getElementById("phone");var ph=true;if(phone.value==""){sphone.innerHTML="电话号码不能为空";sphone.style.backgroundColor="red";c=false;ph=false;}if(phone.value.length!=11){sphone.innerHTML="电话号码必须是11位";sphone.style.backgroundColor="red";c=false;ph=false;}if(isNaN(phone.value)){sphone.innerHTML="电话号码必须由数字组成";sphone.style.backgroundColor="red";c=false;ph=false;}if(ph){sphone.innerHTML="格式正确";sphone.style.backgroundColor="green";}}function Email(){var email=document.getElementById ("email");var semail=document.getElementById("se");var se=true;if(String(email.value).indexOf("@")==-1||String(email.value).indexOf(".")==-1){semail.innerHTML="格式不对";semail.style.backgroundColor="red";c=false;se=false;}else{if((String(email.value).indexOf("@")+1)==(String(email.value).indexOf("."))||(String(email.value).indexOf("@")-1)==(String(email.value).indexOf("."))||(String(email.value).indexOf("@"))>(String(email.value).indexOf("."))){semail.innerHTML="格式不对";email.style.backgroundColor="red";c=false;se=false;}else{var str=(String(email.value)). match("(.*?)(@)(.*)(\\.)(.*)");var h3=str[3];var h4=str[4];var h5=str[5];if(h3=="qq"||h3=="163"||h3=="sina"||h3=="sohu"){if(h3=="qq"){if(isNaN(str[1])){semail.innerHTML="格式不对"; semail.style.backgroundColor="red";se=false;}else if(str[1]. length<5|| str[1].length>11){semail.innerHTML="格式不对";semail.style.backgroundColor="red";se=false;}}}else{semail.innerHTML="格式不对";semail.style.backgroundColor="red";se=false;}if(h5!="com"){semail.innerHTML="格式不对";semail.style.backgroundColor="red";se=false;}}}if(se){semail.innerHTML="格式正确";semail.style.backgroundColor="green";}}function Confirm(){var scon=document.getElementById ("sc");var password=document. getElementById("passwd");var confirmpass=document. getElementById("conpass");var sc=true;if(confirmpass.value!=""){if(confirmpass.value!=password.value){scon.innerHTML="密码不一致";scon.style.backgroundColor="red"; sc=false;}}else{if(sp){scon.innerHTML="密码不一致"; scon.style.backgroundColor="red"; c=false;sc=false;}else{sc=false;}}if(sc){scon.innerHTML="正确";scon.style.backgroundColor="green";}}function Password(){var password=document. getElementById("passwd");var spass=document. getElementById("sp");var sp=true;if(password.value==""){spass.innerHTML="密码不能为空";spass.style.backgroundColor="red";sp=false;}if(password.value.length>20||password.value.length<8){spass.innerHTML="密码长度在8~20之间";spass.style.backgroundColor="red";sp=false;}if(sp){spass.innerHTML="正确";spass.style.backgroundColor="green";}}function Name(){var name=document. getElementById("name");var sname=document. getElementById("sn");if(name.value==""){sname.innerHTML="用户名不能为空";sname.style.backgroundColor="red";}else{sname.innerHTML="正确";sname.style.backgroundColor="green";}}function Check(){var name=document. getElementById("name");var password=document. getElementById("passwd");var email=document. getElementById("email");var phone=document. getElementById("phone");var confirmpass=document. getElementById("conpass");var sname=document. getElementById("sn");var spass=document. getElementById("sp");var semail=document. getElementById("se");var scon=document. getElementById("sc");var sphone=document. getElementById("sph");var c=true;var sp=true;var sn=true;var se=true;var sc=true;var ph=true;if(name.value==""){sname.innerHTML="用户名不能为空";sname.style.backgroundColor="red";c=false;sn=false;}if(password.value==""){spass.innerHTML="密码不能为空";spass.style.backgroundColor="red";c=false;sp=false;}if(password.value.length>20||password.value.length<8){spass.innerHTML="密码长度在8~20之间";spass.style.backgroundColor="red";c=false;sp=false;}if(phone.value==""){sphone.innerHTML="电话号码不能为空";sphone.style.backgroundColor="red";c=false;ph=false;}if(phone.value.length!=11){sphone.innerHTML="电话号码必须是11位";sphone.style.backgroundColor="red";c=false;ph=false;}if(isNaN(phone.value)){sphone.innerHTML="电话号码必须由数字组成";sphone.style.backgroundColor="red";c=false;ph=false;}if(confirmpass.value!=""){if(confirmpass.value!=password.value){scon.innerHTML="密码不一致"; scon.style.backgroundColor="red"; c=false;sc=false;}}else{if(sp){scon.innerHTML="密码不一致";scon.style.backgroundColor="red"; c=false;sc=false;}else{sc=false;}}if(String(email.value).indexOf("@")==-1||String(email.value).indexOf(".")==-1){semail.innerHTML="格式不对";semail.style.backgroundColor="red";c=false;se=false;}else{if((String(email.value).indexOf("@")+1)==(String(email.value).indexOf("."))||(String(email.value).indexOf("@")-1)==(String(email.value).indexOf("."))||(String(email.value).indexOf("@"))>(String(email.value).indexOf("."))){semail.innerHTML="格式不对"; semail.style.backgroundColor="red";c=false;se=false;}else{var str=(String(email.value )).match("(.*?)(@)(.*)(\\.)(.*)");var h3=str[3];var h4=str[4];var h5=str[5];if(h3=="qq"||h3=="163"||h3=="sina"||h3=="sohu"){if(h3=="qq"){if(isNaN(str[1])){semail.innerHTML="格式不对";semail.style.backgroundColor="red";c=false;se=false;}else if (str[1].length<5||str[1].length>11){semail.innerHTML="格式不对";semail.style.backgroundColor="red";c=false;se=false;}}}else{semail.innerHTML="格式不对";semail.style.backgroundColor="red";c=false;se=false;}if(h5!="com"){semail.innerHTML="格式不对";semail.style.backgroundColor="red";c=false;se=false;}}}if(sn){sname.innerHTML="格式正确";sname.style.backgroundColor="green";}if(se){semail.innerHTML="格式正确";semail.style.backgroundColor="green";}if(sc){scon.innerHTML="密码一致";scon.style.backgroundColor="green";}if(sp){spass.innerHTML="密码格式正确";spass.style.backgroundColor="green";}if(ph){sphone.innerHTML="格式正确";sphone.style.backgroundColor="green";}return c;}function Display(e){var node=document.getElementById ("basenews")var s=String (document.getElementById("bases").value);if(node.style.display=="block"){var st="+请填写基本信息";document.getElementById("bases").innerHTML=st;node.style.display="none";}else{var st="-请填写基本信息";document.getElementById("bases").innerHTML=st;node.style.display="block";}}function Display1(e){var node=document.getElementById ("hobbynews");var s=String (document.getElementById("hobbys").value);if(node.style.display=="block"){document.getElementById("hobbys").innerHTML="+请选择你的爱好";node.style.display="none";}else{document.getElementById("hobbys").innerHTML="-请选择你的爱好";node.style.display="block";}}function Display2(e){var node=document.getElementById ("professionnew");var s=String (document.getElementById("professions").value);if(node.style.display=="block"){var st="+请选择你的学业";document.getElementById("professions").innerHTML=st;node.style.display="none";}else{var st="-请选择你的学业";document.getElementById("professions").innerHTML=st;node.style.display="block";}}</script>请填写你的信息