回麻雀苑主页          

2.4规范、有输出修饰的注册表单处理

作者:老麻雀 2006/9/13 14:52:52

规范、有输出修饰的注册表单处理
  上面的注册表单,虽已较为规范。但输入“年龄”数据时,如果不是数字(比如是aa、x12等),或者是一些非法的数字(比如-3、1200等),动态网页的程序同样可以正常运行。而像这样的年龄是实际工作和生活所中不允许的。另外JSP动态网页的屏幕输出,一直是简单地把数据显示出来。本节将使屏幕输出带上一些修饰。
一、 范例的演示和代码清单
  演示步骤:
1. 启动JSP引擎后,启动IE,在地址栏键入http://127.0.0.1:8080/ch2/ch2-22.htm,如图2-11:
  
  图 2-11
2. 试着在“年龄”一项中,填送不是数字的数据或大于150小于0的数据,进行提交;
3. 完整规范的填写所有数据,进行提交。
  这组网页中注册用的表单处理程序,能够控制“年龄”表单项输入规范的数值。当输入非数字时,屏幕会提示“您填写年龄应输入数字,请重新填写!”,如果输入的数值不再0-150之间,屏幕会提示“您填写的年龄错误,请重新填写!”
  另外当规范输入所有数据提交后,屏幕上显示输出的注册结果是一个有颜色的表格,所有数据都美观正确地显示在表格的相应行列中。
两个网页的代码如下:
◇-◇-◇-◇-◇-◇-◇-◇-◇  修饰过的规范用户注册  ◇-◇-◇-◇-◇-◇-◇-◇
范例ch2-22.htm
1) <html>
2) <head>
3) <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
4) <title>修饰过的规范用户注册</title>
5) </head>
6)
7) <body bgcolor="#FFFFCC">
8) <!-- 在ch2-21的基础上,增加了“密码提示”、“密码答案”两个项目,并且在JSP屏幕输出时,进行一些美化。设置了字体、字号、对齐方式、颜色等,所有数据放在表格中,使之整齐美观。 -->
9) <h2 align="center"><font color="#000099"><em>新用户注册</em></font></h2>
10) <form name="form1" method="post" action="ch2-22.jsp">
11)   <p align="center"><font color="#CC0000">(注意,**号选项为必填项)
12)   </font></p>
13)   <table width="70%" border="0">
14)     <tr>
15)       <td width="23%"><div align="right">用户名:</div></td>
16)       <td width="36%"><input name="yonghuming" type="text" id="yonghuming" size="20"></td>
17)       <td width="41%">** 汉字,字母或数字</td>
18)     </tr>
19)     <tr>
20)       <td><div align="right">性 别:</div></td>
21)       <td><input name="xingbie" type="radio" value="男" checked>
22) 男
23)   <input type="radio" name="xingbie" value="女">
24) 女 </td>
25)       <td>**</td>
26)     </tr>
27)     <tr>
28)       <td><div align="right">年 龄: </div></td>
29)       <td><input name="nianling" type="text" id="nianling" size="8"></td>
30)       <td><p>** 1-150之间的数字</p>
31)       </td>
32)     </tr>
33)     <tr>
34)       <td><div align="right">密 码:</div></td>
35)       <td><input name="mima" type="password" id="mima" size="16"></td>
36)       <td>** 4-6位</td>
37)     </tr>
38)     <tr>
39)       <td><div align="right">重复密码:</div></td>
40)       <td><input name="mima2" type="password" id="mima2" size="16"></td>
41)       <td>**</td>
42)     </tr>
43)     <tr>
44)       <td><div align="right">学 历:</div></td>
45)       <td><select name="select" size="1">
46)         <option value="初中">初中</option>
47)         <option value="高中">高中</option>
48)         <option value="大专">大专</option>
49)         <option value="大学">大学</option>
50)         <option value="硕士研究生">硕士研究生</option>
51)         <option value="博士研究生">博士研究生</option>
52)       </select></td>
53)       <td>**</td>
54)     </tr>
55)     <tr>
56)       <td><div align="right">丢失密码提示:</div></td>
57)       <td><select name="tishi" id="tishi">
58)         <option value="一句成语">一句成语</option>
59)         <option value="电话号码">电话号码</option>
60)         <option value="单位名称或地址">单位名称或地址</option>
61)         <option value="汽车的牌号">汽车的牌号</option>
62)         <option value="宠物的名字">宠物的名字</option>
63)         <option value="饰物的名称">饰物的名称</option>
64)         <option value="最喜欢的物品">最喜欢的物品</option>
65)         <option value="家用电器的名称或品牌">家用电器的名称或品牌</option>
66)       </select></td>
67)       <td>**</td>
68)     </tr>
69)     <tr>
70)       <td><div align="right">找回密码答案:</div></td>
71)       <td><input name="daan" type="text" id="daan"></td>
72)       <td>** 大于4位</td>
73)     </tr>
74)     <tr>
75)       <td><div align="right">E-mail:</div></td>
76)       <td><input name="email" type="text" id="email"></td>
77)       <td>      **</td>
78)     </tr>
79)     <tr>
80)       <td>&nbsp;</td>
81)       <td>&nbsp;</td>
82)       <td>&nbsp;</td>
83)     </tr>
84)     <tr>
85)       <td><div align="right">
86)         <input type="submit" name="Submit3" value="提交">
87)       </div></td>
88)       <td><div align="center">
89)         <input type="reset" name="Submit2" value="重填">
90)       </div></td>
91)       <td><div align="center">
92)       </div></td>
93)     </tr>
94)   </table>
95)   <p>&nbsp; </p>
96) </form>
97) <p><em><font color="#000099"></font></em></p>
98) </body>
99) </html>
  
◇-◇-◇-◇-◇-◇-◇-◇-◇  修饰过的规范用户注册  ◇-◇-◇-◇-◇-◇-◇-◇
范例ch2-22.jsp
1) <%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" %>
2) <html>
3) <head>
4) <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5) <title>修饰过的规范用户注册</title>
6) <style type="text/css">
7) <!--
8) body {
9)  background-color: #FFFFcc;
10) }
11) .style8 {font-family: "楷体_GB2312"; font-weight: bold; color: #990000; }
12) .style10 {
13)  font-size: medium;
14)  font-weight: bold;
15)  font-style: italic;
16) }
17) .style11 {
18)  color: #3300CC;
19)  font-size: small;
20) }
21) .style17 {font-family: "楷体_GB2312"; font-weight: bold; color: #3300CC; font-size: small; }
22) -->
23) </style></head>
24) <body>
25) <!-- 在ch2-21的基础上,增加了“密码提示”、“密码答案”两个项目,并且在JSP屏幕输出时,进行一些修饰。设置了字体、字号、对齐方式、颜色等,所有数据放在表格中,使之整齐美观。 -->
26) <div align="center">
27)   <p>&nbsp;</p>
28)   <p><span class="style10">您注册的资料如下:</span>
29)     <%!
30)
31) String name;
32) String xingbie;
33) String nianling;
34) String password1;
35) String password2;
36) String xueli;
37) String tishi;
38) String daan;
39) String email;
40) %>
41)     <%
42) name=request.getParameter("yonghuming");
43) xingbie=request.getParameter("xingbie");
44) nianling=request.getParameter("nianling");
45) password1=request.getParameter("mima");
46) password2=request.getParameter("mima2");
47) xueli=request.getParameter("select");
48) tishi=request.getParameter("tishi");
49) daan=request.getParameter("daan");
50) email=request.getParameter("email");
51) if(name.equals("")||password1.equals("")||password2.equals("")||email.equals(""))
52) { out.print("**号选项为必填项,资料填写不完整,请重新填写!");
53)  return;
54)  }
55)  else if(!password1.equals(password2))
56) {out.print("密码和重复密码不一致,请重新输入密码!");
57) return;
58) }
59)  else if(password1.length()<4||password1.length()>6)
60)  {
61)  out.println("<P align="center"><font size="6" face="kai" color="#FF6699">您填写密码不在4-6位之间,请重新填写!</font></P>");
62)  out.println("<a href=ch2-22.htm>返回</a>");
63)  return; 
64)  }
65)  else if(email.indexOf("@")<=0||email.indexOf(".")<=0)
66)     {out.println("<P align="center">  <font size="6" face="kai" color="#FF6699">输入的E-mail地址不正确,请重新输入!</font></P>");
67)      out.println("<a href=ch2-22.htm>返回</a>");
68)      return;
69)     }
70)     else if(daan.length()<4)
71)  {
72)  out.println("<P align="center"><font size="6" face="kai" color="#FF6699">您填写找回密码答案少于4位,请重新填写!</font></P>");
73)  out.println("<a href=ch2-22.htm>返回</a>");
74)  return; 
75)  } 
76)    int g;
77) try {
78)    g = Integer.parseInt(nianling); 
79)       if(g<1||g>150)
80)        {
81)        out.println("<P align="center"><font size="6" face="kai" color="#FF6699">您填写的年龄错误,请重新填写!</font></P>");
82)        out.println("<a href=ch2-22.htm>返回</a>");
83)        return; 
84)        } 
85)     }
86) catch (NumberFormatException e) { 
87)  out.println("<P align="center"><font size="6" face="kai" color="#FF6699">您填写年龄应输入数字,请重新填写!</font></P>");
88)  out.println("<a href=ch2-22.htm>返回</a>");
89)  return; 
90)  } 
91)  
92) %>
93)   </p>
94) </div>
95) <table width="314" border="1" align="center" cellspacing="0" bordercolor="#3366FF" bgcolor="#ddeeff">
96)   <tr>
97)     <td width="126"><div align="right" class="style8 style11">用户名:</div></td>
98)     <td width="172"><span class="style17"><%=name%></span></td>
99)   </tr>
100)   <tr>
101)     <td><div align="right" class="style17">性别:</div></td>
102)     <td><span class="style17"><%=xingbie%></span></td>
103)   </tr>
104)   <tr>
105)     <td><div align="right" class="style17">年龄:</div></td>
106)     <td><span class="style17"><%=nianling%></span></td>
107)   </tr>
108)   <tr>
109)     <td><div align="right" class="style17">密码:</div></td>
110)     <td><span class="style17"><%=password1%></span></td>
111)   </tr>
112)   <tr>
113)     <td><div align="right" class="style17">学历:</div></td>
114)     <td><span class="style17"><%=xueli%></span></td>
115)   </tr>
116)   <tr>
117)     <td><div align="right" class="style17">提示问题:</div></td>
118)     <td><span class="style17"><%=tishi%></span></td>
119)   </tr>
120)   <tr>
121)     <td><div align="right" class="style17">密码答案:</div></td>
122)     <td><span class="style17"><%=daan%></span></td>
123)   </tr>
124)   <tr>
125)     <td><div align="right" class="style17">E-mail:</div></td>
126)     <td><span class="style17"><%=email%></span></td>
127)   </tr>
128) </table>
129) <p>&nbsp;</p>
130) <p> <a href="ch2-22.htm"><strong>返回表单</strong></a></p>
131) </body>
132) </html>
二、HTML表单的分析
  ch2-22.htm仍然和前面的表单相似,不再进行具体地分析。
  这里只说明添加“丢失密码提示”、“找回密码答案”两项的作用。注册用户难免忘记自己注册的密码,增加这两项既方便了用户,又避免了在数据库服务器上保存大量的无效数据。“丢失密码提示”使用下拉列表,可以方便用户也会使得到的数据规范化,“找回密码答案”限定大于4位,是为避免数据库中出现重复性数据,从而便于检索。
  至于“找回密码”网页的编制,要等到再学一些知识和技术后,才能体验。
三、JSP动态网页的分析
  ch2-22.jsp的代码大部分和ch2-21.jsp相同,只是在原有基础上,增加了“年龄”项输入控制功能的代码行和修饰性显示输出的代码行。下面就对该功能实现的代码行进行讲解。
  控制“年龄”输入格式的代码行:
76)    int g;
77) try {
78)    g = Integer.parseInt(nianling); 
79)       if(g<1||g>150)
80)        {
81)        out.println("<P align="center"><font size="6" face="kai" color="#FF6699">您填写的年龄错误,请重新填写!</font></P>");
82)        out.println("<a href=ch2-22.htm>返回</a>");
83)        return; 
84)        } 
85)     }
86) catch (NumberFormatException e) { 
87)  out.println("<P align="center"><font size="6" face="kai" color="#FF6699">您填写年龄应输入数字,请重新填写!</font></P>");
88)  out.println("<a href=ch2-22.htm>返回</a>");
89)  return; 
90)  } 
  这一段代码先定义整型变量g ,然后抛出异常,将nianling变量获得的字符串型数据转换成整型数据,并赋值给 g 。这时如果nianling变量获得的数据不能顺利转换,必然产生异常,86、87两行就会将异常捕捉到,并由屏幕输出提示文字。如果nianling变量获得的数据顺利转换,说明用户输入的是数字,在79行再判断是否在1-150之间,如果不在这个范围内,则屏幕输出提示文字。
  
   控制屏幕提示文字格式的代码行:
  在代码中有多处这样的代码行,以81行为例说明。这是在JSP输出语句中,嵌入HTML标记实现的。整个HTML标记语句,被放在一对“"”双引号中,使之成为一个字符串。
  其中,align="center" 设定的对齐方式(居中);
        font size="6" face="kai" 设定的字符大小(6)和字体(楷体);
     color="#FF6699" 设定的字符颜色(粉红色);
这些都是HTML超文本标记语言中常用的有关字符格式的标记;

   控制屏幕输出注册信息格式的代码行:
  从95行-128行是将注册信息输出到屏幕的代码。这是一段HTML的表格代码,注意这段代码的前面92行有一个“%>”标志,这说明已不属于JSP语句行。在设计制作ch2-22.jsp的过程中,这一部分可以在Dreamweaver的图形设计界面下进行。绘制一个2列8行的表格,设定好颜色、对齐方式、字符的各种格式等。在第一列键入说明文字。然后再处理第二列的输出内容。如图2-12所示:
  
  图 2-12
  
  第二列是对应“用户名”、“性别”、“年龄”等项目的具体数据。这些数据是前面JSP语句处理后,放在各个JSP变量中的。直接把JSP变量放置在对应的单元格中当然是不行的。但如果在单元格中放置JSP的输出语句就可以了。例如在对应“用户名”的单元格中,放置<% out.print(name);%>,或在单元格中放置<% =name;%>也能实现同样的效果。请注意,不能在Dreamweaver图形设计界面下键入JSP语句。要切换到代码界面下,找到相应的代码位置键入上述的JSP语句。这正充分体现了JSP动态网页是在HTML代码中嵌入java语句构成的本质。在代码界面下插入JSP语句后,切换回图形设计界面可以看到图2-13的状态:
  
  图 2-13
  此时发现插入JSP语句的位置,出现了一个图标 (表示此处有JSP语句)。用鼠标单击此图标,在Dreamweaver的属性面板中可看到“编辑”按钮,单击“编辑”按钮还可以修改刚刚输入JSP语句。
  在这个JSP动态网页中,使用的是上述第二种方法。这是另一种JSP卷标。
  需说明的是,JSP语句中的<%  %>卷标分为五种,他们有着不同的含义和用途。
  <%……程序代码…… ; %>     用于放置程序代码和一般变量定义语句;
  <%!……定义语句…… ; %>   用于定义变量、函数等,函数的定义必须在这个卷标中;
  <%=表达式;%>              用于得到表达式的结果;
  <% /*……注释语句……*/ %>   用于注释语句;
  <% @……编译指引……%>   用于放置动态网页的页命令。
  在以后的学习中,我们将对应相应的范例介绍上述卷标的具体使用方法。
  

 

 

我也说两句
游客于2011/6/13 15:48:48写道:
�ܺ��õ���ҵ��Ϣ��ѯ������ҵ��˾��ȫ��������ҵ��飬��ҵ��ַ����ҵ��Ʒ��� http://www.58586.co ��ҵ��վ����
引用并回复此评论
游客于2011/6/9 14:27:33写道:
�Ƽ�һ��dz�ʵ�õ���������������Ե���������������� http://www.tonnysoft.net   ���ص�ַhttp://www.tonnysoft.net/download.htm  �㷺Ӧ������С��ҵ��Ա�����Թ�������ļ�ع���� �ɰ�����ҵ�ϰ�ȫ������Ա��ʹ�õ��Ե�����������������,qq��أ�֧��Զ�̼�ع���� ����Ϊ�������������̣���ϵ���򣬿ɱ�������id��178�� �ɶ�����7���Żݣ�
引用并回复此评论
游客于2011/6/2 18:50:34写道:
С����,�������ߵ�����ϵ����� http://www.tiaoyin.net ��׼������������ʵ��
引用并回复此评论
游客于2011/5/30 15:16:43写道:
����ҵ��ҵ��ѯ����ҵ��Ϣ���� http://www.zhaomingqy.com
引用并回复此评论
游客于2011/5/30 11:50:40写道:
���ܻ����� http://www.shulin.me  ʵ�õļ��ܻ���ƽ̨
引用并回复此评论
游客于2011/5/28 19:11:37写道:
��ҵ��վ��ȫ����ҵ��Ʒ�������� http://www.fuwuqy.com
引用并回复此评论
游客于2011/5/28 13:02:25写道:
��ҵ���ܴ�ȫ����ҵ��վ��ȫ����ҵ��Ʒ�������� http://www.dianziqy.com
引用并回复此评论
游客于2011/4/5 16:13:45写道:
�ܺ��õ���ҵ��Ϣ��ѯ������ҵ��˾��ȫ��������ҵ��飬��ҵ��ַ����ҵ��Ʒ��� http://www.gongsiminglu.com ��Ѳ�ѯ
引用并回复此评论
游客于2011/4/1 20:39:43写道:
�dz����õ���ҵ��Ϣ��ѯ����������ҵ��飬��ҵ��ַ����ҵ��Ʒ��� http://www.chaxunqiye.com ��ʮ����ҵ��Ϣ��������Ѳ�ѯ
引用并回复此评论
游客于2011/3/29 17:54:47写道:
��װ���д����� www.duohaoa.net ʱ�з�װ����
引用并回复此评论
更多评论
E-File帐号:用户名: 密码: [注册]
评论:(内容不能超过500字,如果您不填写用户名和密码只能以游客的身份发表评论。)

*评论内容将在30分钟以后显示!
发表须知:
一、用户须严格遵守国家法律和政策,包括但不限于《全国人大常委会关于维护互联网安全的决定》、《信息网络传播权保护条例》等规定,审慎、合法地利用伊妃(E-file)平台发表言论、作品。
二、用户的言论、行为若涉嫌违法或侵权,用户可能被强制承担因该行为直接或间接导致的全部法律责任。依照法律法规规定,伊妃(E-file)运营方有义务提供用户资料,有义务和权利采取删除、屏蔽、断开链接等各种必要措施。
三、伊妃(E-file)中心授权网络法律专业研究服务机构“网络法苑”为用户及客户提供包括免费咨询在内的全方位的法律支持。

 

版权所有:段保珠   电话:64616239   E-mail:dbz@sina.com   京ICP备06044461号
阿酷科技 Arkoo.com 提供底层技术