회원가입시 검증 기능 추가 - 검증 직접 처리

1. 요구사항

---

• 로그인 Id
  • 필수
  • 다른 유저와 중복할 수 없음.
• 비밀번호
  • 필수
• 이름
  • 필수
  • 문자 말고 다른 타입 허용 안함.
• Email
  • 필수
  • 다른 유저의 id와 중복될 수 없음.

 

2. MemberController

---

• 필수값 입력, id중복여부를 검증한다.
• error가 있는 경우 errors에 error가 발생한 필드 명과 message를 넣어준다.
• errors는 model에 담아 view로 넘겨준다.
• view에서 에러가 있는 경우 해당 메시지를 보여 줄 예정.
• 만약 이전 페이지에서 필드 에러가 발생하여 수정후 다시 요청을 보냈을 경우를 대비하여
• error.clear()를 먼저 해준다.

Map<String, String> errors = new HashMap<>();

    @PostMapping("/new/form")
    public String save(@ModelAttribute("member") MemberForm memberForm, BindingResult bindingResult, Model model){
        errors.clear();
        log.info("member save 로직 시작");
        log.info("userId : {}", memberForm.getUserId());

        //검증 로직
        fieldValidation(memberForm, errors, model);

        if(!errors.isEmpty()) {

            log.info("예외발생");
            log.info("errors : {}", errors);
            model.addAttribute("errors", errors);
            return "member/addMemberForm";
        }


        log.info("errors: {}", errors);
        model.addAttribute("errors", errors);
        memberJoinAndLogging(memberForm);
        return "redirect:/";
    }


    private Map<String, String> fieldValidation(MemberForm memberForm, Map<String, String> errors, Model model) {
        //userId가 null인 경우
        log.info("검증로직 실행");
        if(!StringUtils.hasText(memberForm.getUserId()) || memberForm.getUserId().equals("")){
            //bindingResult.addError(new FieldError("member", "userId", "ID는 필수 입니다."));
            errors.put("userId", "ID는 필수 입니다.");
        }

        if(memberService.findMemberByUserId(memberForm.getUserId()) != null){
            String message = "사용하신 "+ memberForm.getUserId() + " 는(은) 이미 사용된 ID 입니다.";
            log.info("userId : {}", memberForm.getUserId());
            errors.put("userId", message);
        }

        //PW가 null인경우
        if(!StringUtils.hasText(memberForm.getPassword())){
            //bindingResult.addError(new FieldError("member", "password", "PW는 필수 입니다."));
            errors.put("password", "PW는 필수 입니다.");
        }


        //name이 null인 경우
        if(!StringUtils.hasText(memberForm.getName())){
            //bindingResult.addError(new FieldError("member", "password", "PW는 필수 입니다."));
            errors.put("name", "이름은 필수 입니다.");
        }

        //email이 null인 경우
        if(!StringUtils.hasText(memberForm.getEmail())){
            //bindingResult.addError(new FieldError("member", "password", "PW는 필수 입니다."));
            errors.put("email", "email은 필수 입니다.");
        }

        return errors;
    }

 

 

3. addMemberForm.html

---

• th:if를 하용하여 errors에 '필드명'이 있으면 에러 메시지를 출력하도록 한다.
• errors? 와 같이 model 이름 뒤에 "?"을 붙이면 해당 attribute아 null인경우 실행하지 않는다.
• 예를들어 errors가 null인 경우 errors.containKey()가 실행되지 않는다.

  <form action="" th:action th:object="${member}" method="post">

    <div>
      <label for="loginId">로그인 ID</label>
      <input type="text" id="loginId" th:field="*{userId}"
             th:class="${errors?.containsKey('userId')} ? 'form-control field-error' : 'form-control'"
             class="form-control">
      <div th:if="${errors?.containsKey('userId')}" th:text="${errors['userId']}"
           th:class="${errors?.containsKey('userId')} ? 'field-error' : 'form-control'"
           class="field-error" >
        로그인 Id 오류
      </div>
    </div>
    <br>
    <div>
      <label for="password">비밀번호</label>
      <input type="password" id="password" th:field="*{password}"
             th:class="${errors?.containsKey('password')} ? 'field-error form-control' : 'form-control'"
             class="form-control">
      <div th:if="${errors?.containsKey('password')}" th:text="${errors['password']}"
           th:class="${errors?.containsKey('password')} ? 'field-error' : 'form-control'"
           class="field-error" >
        로그인 Id 오류
      </div>
      <br>
    </div>
    <div>
      <label for="name">이름</label>
      <input type="text" id="name" th:field="*{name}"
             th:class="${errors?.containsKey('name')} ? 'field-error form-control' : 'form-control'"
             class="form-control">
      <div th:if="${errors?.containsKey('name')}" th:text="${errors['name']}"
           th:class="${errors?.containsKey('name')} ? 'field-error' : 'form-control'"
           class="field-error" >
        로그인 Id 오류
      </div>
    </div>
    <div>
      <label for="name">email</label>
      <input type="text" id="email" th:field="*{email}"
             th:class="${errors?.containsKey('email')} ? 'field-error form-control' : 'form-control'"
             class="form-control">
      <div th:if="${errors?.containsKey('email')}" th:text="${errors['email']}"
           th:class="${errors?.containsKey('email')} ? 'field-error' : 'form-control'"
           class="field-error" >
        로그인 Id 오류
      </div>
    </div>
    <hr class="my-4">
    <div class="row">
      <div class="col">
        <button class="w-100 btn btn-primary btn-lg" type="submit">회원가입</button>
      </div>
      <p></p>
      <div class="col">
        <button class="w-100 btn btn-dark btn-lg"
                onclick="location.href='members.html'"
                th:onclick="|location.href='@{/}'|"
                type="button">취소</button>
      </div>
    </div>
  </form>

 

 

4. 결과

---

• 필수 값을 입력 안했을 경우.

• id가 중복되게 수정해주자.

• 수정 후 회원가입 재시도
  • 에러가 발생한 부분만 에러 메세지 띄움.

• 정상적으로 입력하면?

• 성공!

 

5. 앞으로 

---

• est용 data 서버시작할 때 DB에 올리기
• Listener
  
  • createdAt, updatedAt등
• 게시글에 작성자 표시
• view 정리
• 게시글 검색
  • 검색 옵션 추가 : 작성자, 제목 구분
• 영속성 전이 설정
  • 게시글 삭제
  • 회원 탈퇴
• 댓글 삭제 버튼
• 글 수정 기능 추가
• 대댓글
• 검증 & 예외처리
  • 회원 가입시 필수 정보 지정.
  • 데이터 형식 지정(email)
  • Spring제공 Validator로 변경.
• 인증처리
  • 로그인한 사용자만 글 & 댓글 작성 가능.
  • 본인이 작성한 글, 댓글만 삭제 가능
  • 관리자는 모든 권한
• 예외처리
• 페이징 처리
• 컬렉션 조회 최적화

 

 

6.  GitHub: 211011

---

GitHub - bsh6463/blog