[Spring] 폼 처리와 유효성 검사

웹 애플리케이션에서 폼 처리와 유효성 검사는 사용자 입력을 관리하고 데이터의 정확성을 보장하는 중요한 과정입니다.

 

1. 폼 처리 (Form Handling)

1.1 폼 객체 (Form Object)

폼 데이터를 담을 객체를 정의합니다. 이를 '커맨드 객체' 또는 '폼 백킹 빈'이라고 합니다. (Validation Check Code까지 같이 작성했습니다.)

import javax.validation.constraints.*;

public class UserForm {
    @NotBlank(message = "Username is required")
    @Size(min = 3, max = 50, message = "Username must be between 3 and 50 characters")
    private String username;

    @NotBlank(message = "Email is required")
    @Email(message = "Please provide a valid email address")
    private String email;

    @NotBlank(message = "Password is required")
    @Size(min = 8, message = "Password must be at least 8 characters long")
    private String password;

    // Getters and setters
}

 

1.2 컨트롤러에서의 폼 처리

컨트롤러에서 폼을 처리하는 메서드를 정의합니다.

@PostMapping("/register")를 진행할 때, Validation Check까지 진행하게됩니다.

@Controller
public class UserController {

    @GetMapping("/register")
    public String showForm(Model model) {
        model.addAttribute("userForm", new UserForm());
        return "registerForm";
    }

    @PostMapping("/register")
    public String processForm(@Valid @ModelAttribute("userForm") UserForm userForm, 
                              BindingResult bindingResult) {
        if (bindingResult.hasErrors()) {
            return "registerForm";
        }
        // 폼 처리 로직
        return "registrationSuccess";
    }
}

 

1.3 뷰 템플릿

Thymeleaf를 사용한 폼 뷰

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

 

뷰에서의 에러 표시

Thymeleaf를 사용한 에러 메시지 표시 예

최근에는 React를 활용하는 경우가 많지만, Legacy Project가 Thymeleaf로 진행된 경우가 많아서 Thymeleaf 예시를 준비했습니다.

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