程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> JSP編程 >> 關於JSP >> JSP入門教程之客戶端驗證、常用輸出方式及JSTL基本用法,入門教程jstl

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

編輯:關於JSP

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


本文講述了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方法可以使用。另外在進行客戶端驗證的時候可以使用正則表達式,並且比較方便。

下面的代碼供參考:

<%@ 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程序設計有所幫助。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved