jsp商城注册用户页面(1)
最近想自己做一个小项目,记录一下进度.
注册用户页面:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <%@ page language="java" contentType="text/html; charset=GB18030" 2 pageEncoding="GB18030"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> 7 <title>注册界面</title> 8 </head> 9 <body> 10 <table border="2" width="90%" height="90%"> 11 <tr> 12 <td colspan="2"><center>用户注册</center></td> 13 </tr> 14 15 <tr> 16 <td>用户名:</td> 17 <td><input type="text" name="username"></td> 18 </tr> 19 20 <tr> 21 <td>密码:</td> 22 <td><input type="password" name="password"></td> 23 </tr> 24 25 <tr> 26 <td>性别:</td> 27 <td> 28 <input type="radio" name="sex" value="male">男 29 <input type="radio" name="sex" value="female">女 30 </td> 31 </tr> 32 33 <tr> 34 <td>兴趣:</td> 35 <td> 36 <input type="checkbox" name="interest" value="java">Java 37 <input type="checkbox" name="interest" value="vc">VC 38 <input type="checkbox" name="interest" value="vb">VB 39 <input type="checkbox" name="interest" value="C#">C# 40 <input type="checkbox" name="interest" value=".net">.net 41 </td> 42 </tr> 43 44 <tr> 45 <td>来自:</td> 46 <td> 47 <select name="from"> 48 <option value="china">中国</option> 49 <option value="au">澳洲</option> 50 <option value="holland">荷兰</option> 51 <option value="uk">英国</option> 52 <option value="usa">美国</option> 53 </select> 54 </td> 55 </tr> 56 57 <tr> 58 <td>自我介绍:</td> 59 <td> 60 <textarea rows="10" cols="100"></textarea> 61 </td> 62 </tr> 63 </table> 64 </body> 65 </html>
没有美工..做的很难看.没办法..哈
后来根据数据库修改了一下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <%@ page language="java" contentType="text/html; charset=GB18030" 2 pageEncoding="GB18030"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> 7 <script type="text/javascript" src="scripts/regcheckdata.js"></script> 8 <title>注册界面</title> 9 </head> 10 <body> 11 12 <form action="#" method="get"> 13 14 <!-- 判断是否经过注册回来 --> 15 <input type="hidden" name="action" value="register"> 16 17 <table border="2" width="90%" height="90%"> 18 <tr> 19 <td colspan="2"><center>用户注册</center></td> 20 </tr> 21 22 <tr> 23 <td>用户名:</td> 24 <td><input id="username" type="text" name="username"></td> 25 </tr> 26 27 <tr> 28 <td>密码:</td> 29 <td><input type="password" name="password"></td> 30 </tr> 31 32 <tr> 33 <td>密码确认:</td> 34 <td><input type="password2" name="password"></td> 35 </tr> 36 37 <tr> 38 <td>电话号码:</td> 39 <td><input type="text" name="phone"></td> 40 </tr> 41 42 <tr> 43 <td>地址:</td> 44 <td><input type="text" name="address"></td> 45 </tr> 46 47 <tr> 48 <td></td> 49 <td> 50 <input type="submit" value="注册" onclick="return checkdata()"> 51 <input type="reset" value="重置" > 52 </td> 53 </tr> 54 </table> 55 </form> 56 </body> 57 </html>
然后在写一个js文件用于判断用户注册时候的合法输入:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 function checkdata(){ 2 var ssn = document.getElementById("username").value; 3 var password = document.getElementById("password").value; 4 var password2 = document.getElementById("password2").value; 5 var phone = document.getElementById("phone").value; 6 var address = document.getElementById("address").value; 7 8 if(ssn == ""){ 9 alert("用户名不能为空!"); 10 document.getElementById("username").focus(); 11 return false; 12 } 13 14 if(isWhiteSpace(ssn)){ 15 alert("用户名不能包含空格!"); 16 document.getElementById("username").focus(); 17 return false; 18 } 19 20 if(strlen(ssn)<6 || strlen(ssn)>16){ 21 alert("用户名应在6-16位之间!"); 22 document.getElementById("username").focus(); 23 return false; 24 } 25 26 if(password == ""){ 27 alert("密码不能为空!"); 28 document.getElementById("password").focus(); 29 return false; 30 } 31 32 if(strlen2(password)){ 33 alert("密码不能有中文!"); 34 document.getElementById("password").focus(); 35 return false; 36 } 37 38 if(strlen(password)<6 || strlen(password)>16){ 39 alert("密码应在6-16位之间!"); 40 document.getElementById("password").focus(); 41 return false; 42 } 43 44 if(password2 == ""){ 45 alert("请再次输入密码!"); 46 document.getElementById("password2").focus(); 47 return false; 48 } 49 50 if(password != password2){ 51 alert("两次密码不同,请再次输入密码!"); 52 document.getElementById("password2").focus(); 53 return false; 54 } 55 56 if(ssn == password){ 57 alert("用户名和密码不能相同!"); 58 document.getElementById("password").focus(); 59 return false; 60 } 61 62 if(phone == ""){ 63 alert("电话不能为空!"); 64 document.getElementById("phone").focus(); 65 return false; 66 } 67 68 if(address == ""){ 69 alert("地址不能为空!"); 70 document.getElementById("address").focus(); 71 return false; 72 } 73 74 return true; 75 } 76 77 //判断字符串长度 78 function strlen(str){ 79 var i; 80 var len=0; 81 for(i=0;i<str.length;i++){ 82 if(str.charCodeAt(i)>255){ 83 //中文 84 len += 2; 85 } 86 else{ 87 len++; 88 } 89 } 90 return len; 91 } 92 93 //判断是否含有非法字符 94 function strlen2(str){ 95 var i; 96 for(i=0;i<str.length;i++){ 97 if(str.charCodeAt(i)>255){ 98 //中文 99 return true; 100 } 101 } 102 return false; 103 } 104 105 //是否包含空格 106 function isWhiteSpace(str){ 107 var whitespace = " \t\n\r"; 108 var i; 109 for(i=0;i<str.length;i++){ 110 var c = str.charAt(i); 111 if(whitespace.indexOf(c)>=0){ 112 return true; 113 } 114 115 } 116 return false; 117 }