本文讲述了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@0==0 || (year%4==0 && year0!=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 %>进行声明。uri属性指出要使用的标记库的uri(唯一标识)。
prefix相当于对这个起的别名,在后面使用的时候使用这个别名。

3)调用标记库中的标记


通过"别名 标签的名字"的方式调用这个标签,并设置相应的属性。

希望本文所述对大家的JSP程序设计有所帮助。

JSP入门教程之客户端验证、常用输出方式及JSTL基本用法的更多相关文章

  1. (jsp/html)网页上嵌入播放器(常用播放器代码整理)

    网页上嵌入播放器,只要在HTML上添加以上代码就OK了,下面整理了一些常用的播放器代码,总有一款适合你,感兴趣的朋友可以参考下哈,希望对你有所帮助

  2. jsp ${param.id}用法

    ${id} 意思是取出某一范围中名称为id的变量。

  3. ajax从JSP传递对象数组到后台的方法

    今天小编就为大家分享一篇ajax从JSP传递对象数组到后台的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  4. 解决ajax返回验证的时候总是弹出error错误的方法

    这篇文章主要介绍了解决ajax返回验证的时候总是弹出error错误的方法,感兴趣的小伙伴们可以参考一下

  5. 微信小程序实现手机号码验证

    这篇文章主要为大家详细介绍了微信小程序实现手机号码验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  6. jQuery插件学习教程之SlidesJs轮播+Validation验证

    这篇文章主要介绍了jQuery插件学习教程之SlidesJs轮播+Validation验证的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

  7. jsp网页登陆验证

    这篇文章主要介绍了 jsp登陆验证,网页登陆验证带验证码校验,登录功能之添加验证码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  8. jsp的常用指令有哪些(编译指令/动作指令整理)

    jsp的常用指令有哪些?Jsp包含三个编译指令和七个动作指令,具体祥看下文,希望对你面试有所帮助

  9. 解决JSP开发中Web程序显示中文三种方法

    JSP显示中文方法小结

  10. PHP如何实现HTTP验证

    这篇文章主要介绍了PHP如何实现HTTP验证,帮助大家更好的理解和学习使用PHP,感兴趣的朋友可以了解下

随机推荐

  1. 基于EJB技术的商务预订系统的开发

    用EJB结构开发的应用程序是可伸缩的、事务型的、多用户安全的。总的来说,EJB是一个组件事务监控的标准服务器端的组件模型。基于EJB技术的系统结构模型EJB结构是一个服务端组件结构,是一个层次性结构,其结构模型如图1所示。图2:商务预订系统的构架EntityBean是为了现实世界的对象建造的模型,这些对象通常是数据库的一些持久记录。

  2. Java利用POI实现导入导出Excel表格

    这篇文章主要为大家详细介绍了Java利用POI实现导入导出Excel表格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  3. Mybatis分页插件PageHelper手写实现示例

    这篇文章主要为大家介绍了Mybatis分页插件PageHelper手写实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  4. (jsp/html)网页上嵌入播放器(常用播放器代码整理)

    网页上嵌入播放器,只要在HTML上添加以上代码就OK了,下面整理了一些常用的播放器代码,总有一款适合你,感兴趣的朋友可以参考下哈,希望对你有所帮助

  5. Java 阻塞队列BlockingQueue详解

    本文详细介绍了BlockingQueue家庭中的所有成员,包括他们各自的功能以及常见使用场景,通过实例代码介绍了Java 阻塞队列BlockingQueue的相关知识,需要的朋友可以参考下

  6. Java异常Exception详细讲解

    异常就是不正常,比如当我们身体出现了异常我们会根据身体情况选择喝开水、吃药、看病、等 异常处理方法。 java异常处理机制是我们java语言使用异常处理机制为程序提供了错误处理的能力,程序出现的错误,程序可以安全的退出,以保证程序正常的运行等

  7. Java Bean 作用域及它的几种类型介绍

    这篇文章主要介绍了Java Bean作用域及它的几种类型介绍,Spring框架作为一个管理Bean的IoC容器,那么Bean自然是Spring中的重要资源了,那Bean的作用域又是什么,接下来我们一起进入文章详细学习吧

  8. 面试突击之跨域问题的解决方案详解

    跨域问题本质是浏览器的一种保护机制,它的初衷是为了保证用户的安全,防止恶意网站窃取数据。那怎么解决这个问题呢?接下来我们一起来看

  9. Mybatis-Plus接口BaseMapper与Services使用详解

    这篇文章主要为大家介绍了Mybatis-Plus接口BaseMapper与Services使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  10. mybatis-plus雪花算法增强idworker的实现

    今天聊聊在mybatis-plus中引入分布式ID生成框架idworker,进一步增强实现生成分布式唯一ID,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

返回
顶部