首先肯定是加入依赖了:
<!-- https://mvnrepository.com/artifact/org.hibernate.validator/hibernate-validator -->
<dependency>
<groupId>org.hibernate.validator</groupId>
<artifactId>hibernate-validator</artifactId>
<version>7.0.4.Final</version>
</dependency>
idea中加入依赖后一定要将jar包放到 /WEB-INF/lib 文件夹下。
在JavaBean的属性上加上对应的验证注解:
加上验证注解:
在请求处理方法的参数中加上@valid 注解表示该参数参与验证:
将错误信息显示在输入栏旁边(将错误的对应属性和信息加入到Map中,方便在jsp页面中取值):
@PostMapping("/user")
public String add(@Valid User user, BindingResult result, Model model){ // @Valid 表示该参数参与验证 result表示自己处理错误,避免错误显示在页面
// 将错误信息传输到jsp页面
if (result.hasErrors()){ // 判断是否出现验证错误
Map<String,String> errors = new HashMap<>(); // 存放错误信息
List<FieldError> fieldErrors = result.getFieldErrors(); // 获取错误信息,包含错误的属性和信息
for (FieldError err : fieldErrors) {
// err.getField() : 错误的属性名,err.getDefaultMessage():错误属性信息
errors.put(err.getField(),err.getDefaultMessage());
}
model.addAttribute("errors",errors);
return "login";
}
System.out.println(user);
return "show";
}
前端页面:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>FirstPage</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
#top{
position: sticky; /* 相对粘性*/
top: 0;
width: 100%;
height: 5%;
}
#bottom{
position: fixed; /* 绝对固定 */
bottom: 0;
width:100%;
height: 20px;
}
#form{
border: 2px solid blue;
border-radius: 5px;
}
</style>
</head>
<body style="height: 1000px; background: ghostwhite;align-content: center;">
<nav id="top" class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">活动</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid row mt-5 p-5">
<div class="col-sm-4">
<!-- 轮播 -->
<div id="demo1" class="carousel slide" data-bs-ride="carousel">
<!-- 指标/点 -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo1" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo1" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo1" data-bs-slide-to="2"></button>
</div>
<!-- 幻灯片/轮播 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="${pageContext.request.contextPath}/img/img.png" alt="Los Angeles" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="${pageContext.request.contextPath}/img/img.png" alt="Chicago" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="${pageContext.request.contextPath}/img/img.png" alt="New York" class="d-block w-100">
</div>
</div>
<!-- 左右控件/图标 -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo1" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo1" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</div>
<div id="form" class="col-sm-4 bg-info">
<form action="${pageContext.request.contextPath}/user" method="post">
<div class="mb-3 mt-3">
<label for="id" class="form-label">id:</label>
<input type="text" class="form-control" id="id" placeholder="请输入id" name="id" value="${user.id}"><b style="color: red">${errors.id}</b>
</div>
<div class="mb-3">
<label for="username" class="form-label">username:</label>
<input type="text" class="form-control" id="username" placeholder="请输入username" name="username" value="${user.username}"><b style="color: red">${errors.username}</b>
</div>
<div class="mb-3">
<label for="birthday" class="form-label">birthday:</label>
<input type="text" class="form-control" id="birthday" placeholder="请输入birthday" name="birthday" value="${user.birthday}"><b style="color: red">${errors.birthday}</b>
</div>
<div class="mb-3">
<label for="balance" class="form-label">balance:</label>
<input type="text" class="form-control" id="balance" placeholder="请输入balance" name="balance" value="${user.balance}"><b style="color: red">${errors.balance}</b>
</div>
<div class="mb-3">
<label for="salary" class="form-label">salary:</label>
<input type="text" class="form-control" id="salary" placeholder="请输入salary" name="salary" value="${user.salary}"><b style="color: red">${errors.salary}</b>
</div>
<div class="mb-3">
<label for="taskCount" class="form-label">taskCount:</label>
<input type="text" class="form-control" id="taskCount" placeholder="请输入taskCount" name="taskCount" value="${user.taskCount}"><b style="color: red">${errors.taskCount}</b>
</div>
<div>
hobbies:<input type="checkbox" name="hobbies" value="唱歌">唱歌
<input type="checkbox" name="hobbies" value="跳舞">跳舞
</div>
<br/>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
<div class="col-sm-4">
<!-- 轮播 -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- 指标/点 -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>
<!-- 幻灯片/轮播 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="${pageContext.request.contextPath}/img/img.png" alt="Los Angeles" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="${pageContext.request.contextPath}/img/img.png" alt="Chicago" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="${pageContext.request.contextPath}/img/img.png" alt="New York" class="d-block w-100">
</div>
</div>
<!-- 左右控件/图标 -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</div>
</div>
<div id="bottom" class="mt-5 p-4 bg-dark text-white text-center">
<p>页脚</p>
</div>
</body>
</html>
使用EL表达式获取错误信息:
使用其它的注解(message属性可以自定义错误信息):
@NotNull(message = "id不能为空") // 非空
@Min(value = 1,message = "id必须从1开始") // 大于等于1
private Integer id;
@NotNull(message = "用户名不能为空")
@Length(min = 4,max = 8,message = "用户名为4至8位") // 设置长度
@Pattern(regexp = "^\\w+$",message = "只能包含字母、数字、下划线")
private String username;
@Past // 今天之前的日期
@DateTimeFormat(pattern = "yyyy-MM-dd")
private Date birthday;
@NumberFormat(style = NumberFormat.Style.CURRENCY) // 货币形式
private Double balance;
private String[] hobbies;
@Range(min = 1000,message = "最低1000") // Size范围是int,不能验证Double类型
@NumberFormat(style = NumberFormat.Style.NUMBER) // 正常数值形式
private Double salary;
@Range(min = 0,max = 100,message = "0%--100%") // Range的范围是Long
@NumberFormat(style = NumberFormat.Style.PERCENT) // 百分比形式
private Double taskCount;
输入:
显示错误:
这样就会节约很多时间。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)