[회원가입] 유효성 검사

UserDTO에 @Valid 사용

 

build.gradle

implementation 'org.springframework.boot:spring-boot-starter-validatio

 

---

 

import

import jakarta.validation.constraints.NotBlank;
import jakarta.validation.constraints.Pattern;

 

 

@NotBlank

@Pattern

@Getter
@Setter
@AllArgsConstructor
@NoArgsConstructor
@Builder
public class UserDTO {
	
	private Long id;

	@JsonProperty("userId")
	@NotBlank(message = "아이디는 필수 입력 값입니다.")
	private String userId;
	
	@JsonProperty("password")
	@NotBlank(message = "비밀번호는 필수 입력 값입니다.")
	@Pattern(regexp = "(?=.*[0-9])(?=.*[a-zA-Z])(?=.*\\W)(?=\\S+$).{8,16}", message = "비밀번호는 8~16자 영문 대 소문자, 숫자, 특수문자를 사용하세요.")
	private String password;

	@JsonProperty("password2")
	@NotBlank(message = "비밀번호는 필수 입력 값입니다.")
	@Pattern(regexp = "(?=.*[0-9])(?=.*[a-zA-Z])(?=.*\\W)(?=\\S+$).{8,16}", message = "비밀번호는 8~16자 영문 대 소문자, 숫자, 특수문자를 사용하세요.")
	private String password2;
	
	@JsonProperty("name")
	@NotBlank(message = "이름은 필수 입력 값입니다.")
	private String name;
	
	@JsonProperty("birth")
	@NotBlank(message = "생년월일은 필수 입력 값입니다.")
	private String birth;
	
	@JsonProperty("email")
	@NotBlank(message = "이메일은 필수 입력 값입니다.")
	@Pattern(regexp = "^(?:\\w+\\.?)*\\w+@(?:\\w+\\.)+\\w+$", message = "이메일 형식이 올바르지 않습니다.")
	private String email;
	
	@JsonProperty("addr1")
	private String addr1;
	
	@JsonProperty("addr2")
	private String addr2;

}

 

 

---

 

 

RegisterController.java

인자에 @Valid 애노테이션 & Errors errors 추가

if (errors.hasErrors()) {생략} 추가

	@PostMapping("/register")
	public ResDTO register(@Valid @RequestBody UserDTO userDTO, Errors errors) {
		// TODO: 유효성 검사 관련 내용 추가
		// 유효성 검사 결과 확인
		if (errors.hasErrors()) {
			// 유효성 검사 실패 시 처리
			return ResDTO.builder()
					.code("402")
					.message("입력값이 유효하지 않습니다.")
					.data(errors.getAllErrors())
					.build();
		} else {
				return userService.register(userDTO);
			}
	}

 

---

 

[React] Register.js

•  useState 훅을 사용하여 유효성 검사를 위해 추가
  let [resUserData,setResUserData] = useState([]);
• 유효성 검사 실패 시
  if(res.data.code == 402){
          setResUserData(res.data.data);
  }

    // useState 훅을 사용하여 유효성 검사를 위해 추가
    let [resUserData,setResUserData] = useState([]);

    // 회원가입
    let register = () => {
        // 입력란이 비어있을 경우의 경고창
        // if(!user.userId || !user.password || !user.name || !user.password2 || !user.birth || !user.email){
        //     alert("모든 항목을 다 작성해주세요.");
        //     return;  // 함수 실행을 중단하고 반환
        // }
        axios({
            url:'http://localhost:8082/api/v1/auth/n/register',
            method: 'POST',
            data: user
        })
        .then((res) => {
            // 회원가입 성공
						
					 // 유효성 검사 실패 시
            if(res.data.code == 402){
                setResUserData(res.data.data);
            }

            console.log("Response:", res.data);
        
            if(res.data.code == 200){
                alert("회원가입이 완료되었습니다!");
            }
        })
        .catch((error) => {
            // 회원가입 실패
            alert("서버 오류");
            console.log("Error:", error);
        });
    }

 

                    {/* 아이디 */}
                    <div>
                        <h5> 아이디 </h5>
                        <input type='text' className="input-field" name={"userId"} onChange={onChangeUserData} maxLength='20' placeholder="7자 이상의 문자의 아이디를 입력해주세요." autoFocus/>
                        {
                            resUserData.map((data)=>(
                                <>
                                {
                                    "email" === data.field ? (
                                        <span style={{
                                            color:"red"
                                        }}>{data.defaultMessage}</span>
                                    ):(<></>)
                                }
                                </>
                            ))
                        }
                    </div>

 

 

---

 

 

💻 결과

 

 

이런 느낌으로 유효성 검사가 되는 모습을 확인할 수 있습니다.

css는 손봐야하니 기능확인만 해주세요! 😅