家庭记账本web开发：
用了之前没怎么用过的css以及完善了之后的Javastrip，我的速度真慢T_T，
登录界面：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>家庭记账本</title> <style type="text/css">/*设置CSS样式*/ input[type=text]{ color: #0099FF; width: 200px; height: 20px; outline-color:aliceblue; } input[type=password]{ color: #0099FF; width: 200px; height: 20px; } body{ background-image: url(image/u=2811972558,2224783843&fm=26&gp=0.jpg); background-size: 100vw 100vh; } div{ background-color:white; width: 300px; top:100px; left: 200px; } </style> </head> <script>/*给标签绑定函数验证表单*/ window.onload=function(){ var name=document.getElementById("name") var setbtn=document.getElementById("setbtn") var form=document.getElementById("loginform") setbtn.onclick=function(){ form.action="setuser.html" form.method="get" form.submit() } var loginbtn=document.getElementById("loginbtn") loginbtn.onclick=function(){ form.action="Aservlet?method=login" form.submit() } } </script> <body> <div id="div1"> <h2 align="center"><font size="5" color="skyblue">家庭记账本账号注册系统</font></h2> <form action="Aservlet" method="post" id="loginform"> <center>账号<input type="text" id="name" name="name" align="right"/><span id="YN"></span><br><br> 密码<input type="password" id="pass" name="password" align="center"/><span id="YP"></span><br> <input type="button" id="loginbtn" value="登录" align="center" name="login"/> <input type="button" id="setbtn" value="注册" align="center" name="set"/> </center> </form> </div> </body> </html>
注册界面：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>家庭记账本</title> 6 <style type="text/css"> 7 input[type=text]{ 8 color: #0099FF; 9 width: 200px; 10 height: 20px; 11 outline-color:aliceblue; 12 } 13 input[type=password]{ 14 color: #0099FF; 15 width: 200px; 16 height: 20px; 17 18 19 } 20 body{ 21 background-image: url(image/u=2811972558,2224783843&fm=26&gp=0.jpg); 22 background-size: 100vw 100vh; 23 } 24 div{ 25 background-color:white; 26 width: 300px; 27 /*position: absolute; 28 top:100px; 29 left: 200px;*/ 30 } 31 32 </style> 33 </head> 34 <script> 35 window.onload=function(){ 36 var name=document.getElementById("name") 37 var pass=document.getElementById("pass") 38 var pass2=document.getElementById("pass2") 39 var setbtn=document.getElementById("setbtn") 40 var form=document.getElementById("loginform") 41 name.onblur=function(){ 42 if(name.value.length>10||name.value.length<3) 43 { 44 var span=document.getElementById("YN") 45 span.innerHTML="账号长度请保持在【3~10】！" 46 }else{ 47 var span=document.getElementById("YN") 48 span.innerHTML="" 49 } 50 } 51 pass.onblur=function(){ 52 if(pass.value.length!=6) 53 { 54 var span=document.getElementById("YP") 55 span.innerHTML="密码长度为6位！" 56 if(pass.value==pass2.value){ 57 var span=document.getElementById("YP2") 58 span.innerHTML="" 59 } 60 }else{ 61 var span=document.getElementById("YP") 62 span.innerHTML="" 63 } 64 } 65 pass2.onblur=function(){ 66 if(pass.value!=pass2.value) 67 { 68 var span=document.getElementById("YP2") 69 span.innerHTML="前后密码不一致！" 70 }else{ 71 var span=document.getElementById("YP2") 72 span.innerHTML="" 73 } 74 } 75 setbtn.onclick=function(){ 76 form.action="Aservlet?method=set" 77 var a=document.getElementById("YP").value==undefined&&document.getElementById("YP2").value==undefined&&document.getElementById("YN").value==undefined 78 if(a){ 79 form.submit() 80 }else{ 81 alert("注册失败，表单有误！") 82 } 83 } 84 } 85 </script> 86 <body> 87 <div id="div1"> 88 <h2 align="center"><font size="5" color="skyblue">家庭记账本账号注册系统</font></h2> 89 <form action="Aservlet" method="post" id="loginform"> 90 <center> 91 账号<input type="text" id="name" name="name" align="right"/><br><span id="YN"></span><br> 92 密码<input type="password" id="pass" name="password" align="center"/><br><span id="YP"></span><br> 93 确认密码<input type="password" id="pass2" name="password" align="center"/><br><span id="YP2"></span><br><br> 94 <input type="button" id="setbtn" value="注册" align="center" name="set"/> 95 </center> 96 </form> 97 </div> 98 </body> 99 </html>
