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

最新推荐文章于 2021-04-19 22:22:33 发布

iteye_19339

最新推荐文章于 2021-04-19 22:22:33 发布

阅读量115

点赞数

分类专栏： Java web 文章标签： javascript java ViewUI

本文链接：https://blog.csdn.net/iteye_19339/article/details/82096476

版权

Java web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

转自CSDN [url]http://blog.csdn.net/JavaEETeacher/article/details/1764888[/url]目标：

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、注释的用法

网页注释： 

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"/>

通过“别名+标签的名字”的方式调用这个标签，并设置相应的属性。

iteye_19339

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
客户端验证、常用输出方式、JSTL的基本用法

转自CSDN [url]http://blog.csdn.net/JavaEETeacher/article/details/1764888[/url]目标： l 掌握客户端验证的基本过程； l 掌握JSP输出信息的方式； l 掌握JSTL的基本用法。主要内容： l 通过实例介绍客户端验证的基...
复制链接

扫一扫

专栏目录