表单开发及前端校验
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口，使其适应设备宽度 -->
<title>表单校验示例</title> <!-- 设置页面标题 -->
<style>
.error {
color: red; /* 设置错误信息颜色为红色 */
font-size: 0.8em; /* 设置错误信息字体大小为0.8倍 */
margin-left: 10px; /* 设置错误信息左边距为10px */
}
form div {
margin-bottom: 15px; /* 设置表单元素之间的间距为15px */
}
</style>
</head>
<body>
<form id="myForm" οnsubmit="return validateForm()"> <!-- 创建表单，设置提交时调用validateForm函数 -->
<div>
<label for="name">姓名:</label> <!-- 创建姓名标签 -->
<input type="text" id="name" name="name"> <!-- 创建姓名输入框 -->
<span id="nameError" class="error"></span> <!-- 创建姓名错误信息显示区域 -->
</div>
<div>
<label for="email">邮箱:</label> <!-- 创建邮箱标签 -->
<input type="email" id="email" name="email"> <!-- 创建邮箱输入框 -->
<span id="emailError" class="error"></span> <!-- 创建邮箱错误信息显示区域 -->
</div>
<div>
<label for="age">年龄:</label> <!-- 创建年龄标签 -->
<input type="number" id="age" name="age"> <!-- 创建年龄输入框 -->
<span id="ageError" class="error"></span> <!-- 创建年龄错误信息显示区域 -->
</div>
<button type="submit">提交</button> <!-- 创建提交按钮 -->
</form>
<script>
function validateForm() {
const name = document.getElementById('name').value; // 获取姓名输入框的值
const email = document.getElementById('email').value; // 获取邮箱输入框的值
const age = document.getElementById('age').value; // 获取年龄输入框的值
let isValid = true; // 初始化校验结果为true
// 校验姓名
if (name.trim() === '') {
document.getElementById('nameError').innerText = '姓名不能为空'; // 显示姓名错误信息
isValid = false; // 设置校验结果为false
} else {
document.getElementById('nameError').innerText = ''; // 清空姓名错误信息
}
// 校验邮箱
if (email.trim() === '') {
document.getElementById('emailError').innerText = '邮箱不能为空'; // 显示邮箱错误信息
isValid = false; // 设置校验结果为false
} else if (!/\S+@\S+\.\S+/.test(email)) {
document.getElementById('emailError').innerText = '邮箱格式不正确'; // 显示邮箱格式错误信息
isValid = false; // 设置校验结果为false
} else {
document.getElementById('emailError').innerText = ''; // 清空邮箱错误信息
}
// 校验年龄
if (age.trim() === '') {
document.getElementById('ageError').innerText = '年龄不能为空'; // 显示年龄错误信息
isValid = false; // 设置校验结果为false
} else if (isNaN(age) || age < 0 || age > 120) {
document.getElementById('ageError').innerText = '年龄必须是0到120之间的数字'; // 显示年龄范围错误信息
isValid = false; // 设置校验结果为false
} else {
document.getElementById('ageError').innerText = ''; // 清空年龄错误信息
}
return isValid; // 返回校验结果
}
</script>
</body>
</html>
表格
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口，使其适应设备宽度 -->
<title>表格示例</title> <!-- 设置页面标题 -->
<style>
table {
width: 100%; /* 设置表格宽度为100% */
border-collapse: collapse; /* 合并表格边框 */
}
th, td {
border: 1px solid #ddd; /* 设置表头和数据单元格的边框 */
padding: 8px; /* 设置内边距 */
text-align: left; /* 设置文本左对齐 */
}
th {
background-color: #f2f2f2; /* 设置表头背景颜色 */
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th> <!-- 表头单元格：姓名 -->
<th>年龄</th> <!-- 表头单元格：年龄 -->
<th>邮箱</th> <!-- 表头单元格：邮箱 -->
</tr>
</thead>
<tbody>
<tr>
<td>张三</td> <!-- 数据单元格：姓名 -->
<td>25</td> <!-- 数据单元格：年龄 -->
<td>zhangsan@example.com</td> <!-- 数据单元格：邮箱 -->
</tr>
<tr>
<td>李四</td> <!-- 数据单元格：姓名 -->
<td>30</td> <!-- 数据单元格：年龄 -->
<td>lisi@example.com</td> <!-- 数据单元格：邮箱 -->
</tr>
<tr>
<td>王五</td> <!-- 数据单元格：姓名 -->
<td>28</td> <!-- 数据单元格：年龄 -->
<td>wangwu@example.com</td> <!-- 数据单元格：邮箱 -->
</tr>
</tbody>
</table>
</body>
</html>
Jsp内置对象
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>购物车示例</title>
</head>
<body>
<h1>购物车示例</h1>
<%
// 获取或创建一个会话
HttpSession session = request.getSession();
// 检查是否有一个名为 "cart" 的会话属性
String cart = (String) session.getAttribute("cart");
if (cart == null) {
cart = "";
}
// 处理添加到购物车的请求
String item = request.getParameter("item");
if (item != null && !item.isEmpty()) {
cart += item + ",";
session.setAttribute("cart", cart);
}
// 处理清除购物车的请求
String clear = request.getParameter("clear");
if (clear != null && clear.equals("true")) {
session.removeAttribute("cart");
cart = "";
}
// 设置一个Cookie，记录用户上次访问的时间
Cookie lastVisitCookie = new Cookie("lastVisit", new java.util.Date().toString());
lastVisitCookie.setMaxAge(60 * 60 * 24 * 30); // 设置Cookie有效期为30天
response.addCookie(lastVisitCookie);
// 获取应用程序级别的属性
String appMessage = (String) application.getAttribute("appMessage");
if (appMessage == null) {
appMessage = "欢迎使用购物车系统！";
application.setAttribute("appMessage", appMessage);
}
%>
<p><%= appMessage %></p>
<form method="post" action="shoppingCart.jsp">
<label for="item">添加商品到购物车:</label>
<input type="text" id="item" name="item">
<input type="submit" value="添加">
</form>
<form method="post" action="shoppingCart.jsp">
<input type="hidden" name="clear" value="true">
<input type="submit" value="清空购物车">
</form>
<h2>当前购物车内容:</h2>
<p><%= cart %></p>
<h2>上次访问时间:</h2>
<%
// 获取所有Cookie
Cookie[] cookies = request.getCookies();
if (cookies != null) {
for (Cookie cookie : cookies) {
// 查找名为 "lastVisit" 的Cookie
if (cookie.getName().equals("lastVisit")) {
out.println("<p>" + cookie.getValue() + "</p>");
}
}
}
%>
</body>
</html>
Servlet
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/submitForm")
public class FormServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 设置响应内容类型
response.setContentType("text/html;charset=UTF-8");
// 获取表单数据
String name = request.getParameter("name");
String email = request.getParameter("email");
// 构建响应
response.getWriter().println("<html><body>");
response.getWriter().println("<h2>表单提交结果</h2>");
response.getWriter().println("<p>姓名: " + name + "</p>");
response.getWriter().println("<p>邮箱: " + email + "</p>");
response.getWriter().println("</body></html>");
}
}
Html
<!DOCTYPE html>
<html>
<head>
<title>表单示例</title>
</head>
<body>
<h2>提交表单</h2>
<form method="post" action="submitForm">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
