[Spring Boot] 데이터 유효성 검사 Validation

데이터 유효성 검사 만들기

회원가입 창에서 가입버튼을 눌렀을 때,

각 데이터가 조건에 맞게 잘 입력되었는지 데이터 유효성 검사를 만들어보겠습니다.

 

 

여기서는 정규 표현식이 사용되므로

정규 표현식 포스팅을 참고해주시면 이해하는데 도움이 될겁니다!

https://bagun-coding.tistory.com/entry/JavaScript-%EC%A0%95%EA%B7%9C-%ED%91%9C%ED%98%84%EC%8B%9D

[JavaScript] 정규 표현식

 

 

 

가입하기 버튼을 클릭했을 때, 실행되는 함수를 만들어줍니다.

 

 

아이디, 연락처, 이메일의 데이터 유효성 검사를 해줄겁니다!

 

 

form안에 해당 요소들은 name 속성으로 접근할 수 있습니다.

const joinForm = document.querySelector('#joinForm');

폼을 선택해주시고

joinForm.memberId.value

하면 해당 폼의 아이디 값에 접근 가능합니다!

 

 

 

joinForm.memberId.value == ' '

 아이디를 입력하지 않으면 해당 부분에 메세지가 나오는 함수를 실행해주고

아이디를 4글자 이하로 입력하면 해당 부분에 메세지가 나오는 함수가 실행되도록 합니다.

 

 

 

여기서 inputInvalidate()는 오류 메세지가 나타나는 함수를 따로 만들어놨습니다.

오류메세지 띄우는 함수 inputInvalidate()

 

 

 

 

연락처와 이메일 같은 경우 정규 표현식을 이용해서 검사하시면 됩니다.

 

휴대폰 정규식
/^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/;

 

이메일 정규식
/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/;

 

 

 

 

검사를 다 통과하면

해당 폼을 submit() 함수로 실행시켜주시면 됩니다!