studyplan
스프링부트 회원가입 만들기 ! 2. 회원가입 검증 정규표현식 , 비동기처리 // 3가지 경우 trim, count(*) ,Map ,fetch(),method : 'get' 본문
스프링부트 회원가입 만들기 ! 2. 회원가입 검증 정규표현식 , 비동기처리 // 3가지 경우 trim, count(*) ,Map ,fetch(),method : 'get'
무한머니 2022. 8. 5. 00:57이렇게 sign UP 을 누르면> ?
이렇게 회원 가입 폼이 나온다 !
html 은 자바스크립트때 가져올때만 보려고 한다 !
회원 가입을 하려면 검증 해야될것이 엄청 많다 !
그래서 검증할수있게 정규 표현식을 써야 한다 !!
const getIdCheck = RegExp(/^[a-zA-Z0-9]{4,14}$/);
// ^ 로 시작하는 $ 끝나는 , {4,14} 최소 4자 최대 14 자
const getPwCheck = RegExp(
/([a-zA-Z0-9].*[!,@,#,$,%,^,&,*,?,_,~])|([!,@,#,$,%,^,&,*,?,_,~].*[a-zA-Z0-9])/);
// 영문 ,숫자가 들어가야되고 / 특수문자 가 들어가야된다 , | 또는 특수문자로 시작하고 , 영문이 하나라도 들어가도 됨
const getName = RegExp(/^[가-힣]+$/);
// 한글로 써야 된다 !
const getMail = RegExp(/^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/);
// 영어로 시작하고 @가 들어가야되고 . 영문이 나와야 되고 , .뒤에서는 영어로 나와야 된다
라는 뜻이다 !!
이걸로 입력하는것과 다른값이 나오면
입력값 각각 false 로처리가 된다 !
모두 false 로 만들고 , 입력값이 올바르게 작성ㅇ ㅣ된다면
모두 true 가 되어서 서버로 넘어가게 된다 !
아이디 검증을 먼저 보자 !
id=user_id 인 인풋창을 들고와서
키업 이벤트를 걸었다 !
키업 이라는것은
내가 키보드를 떼고 .라는 뜻이다 ! 입력을 마친 후 라고 생각해도 된다 !
저 인풋창을 보자 !
id=user_id 인 인풋창 잡아오고! , maxlength 로 입력값의 길이를 제한하고
placeholer 를 걸어서 미리보기에 저 문구가 나온다 !
우리는 아이디를 입력 받을때
크게 3가지로 나눌수 있다 !
1. 아이디를 입력하지 않은경우 !
$idInput.val().trim() === ''
// 인풋창, 값이 , 빈문자열 제거 ! 했는데도 불구하고 '' 빈 문자라면? 이라는 뜻이다
예를들어 입력값이
" " 이렇게 들어올수도있어서 trim()으로 이걸 제거시켜버린것이다 !
이런경우 !
이렇게 나오는걸 볼수있다 !
2번째 !
이제는 입력을 받은경우니까 정규표현식으로
영문입력하고 , 4~14자리수를 잘 입력했는지 확인한다 !
2자리로 입력해서 이렇게된걸 볼수있다 !!
3번쨰 !
아이디 중복확인 해야되는데
실시간으로 검색을 해서 보여줘야 함으로
비동기로 진행한다!
저기로 보낼경우 어떻게 되는지 보자 !
method 가 없으니까 일단 GetMapping 인건 확인했고 !
비동기라
@ResponseBody 를 붙였고
type= account // 계정 검색중 이라서 이렇게 타입이 왔고
value는 인풋창을 통해서 들어왔다 !
memberService.checkSignUpValue(type, value);
여기서 무슨일이 일어나는지 보자 !
여기서 보면 새로운 뉴맵 이라고해서
그 안에
type 과 ,
value 를 키값으로 넣어주고 !
받아온 값을 value 로 넣는걸 확인 할수있다
그걸 다시
memberMapper.isDuplicate(checkMap)
이 함수로 돌렸는데 !
가보면 이렇게 생겼고
이건 DB에서 꺼내서 확인 해야하는작업 이기때문에
xml로 들어가서 확인 해봐야 겠다 !
만약 type 이 account 면
where account ==#{value}
#{value} = type 이 acoount 일때 account 가 들어간다 !
그래서 지금은 아이디를 조회하고있는거라서
where account = account(인풋에서 들어온 아이디 값)
tbl_member 에서 account(계정) 이 인풋에서 들어온 값! 인 거의 갯수를 말한다 !
앞에서 말했듯이 account 는 PK 이기때문에 하나만 있어야 함으로
값이 1 또는 0일수 밖에없다 !
그렇게
중복된 아이디를 검사 받는다 !
'스프링' 카테고리의 다른 글
스프링부트 회원가입 만들기 ! 4. 비밀번호 인코딩 ! 스프링 시큐리티 , BCryptPasswordEncoder ,build.gradle ,oracle DB (0) | 2022.08.05 |
---|---|
스프링부트 회원가입 만들기 ! 3. 회원가입 정보 DB에 넣기 ! /비밀번호 인코딩 ! 스프링시큐리티 , BCryptPasswordEncoder (0) | 2022.08.05 |
스프링부트 회원가입 만들기 ! 1. 로그인의 시작 table과 mapper 만들기 ! (0) | 2022.08.05 |
스프링부트 파일 업로드 ! 비동기 버전 4. 넣은 파일 src 경로 넣기! (0) | 2022.08.04 |
스프링부트 파일 업로드 ! 비동기 버전 5. 이미지 아닌 파일 , 다운로드 만들기 (0) | 2022.08.04 |