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中可以使用一些技术来实现这个目标,包括事件监听、DOM操作和正则表达式等。 以下是实现“JavaScript实现密码框输入验证”的完整攻略: 步骤1:创建密码框 我们需要创建一个密码框,使我们的用户能够输入密码。在HTML中,可以使…

    JavaScript 2023年6月10日
    00
  • Javascript & DHTML上传文件控件

    下面是关于JavaScript & DHTML上传文件控件的完整攻略: 一、什么是JavaScript & DHTML上传文件控件 JavaScript & DHTML上传文件控件是一种用于在网页中实现上传文件功能的控件,通过该控件可以让用户在不离开网页的情况下上传本地文件到服务器。 二、如何使用JavaScript & DH…

    JavaScript 2023年5月27日
    00
  • Javascript Date getUTCHours() 方法

    以下是关于JavaScript Date对象的getUTCHours()方法的完整攻略,包括两个示例说明。 JavaScript Date对象的getUTCHours()方法 JavaScript Date对象getUTCHours()方法返回当前日期的小时数,以协调世界(UTC)为基准。返回值是一个0到23之间的整数下面是使用Date对象的getUTCHo…

    JavaScript 2023年5月11日
    00
  • JavaScript高级程序设计(第3版)学习笔记10 再访js对象

    JavaScript高级程序设计(第3版)学习笔记10 再访js对象攻略: 什么是JS对象 JS对象是可变的键控集合,它们的(键)对应的值可以是函数、数组、基本类型值或其他对象。对象在JavaScript中的作用非常广泛,JavaScript是一门基于对象的编程语言,它支持面向对象的编程方式。 构造函数 构造函数是创建特定类型对象的一种特殊函数,它充当初始化…

    JavaScript 2023年5月27日
    00
  • Javascript Math tan() 方法

    JavaScript中的Math.SQRT2属性是一个常数,表示2的平方根。以下是关于Math.SQRT2属性的完整攻略,含两个示例。 JavaScript Math对象的SQRT2属性 JavaScript的SQRT2属性是一个常数,表示2的平方根。下面是SQRT2属性的语法: Math.SQRT2 下面是一个SQRT2属性的示例: console.log…

    JavaScript 2023年5月11日
    00
  • html doctype 作用介绍

    那我来给你详细讲解HTML文档类型声明(DOCTYPE)的作用介绍。 1. DOCTYPE 的定义 在开始学习 DOCTYPE 之前,我们需要先了解下它的全称 Document Type Declaration,中文意思是文档类型声明,简称 DOCTYPE。它是为了告诉浏览器这个 HTML 文档采用了哪个版本的 HTML 或 XHTML 规范。 2. DOC…

    JavaScript 2023年6月11日
    00
  • js处理json以及字符串的比较等常用操作

    针对JS处理JSON以及字符串的比较等常用操作,我为您提供以下攻略: 处理JSON JSON的介绍 首先,需要了解一下JSON的基础知识。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它基于JavaScript的一个子集,通过对象和数组的组合来表示数据。JSON格式的数据在所有支持JSON的编程语言中都可以使用,…

    JavaScript 2023年5月27日
    00
  • Javascript Array shift 方法

    以下是关于JavaScript Array shift方法的完整攻略。 JavaScript Array shift方法 JavaScript Array shift方法用于从数组的开头删除一个元素,并返回该元素的值。该方法会改变原始数组,即从原始数组中删除元素。 下是一个使用shift方法的示例: var arr = [1, 2, 3]; console.…

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