1. 내용: 회원가입 화면, 1차에서는 기본 정보를 2차에서는 제품 추천을 위해 나이와 키, 몸무게, 체형 등을 입력 받는다. 입력 데이터의 유효성을 검사하기 위해 Validation을 적용하였다.
2. 과정 중 특이점: @valid 어노테이션을 사용하여 값이 없거나 특정 조건에 맞지 않으면 다음 단계로 넘어갈 수 없도록 만들었다. 프론트엔드에서도 검증은 할 수 있지만 악의적인 사용자를 막기 위해서는 백엔드에서 검증을 하는 것이 더 확실하다. 거기다 VO나 DTO가 있다면 @vailid를 사용하면 편하게 검증할 수 있다!
3. 실제 화면 및 코드
1) VO : 내가 사용한 @valid는 아래와 같다.
@NotBlank : null이 아니며 길이가 0보다 크면 통과 → 필수값에 적용
@Max(value=) : 설정한 값 이하면 통과 → 나이에 적용
@Min(value=) : 설정한 값 이상이면 통과 → 키, 몸무게, 나이에 적용
@Size(min=, max=) : 문자열 또는 배열이 설정값 사이일 경우 통과 가능 → 비밀번호, 사이트 내 별명에 사용
@Email : 이메일 형식에 맞을 경우만 통과 가능 → 이메일에 사용
그리고 아래 코드는 각각의 @valid가 적용된 예시이다. message를 입력하면 유효값을 통과하지 못했을 경우 사용자에게 안내할 내용을 쓸 수 있다. getter와 setter 등은 생략하였다.
public class MemberVO {
@NotBlank(message = "아이디 입력은 필수입니다.", groups = {Step1.class})
private String memId; /* 아이디 */
@NotBlank(message = "비밀번호 입력은 필수입니다.", groups = {Step1.class})
@Size(min=4, message = "4글자 이상 입력하세요.", groups = {Step1.class})
private String memPw; /* 비밀번호 */
@NotBlank(message = "사이트 내 별명 입력은 필수입니다.", groups = {Step1.class})
@Size(min=2, max=15, message = "2글자 이상 15글자 이하의 값을 입력하세요.", groups = {Step1.class})
private String memNickname; /* 닉네임 */
@NotBlank(message = "이름 입력은 필수입니다.", groups = {Step1.class})
private String memName; /* 본명 */
private String memAddNo; /* 우편번호 */
@NotBlank(message = "주소 입력은 필수입니다.", groups = {Step1.class})
private String memAddress1; /* 주소 */
@NotBlank(message = "상세주소 입력은 필수입니다.", groups = {Step1.class})
private String memAddress2; /* 상세주소 */
@NotBlank(message = "전화번호 입력은 필수입니다.", groups = {Step1.class})
private String memPh; /* 전화번호 */
@NotBlank(message = "이메일 입력은 필수입니다.", groups = {Step1.class})
@Email(message = "이메일 형식이 아닙니다.", groups = {Step1.class})
private String memEmail; /* 이메일 */
@Min(value = 14, message = "14세 이상부터 가입이 가능합니다.", groups = {Step2.class})
@Max(value = 100, message = "100세 이상은 가입이 불가능합니다.", groups = {Step2.class})
private int memAge; /* 나이 */
@Min(value = 150, message = "150 이상으로 입력해주세요.", groups = {Step2.class})
private int memHeight; /* 키 */
@Min(value = 30, message = "30 이상으로 입력해주세요.", groups = {Step2.class})
private int memWeight; /* 몸무게 */
private int memBody; /* 삼각형(1)/역삼각형(2)/사각형(3)/타원형(4) */
}2) 화면 및 JSP
아이디와 이메일의 중복확인을 누르지 않으면 다음 단계로 넘어가지 않는다.
그리고 form:form 태그를 사용해서 위에서 설정한 @valid의 조건에 부합하지 않으면 위의 사진과 같이 input의 아래에 안내가 뜨도록 만들었다. valid를 설정했으므로 jsp에서는 매우 짧은 코드로 가능하다.
맨 위에 <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> 를 쓰고
<form:form modelAttribute="member" action="step2.wow" method="post"> </form:form>안에
<form:input path="memId" /><br>
<form:errors path="memId"/>
이렇게만 넣으주면 위의 사진처럼 에러가 났을 때 바로 message를 띄워주는 것!
form:form 전체 코드는 아래의 더보기를 누르면 확인하실 수 있으니 참고해주시길
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 가입 1단계</title>
</head>
<body>
<div class="container">
<h3>회원 가입 1단계</h3>
<div class="joininfo">
<form:form modelAttribute="member" action="step2.wow" method="post">
<table>
<colgroup>
<col width="25%" />
<col />
<col width="20%" />
</colgroup>
<tr>
<th>아이디</th>
<td>
<form:input path="memId" /><br>
<form:errors path="memId"/>
</td>
<td>
<button type = "button" id="idDuplCheck" class="btn btn-primary btn-sm">중복확인</button>
</td>
</tr>
<tr>
<th>비밀번호</th>
<td>
<form:password path="memPw" /><br>
<form:errors path="memPw"/>
</td>
</tr>
<tr>
<th>별명</th>
<td>
<form:input path="memNickname" placeholder="2글자 이상 작성해주세요." value="${naverLogin.user.nickname}"/><br>
<form:errors path="memNickname"/>
</td>
</tr>
<tr>
<th>이름</th>
<td>
<form:input path="memName" /><br>
<form:errors path="memName"/>
</td>
</tr>
<tr>
<th>우편번호</th>
<td>
<input type="text" name="memAddNo" id="memAddNo" class="postcodify_postcode5" />
</td>
<td>
<button type="button" class="btn btn-primary btn-sm" id="postcodify_search_button">검색</button>
</td>
</tr>
<tr>
<th>도로명 주소</th>
<td>
<form:input path="memAddress1" id="memAddress1" class="postcodify_address" /><br>
<form:errors path="memAddress1"/>
</td>
</tr>
<tr>
<th>상세주소</th>
<td>
<form:input path="memAddress2" /><br>
<form:errors path="memAddress2"/>
</td>
</tr>
<tr>
<th>휴대전화</th>
<td>
<form:input path="memPh" id="telInput" maxlength="13" placeholder="예) 010-1234-5678" /><br>
<form:errors path="memPh"/>
</td>
</tr>
<tr>
<th>이메일</th>
<td>
<form:input path="memEmail"/><br>
<form:errors path="memEmail"/>
</td>
<td>
<button type = "button" id="emailDuplCheck" class="btn btn-primary btn-sm">중복확인</button>
</td>
</tr>
<tr>
<th></th>
<td></td>
<td>
<div class="pull-right">
<a href="cancel" class="btn btn-primary btn-sm" >
취 소
</a>
<button type="submit" class="btn btn-primary btn-sm" >
다 음
</button>
</div>
</td>
</tr>
</table>
</form:form>
</div>
</div>
</body>
</html>
회원가입 2단계도 이와 같다. validation에 대해 더 자세한 내용이 궁금하시면 아래 블로그를 참고해주시길!
validation 설정 참고 : https://brilliantdevelop.tistory.com/95
validaiton 종류 참고 : https://wedul.site/448
'SPRING > SPRING 프로젝트' 카테고리의 다른 글
| SPRING 팀 플젝 : 에러 페이지 만들기 (0) | 2023.01.29 |
|---|---|
| SPRING 팀 플젝 : 쇼핑몰 고객센터 FAQ (0) | 2023.01.27 |
| SPRING 팀 플젝 : 오라클로 쇼핑몰 DB 설계하기(ERD) (0) | 2023.01.11 |
| SPRING 팀 플젝 : 네이버 아이디로 로그인 하기(네아로) (1) | 2023.01.07 |
| SPRING 팀 플젝 남성 전용 쇼핑몰 '초코룩' 개요 (0) | 2022.11.07 |
댓글