스프링부트 + 타임리프: 폼 바인딩과 유효성 검사

 

폼 바인딩과 유효성 검사는 사용자 입력을 효과적으로 처리하고 관리해준다.
(타임리프에서는 th:object 을 사용해서 처리한다)

 

폼 바인딩 >>
폼을 통해 전달된 데이터를 특정 객체에 직접 바인딩한다.
th:object 속성을 사용해서 폼 데이터를 객체에 매핑한다.

예시:

<form action="#" th:action="@{/register}" th:object="${userForm}" method="post">
  <input type="text" th:field="*{username}" />
  <input type="password" th:field="*{password}" />
  <button type="submit">Register</button>
</form>

위 코드에서 th:object="${userForm}" 은 userForm 객체에 폼 데이터를 바인딩한다.
th:field 는 userForm 객체의 각 속성과 연결되어, 사용자가 입력한 데이터를 해당 속성에 자동으로 할당한다.

 

폼 유효성 검사 >>
서버 측에서 스프링의 @Valid 어노테이션을 사용해서 객체를 검증한다.

@PostMapping("/register")
public String register(@Valid @ModelAttribute("userForm") UserForm userForm, BindingResult result) {
  if (result.hasErrors()) {
      return "form";
  }
  // 사용자 등록 로직
  return "redirect:/success";
}

 

위 코드에서 @Valid 는 userForm 객체의 유효성을 검사하고, BindingResult 는 검사 결과를 담는다.
에러가 있을 시, 폼을 다시 표시한다.

<form action="#" th:action="@{/register}" th:object="${userForm}" method="post">
  <input type="text" th:field="*{username}" />
  <p th:if="${#fields.hasErrors('username')}" th:errors="*{username}">Username Error</p>
  <input type="password" th:field="*{password}" />
  <p th:if="${#fields.hasErrors('password')}" th:errors="*{password}">Password Error</p>
  <button type="submit">Register</button>
</form>

 

위 코드는 사용자가 폼을 제출했을 때 발생한 에러를 사용자에게 피드백한다.
th:errors 를 사용해서 에러 메시지를 표시한다.
(위에서는 username 과 password 필드에 대한 에러를 각각 표시한다.)

 

---

24년 1월 23일 작성된 글입니다