JSP入门教程之客户端验证、常用输出方式及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程序设计有所帮助。
本文地址：https://www.stayed.cn/item/24943
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见，何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)