0514-86177077

9:00-17:00（工作日）

主页 > 知识库 > JSP入门教程之客户端验证、常用输出方式及JSTL基本用法

JSP入门教程之客户端验证、常用输出方式及JSTL基本用法
热门标签：四川保险智能外呼系统商家 电销机器人好卖么 高德地图标注样式 北票市地图标注 地图标注线上教程 杭州ai语音电销机器人功能 杭州语音电销机器人软件 商洛电销 电销机器人是有一些什么技术

本文讲述了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;istr.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.length6){
   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">要求口令长度为8br>
 确认口令：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;istr.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;istr.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(year1900 || year>9999 || month1 || month >12 || day1)
    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程序设计有所帮助。

您可能感兴趣的文章:
  • C++语言 STL容器list总结
  • Listloading.js移动端上拉下拉刷新组件
  • 深入浅析STL vector用法
  • C++在成员函数中使用STL的find_if函数实例
  • stl常用算法(Algorithms)介绍(stl排序算法、非变序型队列)
  • jsp 使用jstl实现翻页实例代码
  • JSP和JSTL获取服务器参数示例
  • STL priority_queue（优先队列）详解

标签：青岛 江西 红河 云浮 西藏 贵州 丹东 宿州

巨人网络通讯声明：本文标题《JSP入门教程之客户端验证、常用输出方式及JSTL基本用法》，本文关键词  JSP,入门教程,之,客户端,；如发现本文内容存在版权问题，烦请提供相关信息告之我们，我们将及时沟通与处理。本站内容系统采集于网络，涉及言论、版权与本站无关。
  • 相关文章
  • 下面列出与本文章《JSP入门教程之客户端验证、常用输出方式及JSTL基本用法》相关的同类信息！
  • 本页收集关于JSP入门教程之客户端验证、常用输出方式及JSTL基本用法的相关信息资讯供网民参考！
    • 推荐文章

    上一篇：基于jsp+servlet实现的简单博客系统实例(附源码)

    下一篇：JSP教程之使用JavaBean完成业务逻辑的方法

    Copyright © 1999-2012 诚信 合法 规范的巨人网络通讯始建于2005年

    苏ICP备15040257号-8

    产品关键词： JSP入门教程之客户端验证、常用输出方式及JSTL基本用法 JSP,入门教程,之,客户端,