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> </td>
81) <td> </td>
82) <td> </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> </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> </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> </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写道：| 发表须知： 一、用户须严格遵守国家法律和政策，包括但不限于《全国人大常委会关于维护互联网安全的决定》、《信息网络传播权保护条例》等规定，审慎、合法地利用伊妃（E-file）平台发表言论、作品。 二、用户的言论、行为若涉嫌违法或侵权，用户可能被强制承担因该行为直接或间接导致的全部法律责任。依照法律法规规定，伊妃（E-file）运营方有义务提供用户资料，有义务和权利采取删除、屏蔽、断开链接等各种必要措施。 三、伊妃（E-file）中心授权网络法律专业研究服务机构“网络法苑”为用户及客户提供包括免费咨询在内的全方位的法律支持。 |
阿酷科技 Arkoo.com 提供底层技术