`
ko8e
  • 浏览: 51739 次
  • 性别: Icon_minigender_1
  • 来自: 龙岩
社区版块
存档分类
最新评论

客户端验证、常用输出方式、JSTL的基本用法

 
阅读更多
转自CSDN http://blog.csdn.net/JavaEETeacher/article/details/1764888目标:

l         掌握客户端验证的基本过程;

l         掌握JSP输出信息的方式;

l         掌握JSTL的基本用法。

主要内容:

l         通过实例介绍客户端验证的基本过程;

l         介绍JSP输出信息的基本方式;

l         通过实例分析介绍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" [color=red]onsubmit="return isValidate(form1[/color])">

红色部分是对验证方法的调用。

注意:这时候使用的是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入门教程之客户端验证、常用输出方式及JSTL基本用法

    通过本教程提供的客户端验证、常用输出方式以及JSTL基本用法的知识点,可以有效地入门并掌握JSP页面的基本开发技术。学习这些内容不仅可以帮助开发者编写功能完整的动态网站,还可以在工作中提高开发效率,确保开发...

    表单验证及总结

    1. 客户端验证:发生在用户浏览器端,通过JavaScript、jQuery等前端技术实现。优点是即时反馈,减少无效请求;缺点是如果禁用JavaScript,验证将失效。 2. 服务器端验证:无论客户端是否验证,服务器都会对数据进行...

    j2ee:servlet练习短信项目,包含过滤器的使用、EL表达式和JSTL标准标签库的使用

    标题 "j2ee:servlet练习短信项目,包含过滤器的使用、EL表达式和JSTL标准标签库的使用" 描述了一个基于J2EE平台的短信服务项目的实践,其中涵盖了多个关键的Java Web开发技术。这个项目不仅涉及到Servlet的编程,还...

    spring mvc服务端表单验证实例

    在Web应用中,服务端验证是必要的,因为客户端验证可能被绕过。服务端验证确保所有提交的数据都符合预设的规则,例如非空、长度限制、格式校验等。Spring MVC提供了一套强大的工具来实现这一目标。 3. **使用注解...

    我自己的jstl小型项目

    以下是一些关键的JSTL组件和用法: 1. **核心标签库(Core Tags)**:提供了一系列基本的控制结构,如`&lt;c:forEach&gt;`用于循环遍历集合,`&lt;c:if&gt;`和`&lt;c:choose&gt;`进行条件判断,`&lt;c:set&gt;`用于设置变量等。 2. **...

    jstl和struts标签

    ### JSTL与Struts标签库详解 ...通过使用JSTL和Struts标签,开发者不仅能够提高代码的可读性和可维护性,还能大大减少页面上的脚本代码量,使页面更加整洁和专业。这对于构建高质量的企业级Web应用来说是非常重要的。

    详细讲解—表单验证框架的实现

    当用户尝试登录且验证失败时,服务器端可以设置这个变量,然后在客户端显示出来。 登录表单通过`POST`方法提交至`()%&gt;/LoginServlet`,这意味着表单数据将被发送到名为`LoginServlet`的后台处理器。表单中有两个...

    汽车租赁系统 java j2ee jstl

    6. **脚本(Javascript)**:用于增强客户端交互,如`validate.js`,进行表单验证。 综上,这个汽车租赁系统是一个涵盖全面技术栈的项目,包括Java后端、J2EE的服务器环境支持、JSTL简化视图层、MVC架构组织代码,...

    基于JSP技术的Web应用程序开发的安全策略_赵锋

    JSP技术提供了多种输入验证和数据验证机制,如使用正则表达式对输入数据进行验证、使用JSTL对输入数据进行验证等。 2.4 加密和解密机制 加密和解密机制是确保数据传输安全的重要手段。JSP技术提供了多种加密和解密...

    JSP和JSTL获取服务器参数示例

    以上就是JSP和JSTL在获取服务器参数方面的基本用法和知识点。在实际的Web开发中,通过结合JSP内置对象和JSTL标签,开发者能够方便地访问和展示这些参数,从而实现更加丰富和动态的Web应用功能。需要注意的是,在使用...

    2017年尚学堂Java培训课程大纲.docx

    - **EL表达式和JSTL标签库**:掌握Expression Language(EL)的使用方法,熟悉JavaServer Pages Standard Tag Library(JSTL)标签库。 - **Log4j日志组件的使用**:学习日志记录工具Log4j的基本配置和使用方法。 - ...

    使用Servlet加Jsp验证用户名

    3. **JSP中的条件语句**:在JSP中,我们可以使用JSTL(JavaServer Pages Standard Tag Library)或EL(Expression Language)来根据Servlet传递的状态显示不同的消息: ```jsp ${not empty error}"&gt; ;"&gt;${error} ...

    jsp基础理论

    开发者可以在JSP页面中使用out对象(out.println())来输出HTML内容,或者使用response.sendRedirect()重定向用户,使用response.setHeader()设置HTTP头信息,如cookie等。通过这些方法,JSP可以根据不同的客户端...

    j2ee一些例子j2ee一些例子j2ee一些例子

    JSTL是一组标准标签库,为JSP提供了各种常用的标签,如条件语句、迭代、XML处理等,以替代复杂的Java脚本。使用JSTL可以使得JSP页面更加清晰,符合MVC设计模式,提高代码的可读性和可维护性。 **HTML** HTML...

    JavaWeb编程技术实验指导书.pdf

    12. JSTL与标签文件:该实验指导读者如何使用JSTL和标签文件来编写可重用的Web组件,了解JSTL和标签文件的应用场景和使用方法。 知识点:JSTL、标签文件、可重用组件 13. Servlet事件处理:该实验指导读者如何使用...

    javaee随机生成两数,用户输入其相乘结果,并验证用户的结果是否正确

    在JSP中,我们可以使用EL(Expression Language)和JSTL(JavaServer Pages Standard Tag Library)来简化数据的处理和展示。 这个案例涉及的技术点包括: 1. **JSP**:用于创建动态网页,结合了HTML和Java代码,...

    学号姓名-实验4.doc

    - 客户端验证:利用 JavaScript 进行简单的前端验证,提高用户体验。 - 加密存储:对密码进行加密处理后再存储于数据库中,增强安全性。 #### 总结 - **经验教训**:在编写 JSP 页面时,应该注重代码的可读性和可...

    Spring MVC+hibernate helloworld

    ”程序,旨在帮助初学者理解这两个框架的集成与基本用法,并引入了简单的验证功能。下面将详细阐述相关知识点。 1. **Spring MVC** - **概念**:Spring MVC是Spring框架的一部分,用于构建Web应用程序的模型-视图-...

Global site tag (gtag.js) - Google Analytics