Spring Boot
[board]validation을 이용하여 회원가입하기
머리방울
2022. 9. 18. 17:09
1. VO에 validation 추가하기
@Getter
@Setter
@ToString
public class MemberVO {
@NotBlank(message = "ID는 필수입력입니다.")
private String memberId;
(★""안에 붙여넣기하면 //가 자동으로 추가로 붙는다. 에러 발생하니 주의할 것)
@Pattern(regexp = "^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[@$!%*?&])[A-Za-z\\d@$!%*?&]{8,16}$", message = "비밀번호 형식에 어긋납니다.")
private String memberPw;
@NotBlank(message = "이름은 필수입력입니다.")
@Size(max = 5, message = "이름의 길이를 초과했습니다") max = 5 글자 길이 5개까지 가능(영어 숫자 관계없이)
private String memberName;
@Size(min = 9, max = 11)
private String memberTell; //010 1111 4444 이런식으로 나오도록
private String isAdmin;
private String memberStatus;
private String[] memberTells;
★기존 getMemberTell()이 있더라도 내가 만든 getter가 우선으로 사용된다.
public String getMemberTell() {
if(memberTells == null) { 배열의 값이 없다면
return null;
}
else { 연락처 칸에 데이터가 있다면
String result = "";
for(String tell : memberTells) {
result += tell; -> result =01011112222 이렇게 쌓인다.
}
return result;
}
}
}2. join.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout ="http://www.ultrap.net.nz/thymeleaf/layout"
layout:decorate="~{layout/base_layout}">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div layout:fragment="content">
<예시>
form<th:object="${memberVO}">
<input type="text" th:field="*{memberId}">
form태그에 th:object로 넘어오는 커맨드 객체를 지정할 경우
해당 form태그 내에서 th:field를 사용하여 (*의 의미는 memberVO 안에 있는)
th:field="*{memberId}"으로 name, id, value 만들어 준다.
회원가입 모달
모달 사이즈 줄이려고 행 만들고 안에 열 만들어서 사이즈를 반(6)으로 줄였다
<div class="row justify-content-center"> 행 안의 모든 내용 화면 중앙으로 오도록
<div class="col-6"> 전체를 반으로 줄인다. (bootstrap은 12가 기준)
<form class="row g-3" th:action="@{/member/join}" method="post" th:object="${memberVO}">
<div class="col-12">
<label for="memberId" class="form-label">ID</label>
<input type="text" class="form-control" th:field="*{memberId}">
<div class="hasError" th:if="${#fields.hasErrors('memberId')}" th:errors="*{memberId}"></div>
에러가 발생했을 때 memberVO에서 작성한 message 내용이 뜨도록 작성한다.
</div>
<div class="col-12">
<label for="memberPw" class="form-label">PASSWORD</label>
<input type="password" class="form-control" th:field="*{memberPw}">
<div class="hasError" th:if="${#fields.hasErrors('memberPw')}" th:errors="*{memberPw}"></div>
</div>
<div class="col-12">
<label for="memberName" class="form-label">NAME</label>
<input type="text" class="form-control" th:field ="*{memberName}">
<div class="hasError" th:if="${#fields.hasErrors('memberName')}" th:errors="*{memberName}"></div>
</div>
<div class="col-4">
<label for="" class="form-label">TELL</label>
<select class="form-select" name="memberTells">
<option selected value="010">010</option>
<option value="011">011</option>
</select>
</div>
<div class="col-4">
<label for="" class="form-label"> </label>
<input type="text" class="form-control" name="memberTells">
</div>
<div class="col-4">
<label for="" class="form-label"> </label>
<input type="text" class="form-control" name="memberTells">
</div>
<div class="hasError" th:if="${#fields.hasErrors('memberTell')}" th:errors="*{memberTell}"></div>
<div class="col-12 d-grid gap-2">
<button type="submit" class="btn btn-primary">JOIN</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
3. css
.hasError{
font-family: 'GangwonEdu_OTFBoldA';
color: red;
font-style: italic;
font-weight: bold;
font-size: 18px;
}
4. controller
@Valid : post로 전달된 데이터가 검증 규칙을 따르는지 판단하는 역할, 기본모양 @Valid MemberVo memberVO
해당 annotation 다음에는 반드시 검증할 객체가 선언되어야 한다.
BindingResult : 검증 대상 객체(memberVO)와 검증 결과에 대한 정보를 담고 있는 객체
(예시 memberVO)검증 객체 바로 다음에 선언되어야 한다.
회원가입 페이지 이동 (a태그 이용)
@GetMapping("/join")
public String join(MemberVO memberVO) {
return "content/join";
}
회원가입
@PostMapping("/join")
public String joinProcess(@Valid MemberVO memberVO, BindingResult bindingResult) {
validation체크 (데이터 유효성 검증 잘못 입력 시 다시 페이지로 이동하도록)
if (bindingResult.hasErrors()) { 오류가 생겼니?
return "content/join";
}
오류가 없다면 회원가입 쿼리 실행
else {
memberService.join(memberVO);
게시글 목록 페이지로 이동
return "redirect:/board/list";
}
}