[2023.1.26.목] 폼 입력값 유효성 검증

 

폼 입력값 유효성 검증 

 

1. 프론트엔드 폼 입력값 유효성 검증 

• 폼에서 submit 이벤트 발생시 폼입력값을 스크립트 코드로 검증하는 것 

 

2. 백엔드 폼 입력값 유효성 검증 

• 폼 입력값을 저장하는 Form 객체에 각 멤버변수별로 입력값의 유효성을 체크하는 어노테이션을 추가한다.
• 컨트롤러의 요청핸들러 메소드에서 @Valid 어노테이션을 이용해서 Form 객체에 저장된 폼 입력값의 유효성을 검사한다.

 

2-1. 폼 입력값 유효성 검증 절차

 

0) tags.jsp 에서 폼 입력값 유효성 검증을 하게 해주는 태그 라이브러리 추가 

- prefix="form" : 폼 입력값 유효성 검증을 하게 해주는 태그 라이브러리 

 

 

 

1) pom.xml에 폼 입력값 유효성 검증을 지원하는 라이브러리 의존성 추가 

 

 

 

2) 입력폼에서 spring의 form 태그를 사용해서 입력폼과 입력필드 구성

 

<form:form > 태그, <form:input > 태그, <form:password > 태그, <form:errors > 태그 등을 이용해서 입력폼과 입력필드 구성

 

 

3) 폼 입력값을 저장하는 Form 클래스의 멤버변수에 어노테이션을 이용해서 유효성 체크 규칙  지정

 

@NotNull, @NotEmpty, @NotBlank, @Email 등의 어노테이션을 이용해서 유효성 체크 규칙을 멤버변수별로 지정 

 

 

4) 요청핸들러 메소드에서 Form 객체에 저장된 폼 입력값에 대한 유효성 검사를 수행하고, 검사결과 전달받기

 

* @Valid 어노테이션은 UserRegisterForm 객체에 저장된 폼 입력값에 대한 유효성 검사를 수행하게 하는 어노테이션 

* BindingResult 객체는 유효성 검사결과를 전달받는 객체 

 

 

 

 

---

 

폼 입력값 유효성 검사 

 

 

회원가입 폼으로 접근하는 방법 

1) 회원가입 메뉴 클릭  -> 이 때는 빈 객체인데 

2) 컨트롤러에서 유효성 검증을 통과하지 못했을 때 되돌아감  -> 이 때는 폼 객체에 담겨야 함 

 

-> 같은 페이지를 접속하는데 어떤 경로는 빈 객체, 어떤 경로는 폼 객체에 값이 담긴채로 갈 수 X 

-> 둘다 처음부터 폼 객체를 전달해줌 

 

 

 

1) register-form.jsp - form 태그를 이용해서 입력폼과 입력필드 구성

 

- <form:form /> 태그로 수정

- modelAttribute="userRegisterForm" 입력폼의 입력값을 담고 있는 객체를 속성에 추가

- <form:checkbox path="roleName" />, <form:input  ~~ path="id" /> name을 path 로 수정 

- <form:errors /> 유효하지 않을 때 메시지 (유효성체크 규칙 정할 때 어노테이션으로 지정한 메시지 내용 출력)

 

 

 

 

2) UserRegisterForm - 유효성 체크 규칙 지정 

 

 

(?=.*[a-z])          : 소문자 하나 이상 
(?=.*[A-Z])         : 대문자 하나 이상 
(?=.*\\d)             : 숫자 하나 이상 
[a-zA-Z\\d]{8,}   : 소문자, 대문자, 숫자 8글자 이상
[가-힣]{2,}          : 한글 2글자 이상 
\\d{2,3}               : 숫자 2,3 자리
\\d{3,4}               : 숫자 3,4 자리 
\\d{4}                  : 숫자 4 자리

* 폼 입력값 검증에 활용되는 어노테이션 

@NotNull       
   : null 값을 허용하지 않는다. 
@NotEmpty   
   : null 값을 허용하지 않으며, 최소 한 개 이상의 글자(공백 포함)를 포함해야 한다. 
@NotBlank   
   : null 값을 허용하지 않으며, 최소 한 개 이상의 글자(공백 제외)를 포함해야 한다.  
@Size (min= 숫자, max= 숫자)
   : 문자열 혹은 배열의 최소 글자수, 최대 글자수를 지정한다. 
@Length (min= 숫자, max= 숫자)
   : 문자열의 최소 길이, 최대 길이를 지정한다. 
@Min 
   : 최소 정수값을 지정한다. 
@Max 
   : 최대 정수값을 지정한다.
@Pattern (regxp=정규표현식, flag={("i", "g", "m"})
   : 문자열이 지정된 정규표현식과 일치해야 한다. 
@Email 
   : 문자열이 이메일 형식인지 확인한다. 
@URL
   : 문자열이 URL 형식인지 체크한다. 
@Past 
   : 날짜가 현재시간보다 과거인지 체크한다. 과거날짜만 선택할 수 있는 것 ( ex. 생일 ) 
@Future 
   : 날짜가 현재시간보다 미래인지 체크한다. 미래날짜만 선택할 수 있는 것 ( ex. 예매 )  

 

 

 

3) HomeController - 입력폼의 값을 담은 객체의 유효성 검사하고, 결과 전달받기 

 

 

- Model 객체에 담기, 

- @ModelAttribute 어노테이션으로 객체 불러오기

- @Valid 어노테이션으로 불러온 객체의 유효성 체크하기 

- BindingResult errors 로 검사결과 전달받기 

  ( errors.hasErrors() : 에러가 있다 ) 

- errors.rejectValue("id",  null, "이미 사용중인 아이디입니다.") : 필드에 대한 에러정보 추가 (필드, 에러코드, 에러메시지) 

  ( 넘어가지 못한 사유를 적음, "필드명"은 입력필드의 path부분과 동일하게 적음 ) 

 

 

=> 입력폼 객체를 처음부터 넘겨줌

=> 입력값 유효성 검증을 통과하지 못한 항목을 제외하고는 값이 그대로 들어있는 채로 입력폼으로 다시 되돌아감 

 

 

 

※ 어노테이션으로는 검증할 수 없는 사항 ( ex. 사용중인 아이디, 이메일 체크 -> db를 확인해야 알 수 있음) 

-> 예외객체를 상속받은 각각의 예외객체 생성 

-> 거절 사유를 검사결과인 errors 에 담아서 출력 

-> 예외객체 던지기 

-> 오류페이지가 아닌 오류메시지를 바로 출력할 수 있게 함 

 

 

 

- Service의 registerUser 메소드에서 예외객체를 각각 따로 던지기 (아이디가 겹칠 경우, 이메일이 겹칠 경우)

 

 

 

 

 

 

 

 

---

 

csrf 토큰 

 

 

* 사이트간 요청위조 방지 ( csrf 토큰을 같이 보내는 것 )

- csrf를 활성화 ( = csrf 객체의 disable 메소드를 없앰 ) 

( 기본값은 csrf 가 활성화되어있는 상태, 이걸 비활성화 하려면 csrf 객체의 disable()메소드를 통해 비활성화 )

 

 

 

 

 

-> 회원가입 폼 -> <form:form > 태그

-> 로그인, 로그아웃 -> <sec:csrfInput /> 태그 

 

 

로그인 

 

- csrf 토큰값 추가 

 

 

 

 

로그아웃 

- 로그아웃 때도 post 방식으로 토큰을 전달해야 함 (히든필드에 추가해야 하니까 post 방식)

 

* navbar.jsp 

- 로그아웃 버튼에 클릭이벤트 -> 제출시키는 이벤트 

- 로그아웃 폼 태그를 만들어서 post 방식으로 제출 

- 토큰 전달하는 태그 추가 

 

 

 

 

 

 

---

 

 

** 
html 안에서 주석달 때 주의 

<!-- !>         : 안에 태그가 없을 때는 이 주석 사용 

<%-- --%>  :안에 태그 쓸 때는 이 주석 사용