JSP 的表單處理

JSP的表單處理

參數傳遞 • 在瀏覽程式輸入的URL網址，或是JSP程式將HTTP請求轉向到其它JSP程式時，都可以使用URL參數來傳遞資料。 • 如果在URL網址附加有參數，JSP程式可以使用request物件的方法來取得傳遞的參數值。

URL參數傳遞 • 在HTML超連結標籤<a href=“”>…</a>的href屬性後加上參數，如下所示： <a href=“Ch7_2next.jsp?Username=李小明 &Password=1234"> </a>

URL參數傳遞-取得URL傳遞的參數值 • 在JSP程式是使用request物件的方法取得URL參數值，如下所示： username = request.getParameter("Username"); password = request.getParameter("Password"); • 上述程式碼取得參數名稱是Username和Password的值。

HTML表單的用途 • JSP程式是在伺服端執行，換句話說，客戶端的HTML表單只是負責取得使用者輸入的資料，然後將輸入資料送到伺服端進行處理，如下圖所示：

HTML標籤建立網頁表單-說明 • 在HTML標籤關於HTML表單的標籤只有5個，如下表所示：

HTML標籤建立網頁表單-架構 • 網頁表單是上表HTML標籤的組合，基本表單的架構如下所示： <form name="name" method="post | get" action="URL" enctype="MIME"> <input type=…> <textarea> …. </textarea> <select> <option> …. </option> </select> <input type="submit" …> </form>

表單常用的輸入型態 • <input type=TEXT> • <input type=PASSWORD> • <input type=RADIO> • <input type=CHECK> • <input type=SELECT> • <input type=FILE> • <input type=TEXTAREA>

HTML標籤建立網頁表單-屬性說明 • name屬性：表單名稱。 • method屬性：設定資料送出方式，主要是針對伺服端處理，GET方法（不分大小寫）就是URL網址的參數傳遞，請處理方式和上一節相同，POST方法是使用HTTP通訊協定的標頭來傳遞欄位資料，如下所示： <form name="order" method="post"> </form> 表單發送方式設定為post，如此發送的資訊就不會出現在網址列。 • action屬性：設定JSP表單處理程式所在的路徑，也可以是URL網址，如下所示： <form name="order" method="post" action="Ch7_3_3.jsp"> </form> • enctype屬性：設定表單資料傳送時的編碼方式，預設使用application/x-www-form-urlencoded，除非使用在上傳檔案，否則並不用設定此屬性。

範例  <html> <head><title>Pass.htm</title></head> <body bgcolor="#FFFFFF"> <form action=“Pass.jsp" method="POST"> <h2>文字方塊與密碼欄位的表單</h2> <hr> 姓名:<input type="TEXT" name="Name" size="20"><br> 密碼:<input type="PASSWORD" name="Password" size="10"><br> <input type="SUBMIT" value="送出"> <hr> </form> </body> </html>

文字方塊與密碼欄位-表單欄位 • 文字方塊是使用最頻繁的表單欄位，因為它是直接傳遞使用者輸入的資料，例如：姓名、地址、電話等資料；密碼欄位只是輸入的字串以指定符號取代，在使用上和文字方塊並沒有什麼不同。

範例Pass.jsp  <%@ page contentType="text/html; charset=MS950"%> <html> <head><title>Pass.jsp</title></head> <body><h2>取得文字方塊與密碼欄位值</h2> <hr> <% String name, password; // 取得表單欄位變數值 name = request.getParameter("Name"); password = request.getParameter("Password"); if (name != null && password != null) { // 顯示欄位值 out.print("<b>request物件的方法:</b><br>"); out.print("使用者名稱: " + name + "<br>"); out.print("使用者密碼: " + password + "<br>"); } %> </body> </html>

執行結果

文字區域-表單欄位 • 文字區域和文字方塊都可以讓使用者輸入資料，其輸入的資料是完整段落或整篇文字，特別適合在地址、描述或備註等文字內容。

文字區域-取得欄位值 • 在JSP程式取得文字區域欄位內容，如下所示： address = request.getParameter("Address"); out.print(address.replaceAll("\r\n","<br>")); • 上述程式碼取得名為Address文字區域的內容，如果有換行，我們可以使用String物件的replaceAll()方法，將換行符號取代成<br>標籤。

TextArea.html <HTML> <HEAD> <TITLE>文字區的使用範例</TITLE> </HEAD> <BODY> <CENTER> <FONT SIZE = 5 COLOR = blue>文字區的使用範例</FONT> </CENTER> <HR> <P></P>  <FORM action="TextArea.jsp" method=post name=FORM1> <P>我是 <INPUT type=text name=tbxName></P> <P>我的留言:</P> <P><TEXTAREA rows=5 cols=30 name=txtaMsg></TEXTAREA></P> <INPUT type="submit" value="送出" name=submit1> <INPUT type="reset" value="清除" name=reset1> </FORM> </BODY> </HTML>

文字區的使用範例TextArea.jsp <%@ page contentType="text/html; charset=Big5" %> <HTML> <HEAD><TITLE>文字區的使用範例</TITLE></HEAD> <BODY> <CENTER> <FONT SIZE = 5 COLOR = blue>文字區的使用範例</FONT> </CENTER> <HR> <P></P> <H3> <FONT COLOR = RED>  <%= request.getParameter("tbxName") %> </FONT> 說...<BR>  <%= request.getParameter("txtaMsg") %> </H3> </BODY> </HTML>

核取方塊-表單欄位 • 核取方塊是一個開關，可以讓使用者選擇是否開啟指定功能或設定某些參數，核取方塊欄位能夠複選，因為每一個都是獨立的開關。

核取方塊-取得欄位值 • 核取方塊在表單欄位扮演的角色是一個開關，JSP程式取得核取方塊欄位內容是檢查是否是null，以判斷是否勾選，如下所示： if (request.getParameter("Tel") != null) { out.print("使用電話來確認<br>"); }

Check.html <HTML> <HEAD><TITLE>群組核取方塊的使用</TITLE></HEAD> <BODY> <CENTER> <FONT SIZE = 5 COLOR = blue>群組核取方塊的使用</FONT> </CENTER> <HR> <P></P>  <FORM action="CheckGroup.jsp" method=get name=FORM1> <P>如果參加國外旅遊您想到那些國家玩呢?</P> <P>  <INPUT type="checkbox" name=chkbx value="日本">日本 <INPUT type="checkbox" name=chkbx value="美國">美國 <INPUT type="checkbox" name=chkbx value="加拿大">加拿大 <INPUT type="checkbox" name=chkbx value="韓國">韓國 <INPUT type="checkbox" name=chkbx value="澳洲">澳洲 </P> <INPUT type="submit" value="送出" name=submit1> <INPUT type="reset" value="清除" name=reset1> </FORM> </BODY> </HTML>

群組核取方塊的使用Check.jsp <%@ page contentType="text/html; charset=Big5" %> <HTML> <HEAD><TITLE>群組核取方塊的使用</TITLE></HEAD> <BODY><CENTER><FONT SIZE = 5 COLOR = blue>群組核取方塊的使用</FONT></CENTER><HR> <H3> 您想到下面這些地方玩呀!<BR> <UL> <FONT COLOR = RED> <% //利用request物件的getParameterValues(),取得群組核取方塊的傳出值,並設定給chkbx字串陣列 String chkbx[] = request.getParameterValues("chkbx"); //利用java.lang.reflect套件Array物件的getLength方法取得陣列長度 int len = java.lang.reflect.Array.getLength(chkbx); for(int i = 0; i < len ; i++) //利用for迴圈輸出群組核取方塊傳出的值 out.println("<LI>" + chkbx[i] + "</LI>"); %> </FONT> </UL> </H3> </FONT> (表單的傳出值 <FONT COLOR = GREEN>  <%= java.net.URLDecoder.decode(request.getQueryString()) %> </FONT>) </BODY> </HTML>

下拉式清單方塊-表單欄位 • 下拉式清單方塊和選擇鈕的功能十分相似，都是選擇題，只不過以不同方式來顯示，而且下拉式清單方塊支援複選。

下拉式清單方塊-取得欄位值 • JSP程式是使用request物件的getParameter()方法取得下拉式清單方塊各選項的value屬性值，如下所示： int ship = Integer.parseInt(request.getParameter("Ship"));

範例  <%@ page contentType="text/html; charset=MS950"%> <html> <head><title>Ch7_3_6.jsp</title></head> <body><h2>取得下拉式清單方塊的欄位值</h2> <hr><b>request物件的方法:</b><br> <% int ship = Integer.parseInt(request.getParameter("Ship")); switch (ship) { case 1: out.print("使用郵寄<br>"); break; case 2: out.print("使用快遞<br>"); break; case 3: out.print("使用者自取<br>"); break; } %> </body> </html>

DropDown.html <HTML> <HEAD><TITLE>下拉清單的使用範例</TITLE></HEAD> <BODY> <CENTER> <FONT SIZE = 5 COLOR = blue>下拉清單的使用範例</FONT> </CENTER> <HR> <P></P>  <FORM action="DropDown.jsp" method=post name=FORM1> <P>我是 <INPUT type=text name=tbxName></P> <P>職業為  <SELECT name=slbJob size=1> <OPTION selected>學生</OPTION> <OPTION>公務員</OPTION> <OPTION>程式設計師</OPTION> <OPTION>SOHO族</OPTION> </SELECT> </P> <INPUT type="submit" value="送出" name=submit1> <INPUT type="reset" value="清除" name=reset1> </FORM> </BODY> </HTML>

下拉清單的使用範例DroupDown.jsp <%@ page contentType="text/html; charset=Big5" %> <HTML><HEAD><TITLE>下拉清單的使用範例</TITLE></HEAD> <BODY> <CENTER> <FONT SIZE = 5 COLOR = blue>下拉清單的使用範例</FONT> </CENTER> <HR> <P></P> <H3> <FONT COLOR = RED>  <%= request.getParameter("tbxName") %> </FONT> 您是一位 <FONT COLOR = BROWN>  <%= request.getParameter("slbJob") %> </FONT> </H3> </BODY> </HTML>

DroupDown1.jsp <%@ page contentType="text/html; charset=Big5" %> <HTML> <HEAD><TITLE>傳出值與選項值不同的範例</TITLE></HEAD> <BODY> <CENTER><FONT SIZE = 5 COLOR = blue>傳出值與選項值不同的範例</FONT></CENTER> <HR><P></P> <H3> <FONT COLOR = RED>  <%= request.getParameter("tbxName") %> </FONT> 您是一位 <FONT COLOR = BROWN> <% //取得slbJob控制項的傳出值，並轉換為整數 int slbJobVal = Integer.parseInt(request.getParameter("slbJob")); //依據slbJobVal的值, 利用switch敘述判斷顯示的字串 switch(slbJobVal) { case 1 : out.println("學生"); break; case 2 : out.println("公務員"); break; case 3 : out.println("程式設計師"); break; case 4 : out.println("SOHO族"); break; } %> </FONT><BR> 職業類別為 <FONT COLOR = BROWN>  <%= request.getParameter("slbJob") %> </FONT> <FONT COLOR = RED>(此為選項傳出值)</FONT> </H3> </BODY> </HTML>

List.html <HTML> <HEAD><TITLE>清單方塊的使用範例</TITLE></HEAD> <BODY> <CENTER><FONT SIZE = 5 COLOR = blue>清單方塊的使用範例</FONT></CENTER> <HR><P></P>  <FORM action="List.jsp" method=post name=FORM1> <P>我是 <INPUT type=text name=tbxName></P> <P>我要訂購</P> <P>  <SELECT name=lbxBook size=5> <OPTION value = "A9073" selected>Access 2000徹底研究</OPTION> <OPTION value = "A9193" >Access 2000 程式設計</OPTION> <OPTION value = "A0053" >Access 2000 網路應用</OPTION> <OPTION value = "P9067" >Visual C++ 入門進階</OPTION> <OPTION value = "P9127" >精通視窗程式設計</OPTION> </SELECT> </P> <INPUT type="submit" value="送出" name=submit1> <INPUT type="reset" value="清除" name=reset1> </FORM> </BODY> </HTML>

清單方塊的使用範例List.jsp <%@ page contentType="text/html; charset=Big5" %> <HTML> <HEAD><TITLE>清單方塊的使用範例</TITLE></HEAD> <BODY> <CENTER><FONT SIZE = 5 COLOR = blue>清單方塊的使用範例</FONT></CENTER> <HR><P></P> <H3> <FONT COLOR = RED>  <%= request.getParameter("tbxName") %> </FONT> 欲訂購 <FONT COLOR = BROWN> <% String selVal = request.getParameter("lbxBook"); //取得lbxBook清單方塊的傳出值 //利用if敘述比對selVal的值 if (selVal.equals("A9073")) out.println("Access 2000徹底研究"); else if (selVal.equals("A9193")) out.println("Access 2000 程式設計"); else if (selVal.equals("A0053")) out.println("Access 2000 網路應用"); else if (selVal.equals("P9067")) out.println("Visual C++ 入門進階"); else if (selVal.equals("P9127")) out.println("精通視窗程式設計"); %> </FONT> (書號為 <FONT COLOR = GREEN>  <%= request.getParameter("lbxBook") %> </FONT>) </H3> </BODY> </HTML>

選擇鈕-表單欄位 • 選擇鈕能夠在表單設計一組選項，在每一個選項名稱旁有一個圓形的選項鈕，建立多選一的單選題。

多選型清單方塊的使用Mlist.html <HTML> <HEAD><TITLE>多選型清單方塊的使用</TITLE></HEAD> <BODY> <CENTER><FONT SIZE = 5 COLOR = blue>多選型清單方塊的使用</FONT></CENTER> <HR><P></P>  <FORM action=“Mlist.jsp" method=get name=FORM1> <P>我是 <INPUT type=text name=tbxName></P> <P>我要訂購( <FONT COLOR = RED> 欲複選時請按住Ctrl鍵或Shift鍵後,再點選選項 </FONT>) </P> <P>  <SELECT name=lbxBook size=5 Multiple> <OPTION value = "A9073" selected>Access 2000徹底研究</OPTION> <OPTION value = "A9193" >Access 2000 程式設計</OPTION> <OPTION value = "A0053" >Access 2000 網路應用</OPTION> <OPTION value = "P9067" >Visual C++ 入門進階</OPTION> <OPTION value = "P9127" >精通視窗程式設計</OPTION> </SELECT> </P> <INPUT type="submit" value="送出" name=submit1> <INPUT type="reset" value="清除" name=reset1> </FORM> </BODY> </HTML>

Mlist.jsp <%@ page contentType="text/html; charset=Big5" %> <HTML> <HEAD><TITLE>多選型清單方塊的使用</TITLE></HEAD> <BODY> <CENTER><FONT SIZE = 5 COLOR = blue>多選型清單方塊的使用</FONT></CENTER> <HR><P></P> <H3> <FONT COLOR = RED>  <%= request.getParameter("tbxName") %> </FONT> 欲訂購<BR> <% //取得lbxBook控制項的傳出值, 傳出值為一字串陣列 String selAry[] = request.getParameterValues("lbxBook"); int selArylen = java.lang.reflect.Array.getLength(selAry); //取得陣列的長度 //利用for迴圈將selAry陣列中的元素取出, 並利用if判斷敘述進行比對 for(int i = 0; i < selArylen; i++) { %> <FONT COLOR = BROWN> <% //利用if敘述比對selAry字串陣列中的值 if (selAry[i].equals("A9073")) out.println("Access 2000徹底研究"); else if (selAry[i].equals("A9193")) out.println("Access 2000 程式設計"); else if (selAry[i].equals("A0053")) out.println("Access 2000 網路應用"); else if (selAry[i].equals("P9067")) out.println("Visual C++ 入門進階"); else if (selAry[i].equals("P9127")) out.println("精通視窗程式設計"); %> </FONT> (書號: <FONT COLOR = GREEN>  <%= selAry[i] %> </FONT>)<BR> <% } %> </H3> </FONT> (表單的傳出值 <FONT COLOR = GREEN>  <%= request.getQueryString() %> </FONT>) </BODY> </HTML>

Radio.html <HTML> <HEAD> <TITLE>選擇鈕的使用</TITLE> </HEAD> <BODY> <CENTER> <FONT SIZE = 5 COLOR = blue>選擇鈕的使用</FONT> </CENTER><HR><P></P>  <FORM action="Radio.jsp" method=post name=FORM1> <P>我是 <INPUT type=text name=tbxName></P> <P>我的職業是  <INPUT type="radio" name=rdoJob value="學生" checked>學生 <INPUT type="radio" name=rdoJob value="公務員">公務員 <INPUT type="radio" name=rdoJob value="程式設計師">程式設計師 <INPUT type="radio" name=rdoJob value="SOHO族">SOHO族 </P> <INPUT type="submit" value="送出" name=submit1> <INPUT type="reset" value="清除" name=reset1> </FORM> </BODY> </HTML>

Radio.jsp <%@ page contentType="text/html; charset=Big5" %> <HTML> <HEAD><TITLE>選擇鈕的使用</TITLE></HEAD> <BODY> <CENTER> <FONT SIZE = 5 COLOR = blue>選擇鈕的使用</FONT> </CENTER> <HR><P></P> <H3> <FONT COLOR = RED>  <%= request.getParameter("tbxName") %> </FONT> 您是一位 <FONT COLOR = BROWN>  <%= request.getParameter("rdoJob") %> </FONT> </H3> </BODY> </HTML>

getParameterValues用法 • 網頁常有一些核取方塊讓人選取輸入，網頁畫面如下 -------------------------------------------------- • 你希望學習哪些程式語言： □JSP□PHP□PERL

getvalue.html原始碼 <form name="checkform" method="post" action="getvalue.jsp"> 你希望學習哪些程式語言：<br> <input type="checkbox" name="langtype" value="JSP">JSP <input type="checkbox" name="langtype" value="PHP">PHP <input type="checkbox" name="langtype" value="PERL">PERL <input type="submit" name="b1" value="送出"> </form> 這些input type名稱都叫做langtype，如果用request.getParameter("langtype") 來取這些值，到底要取哪一個？所以在這個時候，不能用getParameter來取資料，而應該用getParameterValues來取資料，用這個方法，會將前端同名的input type以陣列的方式取回，所以可以宣告一個String的陣列來承接，

getvalue.jsp <%@ page contentType="text/html;charset=big5" session="false" import="java.io.*" %> <html> <head> <title>getParameterValues程式範例</title> <meta http-equiv="Content-Type" content="text/html; charset=big5"> </head> <body> <% String langtype[]=request.getParameterValues("langtype"); if (langtype!=null) //前端的使用者,如果沒打勾的話 { int size=java.lang.reflect.Array.getLength(langtype);//取得這個陣列大小 for (int i=0;i<size;i++) //利用一個for迴圈將陣列資料取出 { out.println(langtype[i]+"<br>");} } %> </body> </html>

隱藏欄位-HTML標籤 • 隱藏欄位並不會在表單網頁顯示輸入介面，它是直接將value屬性值傳送到伺服器，所以並不需要使用者輸入資料或進行選擇。 • 在HTML表單加上隱藏欄位的目的，就是將資料傳遞到Web伺服器，在JSP程式常常用來傳遞一些應用程式所需參數，例如：訂單號碼，或將上一步驟的欄位值傳到下一步驟的表單網頁。隱藏欄位的HTML標籤，如下所示： <input type="HIDDEN" name="Order" value="Order0001">

隱藏欄位-取得欄位值 • JSP程式是使用與文字方塊相同的方式來取得欄位值，如下所示： <% order = request.getParameter("Order"); %> <c:out value="${param.Order}" default="無編號"/>

隱藏欄位的使用 <%@ page contentType="text/html; charset=Big5" %> <HTML> <HEAD><TITLE>隱藏欄位的使用</TITLE></HEAD> <BODY> <CENTER><FONT SIZE = 5 COLOR = blue>隱藏欄位的使用</FONT></CENTER> <HR><P></P> <% //利用Time控制項是否有傳出值判斷該顯示題目還是該計算答案 //若Time控制項有傳出值時, request.getParameter("Time")將不會為null if (request.getParameter("Time") == null) { %>

 <FORM action="Hidden.jsp" method=post name=FORM1>  <INPUT type=hidden name=Time value="<%= new java.util.Date().getTime() %>">  <P>巴拿馬運河連接的是那兩大洋?</P> <P> <INPUT type="radio" name=rdoQ1 value=1>太平洋與大西洋 <INPUT type="radio" name=rdoQ1 value=2>大西洋與印度洋 <INPUT type="radio" name=rdoQ1 value=3>印度洋與太平洋 </P>  <P>馬雅文明位於那一洲?</P> <P> <INPUT type="radio" name=rdoQ2 value=1>北美洲 <INPUT type="radio" name=rdoQ2 value=2>南美洲 <INPUT type="radio" name=rdoQ2 value=3>歐洲 <INPUT type="radio" name=rdoQ2 value=4>亞洲 <INPUT type="radio" name=rdoQ2 value=5>非洲 </P>  <P>美國的首都是那一個城市?</P> <P> <INPUT type="radio" name=rdoQ3 value=1>紐約 <INPUT type="radio" name=rdoQ3 value=2>舊金山 <INPUT type="radio" name=rdoQ3 value=3>西雅圖 <INPUT type="radio" name=rdoQ3 value=4>華盛頓 </P>  <P>位於臺灣與菲律賓間的海峽是?</P> <P> <INPUT type="radio" name=rdoQ4 value=1>臺灣海峽 <INPUT type="radio" name=rdoQ4 value=2>直布羅陀海峽 <INPUT type="radio" name=rdoQ4 value=3>麻六甲海峽 <INPUT type="radio" name=rdoQ4 value=4>巴士海峽 </P>  <P>阿里山位於臺灣的那個縣?</P> <P> <INPUT type="radio" name=rdoQ5 value=1>嘉義縣 <INPUT type="radio" name=rdoQ5 value=2>台北縣 <INPUT type="radio" name=rdoQ5 value=3>雲林縣 <INPUT type="radio" name=rdoQ5 value=4>屏東縣 </P> <INPUT type="submit" value="我答完了" name=submit1> </FORM> <%

} //若Time控制項有傳出值表示應進行答案的計算 else { int RightAns = 0; //計算答對的題數 int aryAns[] = {1,2,4,4,1}; //建立儲存正確答案的陣列 //下面的for迴圈中, 將利用if判斷式進行答案的比對 for(int i = 0; i < 5 ; ++i) { //建立控制項名稱的字串 String conname = "rdoQ" + (i+1); //判斷是否可取得控制項傳出的資料, 無法取得將傳出null if(request.getParameter(conname) == null) { %> 第<%= i + 1%>題您<FONT COLOR = GREEN>未做答</Font><BR> <% } else { %> 第<%= i + 1%>題您答 <% //取得使用者所做答的答案 int Ans = Integer.parseInt(request.getParameter(conname)); //比對控制項回傳值與陣列中的正確答案, 相同表答對反之答錯 if( Ans == aryAns[i]) { RightAns = RightAns + 1; //答對題數加 1 %><FONT COLOR = GREEN>對</FONT>了<BR> <% } else { %> <FONT COLOR = RED>錯</FONT>了<BR><% } } } %> <H3> 五題中您共答對了 <FONT COLOR = RED> <%= RightAns %> </FONT> 題, 花了 <FONT COLOR = RED>  <%= ((new java.util.Date()).getTime() - Long.parseLong(request.getParameter("Time")))/1000 %> </FONT> 秒 </H3> <% } %> </BODY> </HTML>

同名與複選的表單欄位處理-說明 • 在HTML表單的欄位名稱可能同名，而且下拉式清單方塊允許複選，此時JSP程式是使用request物件的getParameterValues()方法，如下所示：

同名與複選的表單欄位處理-取得欄位值 • JSP程式是使用request物件的getParameterValues()方法取得選擇的字串陣列，如下所示： String[] langs = request.getParameterValues("Languages"); for ( int i = 0; i < langs.length; i++ ) out.print("[" + langs[i] + "]");

防止瀏覽器快取網頁 • 瀏覽器為了加速使用者的瀏覽速度，常會將瀏覽過的網頁快取到硬碟，下次瀏覽同一頁時，便去硬碟裡面去找，但現在的網頁常是動態的，為了避免使用者抓到硬碟內過期的資料，JSP可用下面的方式來防止瀏覽器快取住網頁，此方法便可保證使用者到這個網頁時始終都可看到最新的資料。

1.JSP語法 <% response.setHeader("Pragma","no-cache"); response.setHeader("Cache-Control","no-cache"); response.setDateHeader("Expires", 0); %> • 2.也可以用以下的HTML語法，可用在靜態網頁上 <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> 注意，這些HTML語法要下在<head></head>的標籤內。

網頁表單欄位的驗證方式 • 在網頁表單欄位的驗證過程中，可以在兩個地方進行把關，如下所示： • 客戶端表單欄位驗證：客戶端欄位驗證是指在尚未送到伺服端前，在客戶端的瀏覽程式進行檢查，目前來說，主要是使用JavaScript或VBScript等腳本語言進行表單欄位檢查。 • 伺服端表單欄位驗證：相對於客戶端的欄位驗證，伺服端的表單欄位驗證是在資料送到伺服端後，才進行資料檢查，也就是使用JSP程式碼進行欄位檢查。

在客戶端進行資料檢查DataCheck.html <HTML> <HEAD><TITLE>在客戶端進行資料檢查</TITLE></HEAD> <BODY> <CENTER><FONT SIZE = 5 COLOR = blue>在客戶端進行資料檢查</FONT></CENTER> <HR> <P></P> <SCRIPT Language=javascript>  </SCRIPT> <FORM action="DataCheck.jsp" method=POST name=form1> <P>姓名 : <INPUT type="text" name=tbxName></P> <P>E-Mail : <INPUT type="text" name=tbxE_Mail></P> <INPUT type="button" value="寫好了" name=button1 OnClick='CheckData()'> </FORM> </BODY> </HTML>

在客戶端進行資料檢查DataCheck.jsp <%@ page contentType="text/html; charset=Big5" %> <HTML> <HEAD><TITLE>在客戶端進行資料檢查</TITLE></HEAD> <BODY> <CENTER> <FONT SIZE = 5 COLOR = blue>在客戶端進行資料檢查</FONT> </CENTER> <HR><P></P> <FONT SIZE = 4 COLOR = red>通過資料檢查!!</FONT> <P>您的大名是"<%= request.getParameter("tbxName")%>"</P> <P>E-Mail帳號為"<%= request.getParameter("tbxE_Mail") %>"</P> </BODY> </HTML>

伺服端的表單欄位驗證-說明 • JSP程式在取得表單欄位值後，在真正處理前，可以使用if條件敘述來檢查使用者輸入的欄位資料是否正確，或是忘了輸入指定的欄位資料。 • 如果輸入的資料錯誤，JSP程式並不會進行處理，而是顯示錯誤訊息，然後回到表單網頁要求使用者重新輸入。

JSP 的表單處理

JSP 的表單處理

Presentation Transcript