Springboot之Thymeleaf 表單標籤（表單驗證）|第三章-yellowcong
阿新 • • 發佈：2019-02-04
上一節剛剛講解了，如何通過Thymeleaf 來使用表單提交，現在我們這一節，講解如何使用表單驗證。Thymeleaf 表單驗證的步驟：1、新增
hibernate-validator的依賴包。2、建立表單類，裡面添加註解說明欄位的資訊，3、建立介面控制器，裡面需要通過註解@ModelAttribute("userInfo")標明，表單類物件。4、建立介面模板，用於接收模板的資訊，5、表單處理控制器，處理表單的請求，這個方法裡面，必須同介面控制器一樣，通過註解@ModelAttribute("userInfo")標明，表單類物件,這樣保證獲取的物件在出現錯誤，能直接返回到介面，如果註解不標明，就找不到表單物件，介面就會報錯了。6、測試程式碼。
程式碼地址
https://gitee.com/yellowcong/springboot-thymeleaf/tree/master/chapter3/springboot-thymeleaf1jar包匯入
spring-boot-starter-web包裡面有hibernate-validator包，不需要引用hibernate validator依賴。
<!-- 匯入hibernate驗證包 -->
<dependency>
<groupId>org.hibernate</groupId>
<artifactId 
驗證註解
下面是我直接複製貼過來的註解說明，需要注意一點的是，有些註解只能用在數字上才生效，有些註解是用在字串上的。
JSR提供的校驗註解：
@Null 被註釋的元素必須為 null
@NotNull 被註釋的元素必須不為 null
@AssertTrue 被註釋的元素必須為 true
@AssertFalse 被註釋的元素必須為 false
@Min(value) 被註釋的元素必須是一個數字，其值必須大於等於指定的最小值
@Max 表單驗證
1、表單模型
這個表單物件，我採用了lombok 的jar包，通過註解的方式生成set和get方式，簡化程式碼了，和普通的表單類是一毛一樣的，別太驚訝。
package com.yellowcong.form;
import org.hibernate.validator.constraints.Length;
import org.hibernate.validator.constraints.NotEmpty;
import lombok.Getter;
import lombok.Setter;
/**
* 建立日期:2018年4月5日<br/>
* 程式碼建立:黃聰<br/>
* 功能描述:表單資訊<br/>
*/
@Setter
@Getter
public class UserForm {
@NotEmpty(message="使用者名稱不能為空")
@Length(min = 2, max = 32, message = "使用者名稱長度在2到32個字元之間")
private String username;
@NotEmpty(message="密碼不能為空")
@Length(min = 6, max = 32, message = "密碼長度在6到32個字元之間")
private String password;
}
2、介面控制器
可以看到，我們的form的表單的物件，直接注入到request裡面了
/**
* 建立日期:2018年4月5日<br/>
* 程式碼建立:黃聰<br/>
* 功能描述:首頁模版<br/>
* @return
*/
@RequestMapping("/index")
public String index(@ModelAttribute("userInfo") UserForm user){
//設定model值
user.setPassword("test_ps");
user.setUsername("test");
return "admin/index";
}3、介面模板
介面模板中，直接讀取到ModelAttribute裡面注入的資料，然後可以通過th:if="${#fields.hasErrors('password')}" th:errors="*{password}" 獲取返回資訊。
<!DOCTYPE html>
<!-- 需要新增
<html xmlns:th="http://www.thymeleaf.org">
這樣在後面的th標籤就不會報錯
-->
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title th:text="${username}">xx</title>
</head>
<body>
<h1 th:text="${username}">Hello World</h1>
<h1>獲取物件資訊</h1>
<h2>1、通過直接訪問物件的方式</h2>
<p th:text="${userInfo.username}"></p>
<p th:text="${userInfo.password}"></p>
<h2>2、通過th:object訪問物件的方式</h2>
<div th:object="${userInfo}">
<p th:text="*{username}"></p>
<p th:text="*{password}"></p>
</div>
<h1>表單提交</h1>
<!-- 表單提交使用者資訊,注意欄位的設定,直接是*{} -->
<form action="#" th:action="@{/add}" th:object="${userInfo}" method="post">
<div><span>使用者名稱</span><input type="text" th:field="*{username}" /> <span th:if="${#fields.hasErrors('username')}" th:errors="*{username}"></span></div>
<div><span>密碼</span><input type="text" th:field="*{password}" /> <span th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></span></div>
<input type="submit" />
</form>
</body>
</html>4、請求處理控制器
控制器中，如果存在錯誤的情況，直接返回到新增的介面，如果新增成功了，也是反回到新增介面。
/**
* 建立日期:2018年4月6日<br/>
* 程式碼建立:黃聰<br/>
* 功能描述:處理add請求<br/>
* @param user
* @return
*/
@RequestMapping(value="/add",method=RequestMethod.POST)
public String add(@ModelAttribute("userInfo") @Validated UserForm user,BindingResult rs){
if(rs.hasErrors()){
for (ObjectError error : rs.getAllErrors()) {
System.out.println(error.getDefaultMessage());
}
return "admin/index";
}
//驗證成功，我們可以返回到自己想去的介面了，我這個地方直接返回到新增的介面
return "admin/index";
}5、測試
我輸入使用者名稱為空的時候，就提示錯了，然後輸入的欄位少，也提示錯誤了，然後我輸入正確了資料後，直接跳轉到新增頁面，然後顯示我剛剛新增的資料。
