JSP入門教程之用戶端驗證、常用輸出方式及JSTL基本用法_JSP編程

本文講述了JSP入門教程之用戶端驗證、常用輸出方式及JSTL基本用法。分享給大家供大家參考。具體如下：

一、目標：

① 掌握用戶端驗證的基本過程；
② 掌握JSP輸出資訊的方式；
③ 掌握JSTL的基本用法。

二、主要內容：

① 通過執行個體介紹用戶端驗證的基本過程；
② 介紹JSP輸出資訊的基本方式；
③ 通過執行個體分析介紹JSTL的基本用法。

用戶端驗證相關的代碼在網路上隨處可見，並且非常通用，所以一般情況下不需要大家自己編寫，但是需要知道如何使用、如何修改。下面介紹基本的使用過程：

1、如何嵌入JavaScript代碼

使用JavaSript程式碼完成使用者輸入資訊的用戶端驗證，在頁面中嵌入JavaScript代碼的過程如下：

<script language="JavaScript"> // 在此處嵌入JavaScript代碼</script>

JavaScript代碼必須在這個開始標識和結束標誌之間。

2、如何寫JavaScript方法

各種驗證過程都是以方法的形式存在，JavaScript方法的定義方式如下：

function 方法名(參數列表){ // 方法體}

與Java中的方法定義不同，function聲明要定義方法，不需要傳回值類型，可以返回任意結果，參數列表不需要給出參數的類型。下面是一個方法的例子：

function validate(form){ …}

下面是一個完成用於判斷參數是否是數位方法：

// 判斷是否是數字function isNumber(str){  for(i=0;i<str.length;i++)  {   // 如果要判斷小數，需要判斷小數點   if(str.charAt(i)>='0' && str.charAt(i)<='9'    || str.charAt(i)=="-" && i==0)    continue;   else    return false;  }  return true;}

3、如何建立表單提交與驗證方法之間的關聯?

使用表單form的onsubmit事件完成。

<form name="form1" method="post"action="process.jsp" onsubmit="return isValidate(form1)">

其中：onsubmit="return isValidate(form1)"部分是對驗證方法的調用。

注意：這時候使用的是form的提交事件，使用的是提交按鈕。

也可以把提交按鈕修改成普通按鈕，然後使用按鈕的onClick事件調用驗證方法。

4、在進行驗證的時候要擷取輸入的資訊，如果擷取？

表單的名字直到表單元素，再得到值。例如：

複製代碼 代碼如下:

userid = form.userid.value;

變數不需要定義可以直接使用。

5、執行個體：對註冊功能中的使用者名稱和口令進行驗證

<%@ page contentType="text/html;charset=gb2312"%><script language="JavaScript"> // 進行驗證的方法 function isValidate(form){  userid = form.userid.value;  if(userid==""){   alert("使用者ID不可為空");   return false;  }else if(userid.length>8 || userid.length<6){   alert("長度應該為6－8位");   return false;  }  userpass=form.userpass.value;  if(userpass.length!=8){   alert("口令的長度不為8！");   return false;  }  return true; }</script>請註冊<br><form name="form1" method="post" action="process.jsp" onsubmit="return isValidate(form1)"> 使用者ID：<input type="text" name="userid">使用者ID長度為6－8位<br> 口令：<input type="password" name="userpass">要求口令長度為8<br> 確認口令：<input type="password" name="userpass1"><br> 性別：<input type="radio" name="sex" value="男" checked>男   <input type="radio" name="sex" value="女">女<br> 愛好：<input type="checkbox" name="fav" value="運動">運動   <input type="checkbox" name="fav" value="音樂">音樂   <input type="checkbox" name="fav" value="編程">編程<br> 學曆：  <select name="degree">   <option value="本科">本科</option>   <option value="碩士">碩士</option>   <option value="專科">專科</option>   <option value="博士">博士</option>  </select><br> 備忘：  <textarea name="comment"></textarea><br>  <input type="submit" value="提交"><input type="reset" value="重設"></form>

6、常用的驗證：通過regiest.jsp檔案介紹

這個驗證不是最全面的，也不是最優的，如果你需要可以通過網路尋找，另外可以查閱JavaScript相關書籍，有很多現成的JavaScript方法可以使用。另外在進行用戶端驗證的時候可以使用Regex，並且比較方便。

下面的代碼供參考：

<%@ page contentType="text/html;charset=gb2312"%><script language="JavaScript"> function isValidate(form) {  // 得到使用者輸入的資訊  userid = form.userid.value;  username = form.username.value;  userpass = form.userpass.value;  userpass2 = form.userpass2.value;  birthday = form.birthday.value;  email = form.email.value;  address = form.address.value;  phone = form.phone.value;  // 判斷使用者ID長度  if(!minLength(userid,6))  {   alert("使用者ID長度小於6位！");   form.userid.focus();   return false;  }  if(!maxLength(userid,8))  {   alert("使用者ID長度大於8位！");   form.userid.focus();   return false;  }  // 判斷使用者名稱長度  if(!minLength(username,6))  {   alert("使用者名稱長度小於6位！");   form.username.focus();   return false;  }  if(!maxLength(username,8))  {   alert("使用者名稱長度大於8位！");   form.username.focus();   return false;  }  // 判斷口令長度  if(!minLength(userpass,6))  {   alert("口令長度小於6位！");   form.userpass.focus();   return false;  }  if(!maxLength(userpass,8))  {   alert("口令長度大於8位！");   form.userpass.focus();   return false;  }  // 判斷使用者名稱和口令是否相同  if(username==userpass)  {   alert("使用者名稱和口令不能相等！");   form.userpass.focus();   return false;  }  // 驗證兩次口令是否相同  if(userpass != userpass2)  {   alert("兩次輸入的口令不相同！");   form.userpass.focus();   return false;  }  // 驗證生日的格式是否正確  if(!isDate(birthday))  {   alert("生日的格式不正確！");   form.birthday.focus();   return false;  }  // 驗證email的格式是否正確  if(!isEmail(email))  {   alert("Email格式不正確！");   form.email.focus();   return false;  }  // 驗證電話號碼的格式是否正確  if(!isDigital(phone))  {   alert("電話號碼的格式不正確");   form.phone.focus();   return false;  }  // 驗證地址的長度是否正確  if(!maxLength(address,50))  {   alert("地址長度大於50位！");   form.address.focus();   return false;  }  return true; } // 驗證是否是空 function isNull(str) {  if(str.length==0)   return true;  else   return false; } // 驗證是否滿足最小長度 function minLength(str,length) {  if(str.length>=length)   return true;  else   return false; } // 判斷是否滿足最大長度 function maxLength(str,length) {  if(str.length<=length)   return true;  else   return false; } // 判斷是否是數字 function isDigital(str) {  for(i=0;i<str.length;i++)  {   // 允許使用連字號   if(str.charAt(i)>='0' && str.charAt(i)<='9'    || str.charAt(i)=="-" && i!=0 && i!=str.length-1)    continue;   else    return false;  }  return true; } // 判斷是否是整數 function isNumber(str) {  for(i=0;i<str.length;i++)  {   // 如果要判斷小數，需要判斷小數點   if(str.charAt(i)>='0' && str.charAt(i)<='9'    || str.charAt(i)=="-" && i==0)    continue;   else    return false;  }  return true; } // 判斷是否是日期，日期的格式為1988-1-1 function isDate(date) {  // 尋找分隔字元  index1 = date.indexOf("-");  // 如果分隔字元不存在，則不是合法的時間  if(index1 == -1)   return false;  // 擷取時間中的年  year = date.substring(0,index1);  // 擷取時間中的剩下部分  date = date.substring(index1+1);  // 尋找第二個分隔字元  index1 = date.indexOf("-");  // 如果不存在第二個分隔字元，則不是合法的時間  if(index1 == -1)   return false;  // 擷取時間中的月份  month = date.substring(0,index1);  // 擷取時間中的日  day = date.substring(index1+1);  // 判斷是否是數字，如果不是則不是合法的時間  if(isNumber(year) && isNumber(month) && isNumber(day))  {   // 判斷基本範圍   if(year<1900 || year>9999 || month<1 || month >12 || day<1)    return false;   // 判斷31天的月   if((month==1 || month==3 || month==5 || month==7   || month==8 || month==10 || month==12) && day>31)    return false;   // 判斷30天的月   if((month==4 || month==6 || month==9 || month==11)    && day>30)    return false;   // 如果是2月，判斷是否為潤年   if(month==2)   {    if(year%400==0 || (year%4==0 && year%100!=0))    {     if(day>29)      return false;    }else    {     if(day>28)      return false;    }   }  }  else   return false;  return true; } // 判斷是否是Email function isEmail(email) {  if(email.length==0)   return false;  index1 = email.indexOf('@');  index2 = email.indexOf('.');  if(index1 < 1    // @符號不存在，或者在第一個位置  || index2 < 1   // .符號不存在，或者在第一個位置  || index2-index1 <2 // .在@的左邊或者相鄰  || index2+1 == email.length) // .符號後面沒有東西   return false  else   return true; }</script><html> <head> <title>註冊介面</title> </head> <body> <h2 align="center">請註冊</h2> <form name="form1" action="register_confirm.jsp" method="post"   onsubmit="return isValidate(form1)">  <table align="center">   <tr><td> 使用者ID：</td><td><input type="text" name="userid" value="${param.userid}"> </td></tr>   <tr><td> 使用者ID：</td><td><input type="text" name="userid"> </td></tr>  <tr><td> 使用者名稱：</td><td><input type="text" name="username"> </td></tr>  <tr><td> 口令：</td><td><input type="password" name="userpass"></td></tr>  <tr><td> 確認口令：</td><td><input type="password" name="userpass2"></td></tr>  <tr><td> 生日：</td><td><input type="text" name="birthday">格式為：1988-1-1</td></tr>  <tr><td> 學曆：</td><td>   <input type="radio" name="degree" value="專科">專科   <input type="radio" name="degree" value="本科" checked>本科   <input type="radio" name="degree" value="碩士研究生">碩士研究生   <input type="radio" name="degree" value="博士研究生">博士研究生   <input type="radio" name="degree" value="其他">其他</td></tr>  <tr><td> 地區：</td><td>   <select name="local">    <option value="華東">華東</option>    <option value="華南">華南</option>    <option value="華北">華北</option>    <option value="東北">東北</option>    <option value="東南">東南</option>    <option value="西南">西南</option>    <option value="西北">西北</option>    <option value="東北">東北</option>    <option value="華中">華中</option>   </select></td></tr>  <tr><td> E-mail:</td><td><input type="text" name="email"></td></tr>  <tr><td> 地址：</td><td><input type="text" name="address"></td></tr>   <tr><td> 電話：</td><td><input type="text" name="phone"></td></tr>  <tr><td> 備忘：</td><td>   <textarea rows="8" name="comment" cols="40"></textarea></td></tr>  <tr><td> <input type="reset" value="重設"></td><td>   <input type="submit" value="提交"></td></tr>  <table> </form> </body></html>

7、主要的輸出資訊的方式

1）out.println("");

out是內部對象，可以直接使用，但是必須在指令碼（<% %>）之內使用。盡量少用。

2）直接輸出

如果是靜態資訊，可以直接在html語言中使用。包含HTML標籤。

3）運算式<%=開始，以%>結束

例如：<%="使用運算式輸出的資訊"%>

4）運算式語言（EL）

要重點掌握。

基本格式：開始標識 ${ 結束標識 }
可以輸出各種資訊：字串類型的資訊、對象、錯誤提示資訊。

8、 注釋的用法

網頁注釋： <!-- html注釋  -->
Java注釋： // 單行注釋 /* */多行注釋
JSP注釋： <%-- JSP注釋  --%>

9、 在用戶端進行了驗證，在伺服器段是否需要驗證？

需要。

原因：用戶端可以不通過輸入介面直接存取處理檔案，這樣可以跳過用戶端驗證，如果不在伺服器驗證，資料將會有問題。
在用戶端進行的驗證主要是格式方面的驗證，有些東西是必須在伺服器端進行驗證的。

10、JSTL概述

標準標籤庫是一些常用的功能，沒有使用Java代碼而使用了標籤來實現。目標是在分頁檔中不出現任何java代碼。

標準標籤庫的組成部分：jstl.jar和standard.jar兩個壓縮包。

如何使用標準標籤庫：

1）首先需要把兩個壓縮包放到WEB-INF/lib下面，兩個壓縮包是標籤庫的實現檔案和描述檔案。

2）在頁面中需要先聲明：

複製代碼 代碼如下:

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

通過<%@ taglib %>進行聲明。uri屬性指出要使用的標記庫的uri（唯一標識）。
prefix相當於對這個起的別名，在後面使用的時候使用這個別名。

3）調用標記庫中的標記

複製代碼 代碼如下:

<fmt:requestEncoding value="gb2312"/>

通過"別名+標籤的名字"的方式調用這個標籤，並設定相應的屬性。

希望本文所述對大家的JSP程式設計有所協助。