jsp商城注册用户页面(1)

最近想自己做一个小项目,记录一下进度.

 

  注册用户页面:

 

View Code 
 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 &nbsp;
37                 <input type="checkbox" name="interest" value="vc">VC &nbsp;
38                 <input type="checkbox" name="interest" value="vb">VB &nbsp;
39                 <input type="checkbox" name="interest" value="C#">C# &nbsp;
40                 <input type="checkbox" name="interest" value=".net">.net &nbsp;
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>

 

没有美工..做的很难看.没办法..哈

 

后来根据数据库修改了一下:

View Code 
 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文件用于判断用户注册时候的合法输入:

View Code 
  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 }

posted on 2012-05-08 20:00  saobchj  阅读(323)  评论(0)  编辑  收藏  举报

导航