### Spring Boot + Spring MVC + Thymeleaf 页面提交 Validation 实现
#### 框架介绍与应用场景
在本文档中，我们将深入探讨如何利用 Spring Boot、Spring MVC 和 Thymeleaf 这三个流行的技术栈来实现一个表单验证功能。这对于任何基于 Web 的应用程序都是非常重要的特性之一，它能够确保用户提交的数据符合预期格式或规则，从而减少服务器端的负担并提高用户体验。
#### 使用技术栈简介
1. **Spring Boot**：是一个基于 Spring 平台的简化版本，旨在简化新 Spring 应用程序的初始设置和依赖管理。它提供了约定优于配置的方法，使得开发者可以更快地启动和运行项目。
2. **Spring MVC**：是 Spring Framework 的一部分，主要用于构建 Web 应用程序。它提供了一个灵活的模型-视图-控制器架构，用于分离业务逻辑、用户界面和控制流程。
3. **Thymeleaf**：是一个现代服务器端 Java 模板引擎，支持 HTML、XML、JavaScript 和 CSS，适用于 Web 和独立环境中的静态 HTML 前端渲染。
#### 页面提交验证效果
在示例中，我们创建了一个简单的表单，其中包含几个输入字段（例如姓名、密码等），并在用户提交之前对这些字段进行了验证。如果姓名字段为空，则会在前端显示错误消息并使输入框变成红色。
#### 页面代码详解
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Getting Started: Serving Web Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/user.css}"/>
</head>
<body>
<form action="#" th:action="@{/user}" th:object="${user}" enctype="multipart/form-data" method="post">
<table>
<tr>
<td>
<div>
<input type="text" name="fname" th:field="*{fname}" th:class="${#fields.hasErrors('fname')}?fieldError"/>
<p th:if="${#fields.hasErrors('fname')}" th:errors="*{fname}">Incorrect data</p>
</div>
</td>
</tr>
<!-- 其他表单字段 -->
</table>
<input type="submit" name="save" value="经提交" th:value="#{submit}"/>
<input type="submit" name="addrow" value="上传" th:value="#{addrow}"/>
</form>
</body>
</html>
```
- `<input type="text" name="fname" th:field="*{fname}" th:class="${#fields.hasErrors('fname')}?fieldError"/>`：此行代码定义了 `fname` 输入字段，通过 `th:field` 属性将其绑定到后台 Java 对象的相应属性。`th:class` 属性用于动态更改输入框的 CSS 类名，如果验证失败则会应用 `fieldError` 类。
- `<p th:if="${#fields.hasErrors('fname')}" th:errors="*{fname}">Incorrect data</p>`：这段代码检查 `fname` 字段是否有错误。如果有，则显示错误信息；如果没有，则不显示任何内容。
#### CSS 代码
```css
/* user.css */
.fieldError {
border: 1px solid red;
}
```
当输入框验证失败时，`fieldError` 类被应用于输入框，使其边框变为红色，以此视觉提示用户输入有误。
#### Controller 代码
```java
@Controller
public class UserController {
@RequestMapping(value = "/user", method = RequestMethod.GET)
public String getUser(Model model) {
if (!model.containsAttribute("user")) {
SUser user = new SUser();
model.addAttribute("user", user);
user.setFname("startnow");
user.setPassword("cannottellyou");
user.setEmail("testemail");
}
return "user";
}
@RequestMapping(value = "/user", method = RequestMethod.POST)
public String saveUser(@Valid @ModelAttribute("user") SUser user, BindingResult result) {
if (result.hasErrors()) {
// 如果有错误，则返回表单页面
return "user";
} else {
// 数据有效，执行保存操作
// ...
return "redirect:/success"; // 跳转到成功页面
}
}
}
```
- `@Valid @ModelAttribute("user") SUser user`：这个注解组合用于将表单数据绑定到 `SUser` 对象，并对其进行验证。如果验证失败，则 `BindingResult` 会捕获这些错误，并且不会调用业务逻辑部分，而是返回表单页面再次让用户填写。
- `BindingResult result`：这个参数用于获取验证结果，包括所有的验证错误。在实际应用中，可以根据 `result.hasErrors()` 来判断是否有验证错误。
#### 总结
本示例展示了如何在 Spring Boot 项目中使用 Spring MVC 和 Thymeleaf 实现前端表单验证的过程。通过对表单字段的绑定和验证规则的设置，可以有效地提升应用程序的健壮性和用户体验。此外，这种方式也便于维护和扩展，为开发者提供了一种简单高效的方式来处理前端数据验证。
