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程序设计有所帮助。



相关阅读:
url传递的参数值中包含&时,url自动截断问题的解决方法
总结PHP中数值计算的注意事项
Win7系统出现0x000000c2蓝屏故障的解决方法
js window.open弹出新的网页窗口
在Node.js中使用HTTP上传文件的方法
win7 专业版系统打开网页就出现崩溃现象的故障原因及解决方法
Json数据异步绑定到界面的Table并且自动刷新原理及代码
BootStrap glyphicons 字体图标实现方法
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
CSS三列布局两端固定宽度中间自适应
HTML5中原生的右键菜单创建方法
java web中图片验证码功能的简单实现方法
最简单快速解决win10开始菜单消失或打不开的问题
微软历代Windows壁纸制作过程揭秘 Win XP最经典
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 《爬山》读后感 盘点2015年上半年网络流行语太经典了 叶落下的情殇 用用不足为训造句 打桌球作文450字 关于构建高效课堂学生自主管理模式的指导意见 干部学习条例和准则心得体会 爱、好难 半个西瓜皮作文300字 雁荡山,你真美 基层工会主席发言稿 爱我,就和我一起走 最新一颗感恩的心演讲稿 简单生活,心情点滴 大学生职业发展规划书:机电一体化专业 新年的黑板报内容资料 社科联学习十七大心得体会 小学六年级作文350字:《渔夫》续写 我不怕了,却真的害怕了作文700字 诚信 我转学得好朋友作文350字 有节奏的朗读 伟人——孙中山和宋庆龄 区质监局食品生产加工小作坊专项整治工作实施方案 消失吧,消失吧,消失……”(二)作文900字 在梦中守候等待 我也不想单身啊!可是遇不到对的人,我能怎么办? 九年级入团申请书500字 走遍天下故土为侣作文300字 登高读后感 小学2年级重阳节手抄报 一封没有拆开的信 工作计划范本 道歉爱情短信 畅游大自然作文450字 人教版九年级下册五单元作文:我所了解的孔子和孟作文1300字 姜晨曦 杰特杰传奇之千万之谜 有关祖国在我心中的优秀演讲稿 那个被你伤得最深的人 来世、换我爱你 爱情就是一条河,谁不是摸着石子过河 废弃的太空站(一)作文700字 信访室的春天(散文) 高考满分作文900字_牢记我们的衣食父母 有梦的地方 卡卡,早安 《蜘鸟在歌唱》作者,李吉华 丑小鸭 续编作文300字 小学语文课堂教学有效性心得

Copyright © 2016 phpStudy |