JSP入门教程之客户端验证、常用输出方式及JSTL基本用法

JSP入门教程之客户端验证、常用输出方式及JSTL基本用法

客户端验证

在前端页面中,通过Javascript可以实现客户端的表单验证功能。一般来说,我们需要为表单的submit按钮绑定一个函数,通过该函数来实现表单的验证。下面是一个简单的JSP页面,其中输入框中的内容需要进行非空校验:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<title>表单验证示例</title>
<script type="text/javascript">
function validateForm() {
    var username = document.getElementById("username").value;
    if (username.trim().length == 0) {
        alert("用户名不能为空!");
        return false;
    }
    return true;
}
</script>
</head>
<body>
    <form action="formsubmit.jsp" method="post" onsubmit="return validateForm()">
        <label>用户名:</label><input type="text" id="username" name="username" />
        <br />
        <br />
        <input type="submit" value="提交表单" />
    </form>
</body>
</html>

在该JSP页面中,我们为表单的submit按钮绑定了一个名为validateForm的函数,在该函数中对输入框中的内容进行判断,如果为空则弹出一个警告框,否则返回true。注意,我们需要在form元素中的onsubmit事件中执行该函数,以确保在提交表单前表单已经通过了客户端验证。

常用输出方式

在JSP中输出内容可以使用三种方式:scriptlet、EL表达式、和JSTL标签库。下面分别介绍这三种方式。

1. Scriptlet

使用<% %>标签可以在JSP中嵌入Java代码。如下所示:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<title>Scriptlet示例</title>
</head>
<body>
    <h1>使用Scriptlet输出</h1>
    <%
        String message = "Hello, World!";
        out.println(message);
    %>
</body>
</html>

在该示例中,我们使用了<% %>标签来嵌入Java代码,其中变量message的值为"Hello, World!",我们使用out.println方法将该字符串输出到页面上。

2. EL表达式

EL表达式是JSP提供的一种方便的输出方式,我们可以使用EL表达式输出JavaBean中的属性值或者页面作用域中的属性值。如下所示:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<title>EL表达式示例</title>
</head>
<body>
    <h1>使用EL表达式输出</h1>
    <c:set var="message" value="Hello, World!" />
    ${message}
</body>
</html>

在该示例中,我们使用标签将变量message的值设置为"Hello, World!",然后使用${}语法输出该变量的值。

3. JSTL标签库

JSP标准标签库(JSTL)为JSP页面提供了一系列的标签,用于简化页面中的逻辑判断和输出。下面是一个使用JSTL输出循环列表的示例:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>JSTL标签库示例</title>
</head>
<body>
    <h1>使用JSTL输出循环列表</h1>
    <c:forEach var="i" begin="1" end="5">
        <p>当前数字是<c:out value="${i}" /></p>
    </c:forEach>
</body>
</html>

在该示例中,我们使用标签创建一个循环列表,通过${}语法输出变量i的值。

JSTL基本用法

JSTL标签库包含了多个标签,下面简单介绍一下几个常用的标签。

1. 标签

标签用于判断某个条件是否成立,如果成立则输出标签中的内容,否则不输出。下面是一个使用标签判断输入框中的内容是否为null的示例:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>JSTL标签库示例</title>
</head>
<body>
    <form action="formsubmit.jsp" method="post">
        <label>用户名:</label><input type="text" id="username" name="username" />
        <br />
        <br />
        <c:if test="${not empty param.username}">
            <input type="submit" value="提交表单" />
        </c:if>
    </form>
</body>
</html>

在该示例中,我们使用标签判断参数username是否为空,如果不为空的话则输出提交表单按钮。

2. 标签

标签常用于多重条件判断,可以代替Java中的if-else语句。下面是一个使用标签判断数字大小的示例:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>JSTL标签库示例</title>
</head>
<body>
    <h1>使用<c:choose>和<c:when>判断数字大小</h1>
    <c:set var="number" value="30" />
    <c:choose>
        <c:when test="${ number < 10 }">
            <p>数字小于10</p>
        </c:when>
        <c:when test="${ number < 20 }">
            <p>数字小于20</p>
        </c:when>
        <c:otherwise>
            <p>数字大于等于20</p>
        </c:otherwise>
    </c:choose>
</body>
</html>

在该示例中,我们使用标签判断输入的数字大小。如果数字小于10,则输出数字小于10;如果数字小于20,则输出数字小于20;否则输出数字大于等于20。

总结

在本篇文章中,我们介绍了JSP中的客户端验证、常用输出方式和JSTL基本用法。客户端验证可以通过Javascript实现表单的非空校验,以保证表单提交的数据的正确性。常用输出方式包括scriptlet、EL表达式和JSTL标签库,分别用于在JSP页面中输出Java代码、变量值和循环列表等信息。JSTL标签库包含了多个标签,可以用于页面的逻辑判断和循环列表的输出等。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JSP入门教程之客户端验证、常用输出方式及JSTL基本用法 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • 深入理解JavaScript函数参数(推荐)

    深入理解JavaScript函数参数(推荐) 在JavaScript中,函数参数是一个重要的概念,函数的可用性和实用性很大程度上依赖于参数。在本文中,我们将介绍JavaScript函数参数的各种方面,包括: 位置参数 默认参数 剩余参数 命名参数 参数解构 位置参数 位置参数是函数定义中的参数,它们的值由调用函数时传递的参数值确定。例如: function …

    JavaScript 2023年5月27日
    00
  • 关于JavaScript防抖与节流的区别与实现

    下面是关于JavaScript防抖与节流的区别与实现的完整攻略。 1. 防抖与节流的定义 防抖和节流都是针对一些高频率触发的事件而出现的优化方案。它们的基本思路都是减少一些重复触发导致的性能问题。 防抖:当一个用户连续地触发某个事件时,防抖会在一定时间内只执行一次该事件,如果在这个时间段内该事件再次被触发,则重置时间。可以理解为:事件被触发后,等待一段时间,…

    JavaScript 2023年6月11日
    00
  • javascript 常用功能总结

    JavaScript 常用功能总结 1. 变量声明和赋值 在 JavaScript 中,使用 var、let 或 const 关键字可以声明变量。 // 以 var 关键字声明一个变量 var myVar; // 以 let 关键字声明一个变量 let myLet; // 以 const 关键字声明一个常量 const myConst = "Hel…

    JavaScript 2023年5月17日
    00
  • javascript中验证大写字母、数字和中文

    要在 JavaScript 中验证大写字母、数字和中文,可以使用正则表达式(RegExp)。下面是完整的攻略: 步骤 1:编写正则表达式 使用正则表达式是验证输入是否符合要求的常用方法。以下是一个匹配大写字母、数字和中文的正则表达式: /^[A-Z0-9\u4e00-\u9fa5]+$/ ^ 表示匹配开头 $ 表示匹配结尾 [A-Z] 表示匹配 A 至 Z …

    JavaScript 2023年6月10日
    00
  • JavaScript中的原始值和复杂值

    JavaScript中的原始值和复杂值 在JavaScript中,数据类型可以分为两种:原始值和复杂值。 原始值 原始值是最基本的数据类型,它们是不可变的。JavaScript中有5种原始值: 字符串(String):用双引号(”)或单引号(’)包含的字符序列,例如:”Hello World”或’My Name is Peter’。 数字(Number):整…

    JavaScript 2023年5月27日
    00
  • ahooks封装cookie localStorage sessionStorage方法

    介绍ahooks ahooks是一个封装好的React Hooks库,提供了很多常用的Hooks封装,可以帮助我们快速地开发Web应用。在ahooks中,有一个useCookieHooks可以用来操作cookie。如果要操作localStorage或sessionStorage,可以通过封装实现。 封装localStorage的方法 import { use…

    JavaScript 2023年6月11日
    00
  • JavaScript实现动画打开半透明提示层的方法

    下面是“JavaScript实现动画打开半透明提示层的方法”的完整攻略。 确定提示层的样式和HTML结构 首先,我们需要确定提示层的样式和HTML结构。提示层一般是一个半透明的背景遮罩,上面有一个包含提示信息的框。 HTML结构可以使用div来实现,样式可以使用CSS来设置,比如: .tip-wrap { position: fixed; top: 0; l…

    JavaScript 2023年6月11日
    00
  • Javascript 基础—Ajax入门必看

    Javascript 基础—Ajax入门必看 在前端开发中,Ajax技术是非常重要的一种技术,它可以实现网页异步请求数据,使网页看起来更流畅,用户体验更好。本文将为大家介绍Ajax的基础知识和简单应用,帮助初学者了解Ajax的原理和用法。 什么是Ajax? Ajax(Asynchronous JavaScript and XML)指的是一种网页异步请求数…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部