本教程详细介绍了如何在spring boot应用中实现表单字段校验，涵盖了服务器端和客户端两种方法。服务器端通过引入`spring-boot-starter-validation`依赖，在模型（pojo）中使用`@notblank`、`@min`等jsr 303/380注解，并在控制器方法中结合`@valid`和`@modelattribute`进行校验。客户端则利用html5的`required`属性和合适的`input`类型提供即时反馈。结合使用这两种方法能有效提升应用的数据完整性和用户体验。
在构建Web应用时，表单数据校验是确保数据完整性和提升用户体验的关键环节。Spring Boot提供了强大的校验机制，结合HTML5的客户端校验，可以构建健壮的表单处理流程。本教程将详细阐述如何在Spring Boot项目中为表单字段添加必填校验。
一、理解校验的重要性
在用户提交表单数据时，如果某些关键字段缺失或格式不正确，可能导致后端业务逻辑错误，甚至引发应用异常（如本例中未输入价格导致的Whitelabel Error Page）。因此，无论是在客户端还是服务器端，都必须对用户输入进行严格的校验。
二、服务器端校验：使用Spring Validation
Spring Boot通过集成JSR 303/380 (Bean Validation) 规范，提供了强大的服务器端校验能力。
1. 引入校验依赖
首先，需要在pom.xml文件中添加spring-boot-starter-validation依赖。这个依赖包含了Hibernate Validator，它是JSR 303/380规范的一个实现。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-validation</artifactId>
</dependency>2. 在模型（POJO）中定义校验规则
在代表表单数据的POJO类（例如Product类）的字段上，使用JSR 303/380提供的注解来定义校验规则。
- @NotBlank: 适用于字符串，表示字段不能为空且不能只包含空白字符。
- @NotNull: 适用于任何类型，表示字段不能为null。
- @NotEmpty: 适用于字符串、集合、数组，表示字段不能为null且长度或大小不能为0。
- @Min(value): 适用于数值类型，表示字段值必须大于或等于指定值。
- @Max(value): 适用于数值类型，表示字段值必须小于或等于指定值。
- @Size(min=x, max=y): 适用于字符串、集合、数组，表示字段的长度或大小必须在指定范围内。
- @Email: 适用于字符串，表示字段必须是有效的电子邮件格式。
以下是为Product类添加校验注解的示例：
import jakarta.validation.constraints.Min;
import jakarta.validation.constraints.NotBlank;
import org.springframework.data.annotation.Id;
import org.springframework.data.mongodb.core.mapping.Document;
@Document(collection = "products")
public class Product {
@Id
private String id;
@NotBlank(message = "产品名称不能为空") // 产品名称不能为空
private String prodName;
@NotBlank(message = "产品描述不能为空") // 产品描述不能为空
private String prodDesc;
@Min(value = 0, message = "产品价格不能为负数") // 产品价格不能小于0
private Double prodPrice;
// prodImage可以为空，如果需要必填，可以添加@NotBlank
private String prodImage;
public Product() {
}
public Product(String prodName, String prodDesc, Double prodPrice, String prodImage) {
this.prodName = prodName;
this.prodDesc = prodDesc;
this.prodPrice = prodPrice;
this.prodImage = prodImage;
}
// Getters and Setters
public String getId() { return id; }
public void setId(String id) { this.id = id; }
public String getProdName() { return prodName; }
public void setProdName(String prodName) { this.prodName = prodName; }
public String getProdDesc() { return prodDesc; }
public void setProdDesc(String prodDesc) { this.prodDesc = prodDesc; }
public Double getProdPrice() { return prodPrice; }
public void setProdPrice(Double prodPrice) { this.prodPrice = prodPrice; }
public String getProdImage() { return prodImage; }
public void setProdImage(String prodImage) { this.prodImage = prodImage; }
}注意：@Min(0.01d)可以确保价格大于0，如果允许价格为0，则使用@Min(0d)。
3. 在控制器中触发校验
在控制器方法中，将表单数据绑定到带有校验注解的POJO对象上，并通过@Valid注解触发校验。同时，为了捕获校验结果，通常会紧跟一个BindingResult参数。
import jakarta.validation.Valid;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.*;
@Controller
public class ProductController {
@Autowired
ProductRepository productRepository;
// ... 其他方法 ...
@RequestMapping(value = "/save", method = RequestMethod.POST) // 推荐使用POST方法处理表单提交
public String save(@Valid @ModelAttribute Product product, BindingResult bindingResult, Model model) {
if (bindingResult.hasErrors()) {
// 如果有校验错误，返回到创建页面并显示错误信息
model.addAttribute("product", product); // 将带有错误的product对象传回表单
model.addAttribute("errors", bindingResult.getAllErrors()); // 传递所有错误信息
return "create"; // 返回到创建产品页面
}
productRepository.save(product);
return "redirect:/show/" + product.getId();
}
@RequestMapping(value = "/update", method = RequestMethod.POST) // 推荐使用POST方法处理表单提交
public String update(@Valid @ModelAttribute Product product, BindingResult bindingResult, Model model) {
if (bindingResult.hasErrors()) {
// 如果有校验错误，返回到编辑页面并显示错误信息
model.addAttribute("product", product);
model.addAttribute("errors", bindingResult.getAllErrors());
return "edit"; // 返回到编辑产品页面
}
// 确保ID不丢失
Optional<Product> existingProduct = productRepository.findById(product.getId());
if (existingProduct.isPresent()) {
Product p = existingProduct.get();
p.setProdName(product.getProdName());
p.setProdDesc(product.getProdDesc());
p.setProdPrice(product.getProdPrice());
p.setProdImage(product.getProdImage());
productRepository.save(p);
} else {
// 处理产品不存在的情况，例如重定向到错误页或产品列表
return "redirect:/product";
}
return "redirect:/show/" + product.getId();
}
@RequestMapping("/create")
public String create(Model model) {
model.addAttribute("product", new Product()); // 为表单提供一个空的Product对象
return "create";
}
@RequestMapping("/edit/{id}")
public String edit(@PathVariable String id, Model model) {
model.addAttribute("product", productRepository.findById(id).orElse(new Product())); // 确保不会返回null
return "edit";
}
// ... 其他方法 ...
}重要提示：
- 将@RequestParam替换为@ModelAttribute Product product，这样Spring会自动将表单参数绑定到Product对象的属性上。
- @Valid注解告诉Spring对Product对象执行校验。
- BindingResult参数必须紧跟在@Valid参数之后，它包含了校验结果，通过hasErrors()方法可以判断是否存在错误。
- 在create和edit方法中，确保为模板提供一个Product对象，以便Thymeleaf能够正确绑定表单数据和显示错误。
4. 在Thymeleaf模板中显示校验错误
当BindingResult检测到错误时，可以将错误信息传递回前端页面进行显示。
根据ui图生成前端页面
下载
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
在create.html和edit.html中，可以这样显示错误信息：
<!-- 在表单顶部或其他位置显示所有全局错误 -->
<div th:if="${#fields.hasErrors('global')}" class="alert alert-danger">
<p th:each="err : ${#fields.errors('global')}" th:text="${err}"></p>
</div>
<!-- 为每个字段显示具体的错误信息 -->
<div class="form-group" th:classappend="${#fields.hasErrors('prodName')} ? 'has-error'">
<label for="prodName">Product Name:</label>
<input type="text" class="form-control" name="prodName" th:field="*{prodName}" />
<span th:if="${#fields.hasErrors('prodName')}" th:errors="*{prodName}" class="help-block text-danger"></span>
</div>
<div class="form-group" th:classappend="${#fields.hasErrors('prodDesc')} ? 'has-error'">
<label for="prodDesc">Product Description</label>
<textarea class="form-control" name="prodDesc" cols="60" rows="3" th:field="*{prodDesc}"></textarea>
<span th:if="${#fields.hasErrors('prodDesc')}" th:errors="*{prodDesc}" class="help-block text-danger"></span>
</div>
<div class="form-group" th:classappend="${#fields.hasErrors('prodPrice')} ? 'has-error'">
<label for="prodPrice">Product Price</label>
<input type="number" class="form-control" name="prodPrice" th:field="*{prodPrice}" />
<span th:if="${#fields.hasErrors('prodPrice')}" th:errors="*{prodPrice}" class="help-block text-danger"></span>
</div>
<div class="form-group" th:classappend="${#fields.hasErrors('prodImage')} ? 'has-error'">
<label for="prodImage">Product Image URL:</label>
<input type="url" class="form-control" name="prodImage" th:field="*{prodImage}" />
<span th:if="${#fields.hasErrors('prodImage')}" th:errors="*{prodImage}" class="help-block text-danger"></span>
</div>注意：
- th:field="*{prodName}" 是Thymeleaf的表单绑定语法，它会自动设置name、id和value属性。
- th:classappend="${#fields.hasErrors('prodName')} ? 'has-error'" 会在字段有错误时添加has-error类，通常用于样式高亮。
- th:errors="*{prodName}" 会显示该字段的错误消息。
- th:if="${#fields.hasErrors('prodName')}" 用于条件性地显示错误消息。
- 为了使th:field正常工作，form标签需要使用th:object="${product}"来指定绑定的对象。
修改create.html和edit.html的form标签如下：
<!-- create.html -->
<form action="/save" method="post" th:object="${product}">
<!-- ... form fields ... -->
</form>
<!-- edit.html -->
<form action="/update" method="post" th:object="${product}">
<!-- ... form fields ... -->
<input type="hidden" name="id" th:field="*{id}" />
</form>三、客户端校验：使用HTML5 required属性
客户端校验可以在用户提交表单之前提供即时反馈，提升用户体验并减轻服务器压力。HTML5提供了required属性以及各种input类型（如type="number"、type="url"）来实现基本的客户端校验。
1. 使用 required 属性
在需要必填的input、textarea或select元素上添加required属性。
<!-- create.html 和 edit.html -->
<div class="form-group">
<label for="prodName">Product Name:</label>
<input type="text" class="form-control" name="prodName" th:field="*{prodName}" required />
</div>
<div class="form-group">
<label for="prodDesc">Product Description</label>
<textarea class="form-control" name="prodDesc" cols="60" rows="3" th:field="*{prodDesc}" required></textarea>
</div>
<div class="form-group">
<label for="prodPrice">Product Price</label>
<input type="number" class="form-control" name="prodPrice" th:field="*{prodPrice}" required />
</div>
<div class="form-group">
<label for="prodImage">Product Image URL:</label>
<input type="url" class="form-control" name="prodImage" th:field="*{prodImage}" />
</div>注意：
- required属性是布尔属性，只需存在即生效。
- type="number"会限制用户只能输入数字，并且浏览器会提供步进器（如果支持）。
- type="url"会要求用户输入符合URL格式的字符串。
- label的for属性应与input的id属性对应，以提高可访问性。为了避免冲突，建议将label的for属性值修改为与name属性值一致（或使用th:field自动生成的id）。
四、结合使用客户端与服务器端校验
最佳实践是同时使用客户端和服务器端校验：
- 客户端校验：提供即时、友好的用户反馈，减少不必要的服务器请求。
- 服务器端校验：作为最终防线，确保数据的完整性和安全性，因为客户端校验容易被绕过。
当客户端校验通过后，数据提交到服务器，服务器端会再次进行校验。如果服务器端校验失败，则将错误信息返回给客户端，由客户端页面显示。
五、总结
通过本教程，我们学习了如何在Spring Boot应用中实现表单字段的必填校验。核心步骤包括：
- 添加spring-boot-starter-validation依赖。
- 在POJO模型中使用JSR 303/380校验注解（如@NotBlank, @Min）。
- 在控制器方法中使用@Valid和@ModelAttribute触发校验，并利用BindingResult处理校验结果。
- 在Thymeleaf模板中显示校验错误信息，并使用th:field进行表单绑定。
- 在HTML表单中使用required属性和合适的input类型进行客户端校验，提升用户体验。
结合使用这两种校验方法，能够有效地保障应用程序的数据质量，提高系统的健壮性和用户满意度。
