JSP入門(mén)教程之客戶(hù)端驗(yàn)證、常用輸出方式及JSTL基本用法
本文講述了JSP入門(mén)教程之客戶(hù)端驗(yàn)證、常用輸出方式及JSTL基本用法。分享給大家供大家參考。具體如下：
一、目標(biāo)：
① 掌握客戶(hù)端驗(yàn)證的基本過(guò)程；
② 掌握J(rèn)SP輸出信息的方式；
③ 掌握J(rèn)STL的基本用法。
二、主要內(nèi)容：
① 通過(guò)實(shí)例介紹客戶(hù)端驗(yàn)證的基本過(guò)程；
② 介紹JSP輸出信息的基本方式；
③ 通過(guò)實(shí)例分析介紹JSTL的基本用法。
客戶(hù)端驗(yàn)證相關(guān)的代碼在網(wǎng)絡(luò)上隨處可見(jiàn)，并且非常通用，所以一般情況下不需要大家自己編寫(xiě)，但是需要知道如何使用、如何修改。下面介紹基本的使用過(guò)程：
1、如何嵌入JavaScript代碼
使用JavaSript代碼完成用戶(hù)輸入信息的客戶(hù)端驗(yàn)證，在頁(yè)面中嵌入JavaScript代碼的過(guò)程如下：
<script language="JavaScript"> // 在此處嵌入JavaScript代碼 </script>
JavaScript代碼必須在這個(gè)開(kāi)始標(biāo)識(shí)和結(jié)束標(biāo)志之間。
2、如何寫(xiě)JavaScript方法
各種驗(yàn)證過(guò)程都是以方法的形式存在，JavaScript方法的定義方式如下：
function 方法名(參數(shù)列表)
{
// 方法體
}
與Java中的方法定義不同，function聲明要定義方法，不需要返回值類(lèi)型，可以返回任意結(jié)果，參數(shù)列表不需要給出參數(shù)的類(lèi)型。下面是一個(gè)方法的例子：
function validate(form)
{
…
}
下面是一個(gè)完成用于判斷參數(shù)是否是數(shù)字的方法：
// 判斷是否是數(shù)字
function isNumber(str)
{
for(i=0;i<str.length;i++)
{
// 如果要判斷小數(shù)，需要判斷小數(shù)點(diǎn)
if(str.charAt(i)>='0' && str.charAt(i)<='9'
|| str.charAt(i)=="-" && i==0)
continue;
else
return false;
}
return true;
}
3、如何建立表單提交與驗(yàn)證方法之間的關(guān)聯(lián)?
使用表單form的onsubmit事件完成。
<form name="form1" method="post" action="process.jsp" onsubmit="return isValidate(form1)">
其中：onsubmit="return isValidate(form1)"部分是對(duì)驗(yàn)證方法的調(diào)用。
注意：這時(shí)候使用的是form的提交事件，使用的是提交按鈕。
也可以把提交按鈕修改成普通按鈕，然后使用按鈕的onClick事件調(diào)用驗(yàn)證方法。
4、在進(jìn)行驗(yàn)證的時(shí)候要獲取輸入的信息，如果獲?。?/p>
表單的名字直到表單元素，再得到值。例如：
變量不需要定義可以直接使用。
5、實(shí)例：對(duì)注冊(cè)功能中的用戶(hù)名和口令進(jìn)行驗(yàn)證
<%@ page contentType="text/html;charset=gb2312"%>
<script language="JavaScript">
// 進(jìn)行驗(yàn)證的方法
function isValidate(form){
userid = form.userid.value;
if(userid==""){
alert("用戶(hù)ID不能為空");
return false;
}else if(userid.length>8 || userid.length<6){
alert("長(zhǎng)度應(yīng)該為6－8位");
return false;
}
userpass=form.userpass.value;
if(userpass.length!=8){
alert("口令的長(zhǎng)度不為8！");
return false;
}
return true;
}
</script>
請(qǐng)注冊(cè)<br>
<form name="form1" method="post" action="process.jsp" onsubmit="return isValidate(form1)">
用戶(hù)ID：<input type="text" name="userid">用戶(hù)ID長(zhǎng)度為6－8位<br>
口令：<input type="password" name="userpass">要求口令長(zhǎng)度為8<br>
確認(rèn)口令：<input type="password" name="userpass1"><br>
性別：<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女<br>
愛(ài)好：<input type="checkbox" name="fav" value="運(yùn)動(dòng)">運(yùn)動(dòng)
<input type="checkbox" name="fav" value="音樂(lè)">音樂(lè)
<input type="checkbox" name="fav" value="編程">編程<br>
學(xué)歷：
<select name="degree">
<option value="本科">本科</option>
<option value="碩士">碩士</option>
<option value="專(zhuān)科">專(zhuān)科</option>
<option value="博士">博士</option>
</select><br>
備注：
<textarea name="comment"></textarea><br>
<input type="submit" value="提交"><input type="reset" value="重置">
</form>
6、常用的驗(yàn)證：通過(guò)regiest.jsp文件介紹
這個(gè)驗(yàn)證不是最全面的，也不是最優(yōu)的，如果你需要可以通過(guò)網(wǎng)絡(luò)查找，另外可以查閱JavaScript相關(guān)書(shū)籍，有很多現(xiàn)成的JavaScript方法可以使用。另外在進(jìn)行客戶(hù)端驗(yàn)證的時(shí)候可以使用正則表達(dá)式，并且比較方便。
下面的代碼供參考：
<%@ page contentType="text/html;charset=gb2312"%>
<script language="JavaScript">
function isValidate(form)
{
// 得到用戶(hù)輸入的信息
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;
// 判斷用戶(hù)ID長(zhǎng)度
if(!minLength(userid,6))
{
alert("用戶(hù)ID長(zhǎng)度小于6位！");
form.userid.focus();
return false;
}
if(!maxLength(userid,8))
{
alert("用戶(hù)ID長(zhǎng)度大于8位！");
form.userid.focus();
return false;
}
// 判斷用戶(hù)名長(zhǎng)度
if(!minLength(username,6))
{
alert("用戶(hù)名長(zhǎng)度小于6位！");
form.username.focus();
return false;
}
if(!maxLength(username,8))
{
alert("用戶(hù)名長(zhǎng)度大于8位！");
form.username.focus();
return false;
}
// 判斷口令長(zhǎng)度
if(!minLength(userpass,6))
{
alert("口令長(zhǎng)度小于6位！");
form.userpass.focus();
return false;
}
if(!maxLength(userpass,8))
{
alert("口令長(zhǎng)度大于8位！");
form.userpass.focus();
return false;
}
// 判斷用戶(hù)名和口令是否相同
if(username==userpass)
{
alert("用戶(hù)名和口令不能相等！");
form.userpass.focus();
return false;
}
// 驗(yàn)證兩次口令是否相同
if(userpass != userpass2)
{
alert("兩次輸入的口令不相同！");
form.userpass.focus();
return false;
}
// 驗(yàn)證生日的格式是否正確
if(!isDate(birthday))
{
alert("生日的格式不正確！");
form.birthday.focus();
return false;
}
// 驗(yàn)證email的格式是否正確
if(!isEmail(email))
{
alert("Email格式不正確！");
form.email.focus();
return false;
}
// 驗(yàn)證電話(huà)號(hào)碼的格式是否正確
if(!isDigital(phone))
{
alert("電話(huà)號(hào)碼的格式不正確");
form.phone.focus();
return false;
}
// 驗(yàn)證地址的長(zhǎng)度是否正確
if(!maxLength(address,50))
{
alert("地址長(zhǎng)度大于50位！");
form.address.focus();
return false;
}
return true;
}
// 驗(yàn)證是否是空
function isNull(str)
{
if(str.length==0)
return true;
else
return false;
}
// 驗(yàn)證是否滿(mǎn)足最小長(zhǎng)度
function minLength(str,length)
{
if(str.length>=length)
return true;
else
return false;
}
// 判斷是否滿(mǎn)足最大長(zhǎng)度
function maxLength(str,length)
{
if(str.length<=length)
return true;
else
return false;
}
// 判斷是否是數(shù)字
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;
}
// 判斷是否是整數(shù)
function isNumber(str)
{
for(i=0;i<str.length;i++)
{
// 如果要判斷小數(shù)，需要判斷小數(shù)點(diǎn)
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("-");
// 如果分隔符不存在，則不是合法的時(shí)間
if(index1 == -1)
return false;
// 獲取時(shí)間中的年
year = date.substring(0,index1);
// 獲取時(shí)間中的剩下部分
date = date.substring(index1+1);
// 查找第二個(gè)分隔符
index1 = date.indexOf("-");
// 如果不存在第二個(gè)分隔符，則不是合法的時(shí)間
if(index1 == -1)
return false;
// 獲取時(shí)間中的月份
month = date.substring(0,index1);
// 獲取時(shí)間中的日
day = date.substring(index1+1);
// 判斷是否是數(shù)字，如果不是則不是合法的時(shí)間
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月，判斷是否為潤(rùn)年
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 // @符號(hào)不存在，或者在第一個(gè)位置
|| index2 < 1 // .符號(hào)不存在，或者在第一個(gè)位置
|| index2-index1 <2 // .在@的左邊或者相鄰
|| index2+1 == email.length) // .符號(hào)后面沒(méi)有東西
return false
else
return true;
}
</script>
<html>
<head>
<title>注冊(cè)界面</title>
</head>
<body>
<h2 align="center">請(qǐng)注冊(cè)</h2>
<form name="form1" action="register_confirm.jsp" method="post"
onsubmit="return isValidate(form1)">
<table align="center">
<tr><td> 用戶(hù)ID：</td><td><input type="text" name="userid" value="${param.userid}"> </td></tr>
<tr><td> 用戶(hù)ID：</td><td><input type="text" name="userid"> </td></tr>
<tr><td> 用戶(hù)名：</td><td><input type="text" name="username"> </td></tr>
<tr><td> 口令：</td><td><input type="password" name="userpass"></td></tr>
<tr><td> 確認(rèn)口令：</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> 學(xué)歷：</td><td>
<input type="radio" name="degree" value="專(zhuān)科">專(zhuān)科
<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> 地區(qū)：</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> 電話(huà)：</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是內(nèi)部對(duì)象，可以直接使用，但是必須在腳本（<% %>）之內(nèi)使用。盡量少用。
2）直接輸出
如果是靜態(tài)信息，可以直接在html語(yǔ)言中使用。包含HTML標(biāo)簽。
3）表達(dá)式<%=開(kāi)始，以%>結(jié)束
例如：<%="使用表達(dá)式輸出的信息"%>
4）表達(dá)式語(yǔ)言（EL）
要重點(diǎn)掌握。
基本格式：開(kāi)始標(biāo)識(shí) ${ 結(jié)束標(biāo)識(shí) }
可以輸出各種信息：字符串類(lèi)型的信息、對(duì)象、錯(cuò)誤提示信息。
8、 注釋的用法
網(wǎng)頁(yè)注釋?zhuān)?<!-- html注釋 -->
Java注釋?zhuān)?// 單行注釋 /* */多行注釋
JSP注釋?zhuān)?<%-- JSP注釋 --%>
9、 在客戶(hù)端進(jìn)行了驗(yàn)證，在服務(wù)器段是否需要驗(yàn)證？
需要。
原因：客戶(hù)端可以不通過(guò)輸入界面直接訪(fǎng)問(wèn)處理文件，這樣可以跳過(guò)客戶(hù)端驗(yàn)證，如果不在服務(wù)器驗(yàn)證，數(shù)據(jù)將會(huì)有問(wèn)題。
在客戶(hù)端進(jìn)行的驗(yàn)證主要是格式方面的驗(yàn)證，有些東西是必須在服務(wù)器端進(jìn)行驗(yàn)證的。
10、JSTL概述
標(biāo)準(zhǔn)標(biāo)簽庫(kù)是一些常用的功能，沒(méi)有使用Java代碼而使用了標(biāo)簽來(lái)實(shí)現(xiàn)。目標(biāo)是在頁(yè)面文件中不出現(xiàn)任何java代碼。
標(biāo)準(zhǔn)標(biāo)簽庫(kù)的組成部分：jstl.jar和standard.jar兩個(gè)壓縮包。
如何使用標(biāo)準(zhǔn)標(biāo)簽庫(kù)：
1）首先需要把兩個(gè)壓縮包放到WEB-INF/lib下面，兩個(gè)壓縮包是標(biāo)簽庫(kù)的實(shí)現(xiàn)文件和描述文件。
2）在頁(yè)面中需要先聲明：
通過(guò)<%@ taglib %>進(jìn)行聲明。uri屬性指出要使用的標(biāo)記庫(kù)的uri（唯一標(biāo)識(shí)）。
prefix相當(dāng)于對(duì)這個(gè)起的別名，在后面使用的時(shí)候使用這個(gè)別名。
3）調(diào)用標(biāo)記庫(kù)中的標(biāo)記
通過(guò)"別名+標(biāo)簽的名字"的方式調(diào)用這個(gè)標(biāo)簽，并設(shè)置相應(yīng)的屬性。
希望本文所述對(duì)大家的JSP程序設(shè)計(jì)有所幫助。
相關(guān)文章
spring動(dòng)態(tài)bean注冊(cè)示例分享
這篇文章主要介紹了spring動(dòng)態(tài)bean注冊(cè)示例,需要的朋友可以參考下2014-03-03
jsp格式文件是一種動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)標(biāo)準(zhǔn)，是用java語(yǔ)言編寫(xiě)的動(dòng)態(tài)網(wǎng)頁(yè)程序文件，主要出現(xiàn)在網(wǎng)站開(kāi)發(fā)的過(guò)程當(dāng)中2013-05-05
批量處理JDBC語(yǔ)句提高處理速度...2006-10-10
在Windows/NT上建立JSP環(huán)境...2006-10-10
jsp 顯示springmvc modelmap傳遞的對(duì)象詳細(xì)介紹
這篇文章主要介紹了jsp 顯示springmvc modelmap傳遞的對(duì)象詳細(xì)介紹的相關(guān)資料,具有一定的參考價(jià)值，需要的朋友可以參考下2016-12-12
詳解Spring data 定義默認(rèn)時(shí)間與日期的實(shí)例
這篇文章主要介紹了詳解Spring data 定義默認(rèn)時(shí)間與日期的實(shí)例的相關(guān)資料,這里提供實(shí)例幫助大家學(xué)習(xí)理解這部分內(nèi)容，需要的朋友可以參考下2017-08-08
實(shí)現(xiàn)論壇樹(shù)型結(jié)構(gòu)的具體算法
實(shí)現(xiàn)論壇樹(shù)型結(jié)構(gòu)的具體算法...2006-10-10
基于jsp+mysql實(shí)現(xiàn)在線(xiàn)水果銷(xiāo)售商城系統(tǒng)
這篇文章主要介紹了全新基于jsp+mysql實(shí)現(xiàn)的一個(gè)在線(xiàn)水果銷(xiāo)售商城系統(tǒng)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-08-08
json實(shí)現(xiàn)jsp分頁(yè)實(shí)例介紹(附效果圖)
json的既簡(jiǎn)單易懂，又傳輸迅速。并且能和javascript很好的融為一體；在不需要添加jar的前提下，能夠很好完成jsp分頁(yè)問(wèn)題，接下來(lái)為大家介紹下如何實(shí)現(xiàn)2013-04-04
Servlet動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)詳解
Servlet動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)詳解，需要的朋友可以參考一下2013-03-03