0. 들어가기 전에
** 기존의 회원가입 코드에 자바스크립트, ajax, mybatis를 넣는 중 기존의 코드가 입력값을 받아서 넘겨버리고 끝이어서이제 실제 웹서비스라 생각하고 여러가지 넣어보자! 하는 중에 가장 먼저 비밀번호가 정규식 처리를 하고 그 유효성에 따라 부트스트랩으로 표현해보는 것을 시도해보았다.
** 만드는 중에 생각해보니 요즘 회원가입 창들은 유효성 검사를 하는 버튼을 눌러서 유효성을 확인해보는 것이 아니라 훨씬 고급스러운 방법(?)으로 확인했던 것 같아 국내에서 가장 많이 쓰는 네이버의 회원가입 창을 확인해보았다.
** 위와 같이 따로 버튼이 있거나 최종 가입완료 버튼을 눌렀을 때 확인할 수 있는 게 아니라 저렇게 심플하고도 즉각적으로 알 수 있었다.
** javascript가 익숙치 않아 처음에는 어떻게 해야 비슷하게라도 만들어볼까해서 많은 검색을 했었는데 알고나니 생각보다 어렵지 않게 만들었다.
1. 자바스크립트 focus와 blur
자바스크립트 이벤트 등록(addEventListener) 중 form이벤트에는 focus와 blur가 있다.
| 이벤트 | 설명 |
| foucs | 노드에서 포커스를 획득했을 때에 발생 |
| blur | 노드에서 포커스가 떠날 때에 발생 |
- 위의 네이버 회원가입 gif를 잘 보면 비밀번호 입력창이 클릭된 상태에서 벗어났을 때(다른 곳을 클릭했을 때) 이벤트가 발생함을 알 수 있다.
- 이 이벤트를 이용해 정규표현식에 통과를 못했을 때 왼쪽처럼, 통과했을 때 오른쪽처럼 나타낼 것이다.
<script type="text/javascript">
//비밀번호 입력창을 클릭하여 focus 됐을 때
$("#userPW").focus(function(e) {
pwChk();
});
//비밀번호 입력창 외의 다른 곳을 클릭하여 blur 됐을 때
$("#userPW").blur(function(e) {
pwChk();
});
</script> - 비밀번호를 입력하고자 입력창에 focus되었을 때와 입력 후 다른 곳을 눌러 blur되었을 때 정규표현식을 확인하는 메서드를 실행시킨다.
2. 정규표현식이란?
var regex = /정규표현식/;
if(!regex.test("검사할문자열")) {...}
정규표현식이란 ?문자열을 처리하는 방법 중 하나로 특정한 조건의 문자를 검색, 치환 등의 작업을 간편하게 할 수 있도록 도와주는 수단이다. (정규표현식은 특정 언어에 종속되지 않는다)
- 정규 표현식은 회원가입시 이메일의 형식, 전화 형식, 주민번호 형식, 비밀번호 형식(알파벳, 특수문자, 숫자의 조합) 등에 많이 사용한다. 자주 쓰는 정규 표현식은 다음과 같다.
| 표현식 | 설명 |
| /^[0-9]*$/ | 숫자로만 되어 있는지 검사 |
| /^[a-zA-Z]*$/ | 알파벳으로만 되어 있는지 검사 |
| /^[ㄱ-ㅎ가-힣]*$/ | 한글로만 되어 있는지 검사 |
| /^[a-zA-Z0-9]*$/ | 알파벳과 숫자로만 되어 있는지 검사 |
| /^[ㄱ-ㅎ가-힣0-9]*$/ | 한글과 숫자로만 되어 있는지 검사 |
| /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i | 이메일 형식 검사 |
| /^01(?:0|1|[6-9])(?:\d{3}|\d{4})\d{4}$/ | 핸드폰 번호 형식검사 |
| /^\d{2,3}\d{3,4}\d{4}$/ | 집 전화 형식 검사 |
| /^\d{6}[1-4]\d{6}/ | 주민번호 형식 검사 |
- 여기서 << 대소문자, 숫자, 특수문자 중 세가지 조합 이상 8자리~16자리까지 >> 비밀번호 규칙을 사용하려고 한다.
//비밀번호 정규표현식 확인 메서드
var pwChk = function () {
//비밀번호 입력값
var pw = $("#userPW").val();
//비밀번호 검증할 정규표현식
//대소문자, 숫자, 특수문자 중 세가지 조합 이상 8자리~16자리까지
var chk=/^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,16}$/.test(pw);
if(chk){ //정규표현식을 통과한다면
$("#pwErr").hide();
changeSuccess("#userPW");
}else{ //정규표현식을 통과 못 한다면
$("#pwErr").show();
changeError("#userPW");
}- 비밀번호 입력창인 userPW를 가져와 test()를 통해 정규 표현식에 맞는지 확인해본다.
- 통과했다면 true가 아니라면 false가 chk에 값으로 대입된다.
- 값에 따라 changeError와 changeSuccess를 불러오며 이는 비밀번호 입력창의 색상과 글리피콘을 바꿔주는 메서드이다.
//성공 상태로 바꾸는 메서드
function changeSuccess(sel){
$(sel)
.parent()
.removeClass("has-error")
.addClass("has-success")
.find(".glyphicon")
.removeClass("glyphicon-remove")
.addClass("glyphicon-ok")
.css("color", "#3CA03C")
.show();
};
//에러 상태로 바꾸는 메서드
function changeError(sel){
$(sel)
.parent()
.removeClass("has-success")
.addClass("has-error")
.find(".glyphicon")
.removeClass("glyphicon-ok")
.addClass("glyphicon-remove")
.css("color", "#FF607F")
.show();
};
3. 부트스트랩
부트스트랩은 클래스에 따라 레이아웃 및 디자인이 바뀐다.
input 태그의 색상은 아래와 같으며 태그에 성공시 success, 실패시 error의 효과를 주었다.
- 글리피콘 역시 input태그 오른쪽 끝에 넣어주려하는데 그냥 넣을 수 없고,
- <intput class="form-control"> 요소 안과 글리피콘 클래스에 has-feedback을 넣어두어야한다.
<!-- 비밀번호 -->
<label class="control-label" for="pw">비밀번호</label>
<div class="form-group has-feedback" > <!-- 여기에 error 혹은 success 속성 부여 -->
<input type="password" id="userPW" class="form-control" name="userPassword" maxlength="20">
<span class="glyphicon glyphicon-ok form-control-feedback" style="display :none"></span>
<span id="pwErr" style="display :none; color:red;" class="help-block" > 대소문자, 숫자, 특수문자 중 세가지 조합 이상 8자리~16자리까지</span>
</div>
** 결과화면
4. 비밀번호 재확인
- 비밀번호 재확인 입력칸은 비밀번호 입력칸과 같은 문자를 입력했을 때만 ok 사인이 나야한다.
//비밀번호 재확인 입력칸에 focus했을 때
$("#r_userPW").focus(function() {
recheck();
});
//비밀번호 재확인 입력칸이 blur됐을 때
$("#r_userPW").blur(function() {
recheck();
});- 동작원리는 역시 focus와 blur를 사용한다.
//비밀번호 재확인 메서드
function recheck() {
var rpw = $("#r_userPW").val();
var pw = $("#userPW").val();
if(rpw == pw){
$("#r_pwErr").hide();
changeSuccess("#r_userPW");
}else{
$("#r_pwErr").show();
changeError("#r_userPW");
}
};
<!-- 비밀번호 재입력 -->
<label class="control-label" for="r_pw">비밀번호 확인</label>
<div class="form-group has-feedback">
<input type="password" id="r_userPW" class="form-control" name="userPassword" maxlength="20">
<span class="glyphicon glyphicon-ok form-control-feedback" style="display :none"></span>
<span id="r_pwErr" class="help-block" style="display :none"> 비밀번호와 일치하지 않습니다. 다시 입력해 주세요.</span>
</div>- changeSuccess와 changeError를 재활용하였다.
그런데 여기서 디테일(?)한 QA 테스트(?)를 해보면
(1) 비밀번호 입력칸이 공백일 때 재입력칸 focus시 success가 뜨는점
(2) 비밀번호 재확인 먼저 입력 후 비밀번호 입력했을 때 재확인이 계속 Error 상태. 동시에 success 시키고 싶음
(3) 정규표현식에 부합하지 않은 비밀번호가 입력되고 재확인에도 같은 값을 넣었을 때 재확인에는 success가 뜸. Error를 뜨게 하고 싶음.
2번과 3번은 네이버 회원가입에도 적용되지 않았다. 이렇게까지 디테일할 필요는 없을 것 같지만 공부하는 차원에서 괜히 도전 해보고 싶었다.
(1) 비밀번호 입력칸이 공백일 때 재입력칸 focus시 success가 뜨는점
이건 가장 쉽다. 비밀번호와 재입력이 같을 때 <<- 에 둘다 공백이 아니도록 조건을 걸어주면 끝이다.
//비밀번호 재확인 메서드
function recheck() {
var rpw = $("#r_userPW").val();
var pw = $("#userPW").val();
if(pw!="" && rpw !="" && rpw == pw){
$("#r_pwErr").hide();
changeSuccess("#r_userPW");
}else{
$("#r_pwErr").show();
changeError("#r_userPW");
}
};
(2) 비밀번호 재확인 먼저 입력 후 같은 값을 비밀번호에 입력했을 때 재확인이 계속 Error 상태. 동시에 success 시키고 싶음.
코드가 처음부터 글의 흐름과 같진 않았고 수정을 많이 했었다.
recheck메서드를 재활용가능하도록 바꾸었고 아래 코드를 이걸 정규표현식 체크하는 부분 마지막에 넣었다.
//혹시 비밀번호 재확인을 먼저 입력하고 비밀번호를 입력했을 때
if($("#r_userPW").val() != ""){
recheck();
}
(3) 정규표현식에 부합하지 않은 비밀번호가 입력되고 재확인에도 같은 값을 넣었을 때 재확인에는 success가 뜸. Error를 뜨게 하고 싶음.
예를 들어 1111을 넣게 되면 위와 같이 정규표현식에는 부합하지 않으나 success가 뜬다.
코드를 짜보고 나니까 기능 자체가 "같은지 확인"이니 틀린 것은 아니지만
이런 경우도 생길 수 있으니 Error를 띄우는 게 맞지 않을까..? 생각한다.
전역변수로 boolean형의 flag를 하나 만들어서 비밀번호 입력칸이 정규표현식에 ok일 때 true를 주고 no일 때는 false를 주어서 재확인칸이 ok가 될 조건에 flag가 true일 때만으로 바꿔준다.
var pwflag = false;
//비밀번호 정규표현식 확인 메서드
var pwChk = function () {
//비밀번호 입력값
var pw = $("#userPW").val();
//비밀번호 검증할 정규표현식
//대소문자, 숫자, 특수문자 중 세가지 조합 이상 8자리~16자리까지
var chk=/^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,12}$/.test(pw);
if(chk){ //정규표현식을 통과한다면
$("#pwErr").hide();
changeSuccess("#userPW");
pwflag = true;
}else{ //정규표현식을 통과 못 한다면
$("#pwErr").show();
changeError("#userPW");
pwflag= false;
}
//혹시 비밀번호 재확인을 먼저 입력하고 비밀번호를 입력했을 때
if($("#r_userPW").val() != ""){
recheck();
}
};
//비밀번호 재확인 메서드
function recheck() {
var rpw = $("#r_userPW").val();
var pw = $("#userPW").val();
if(pw!="" && rpw !=""&& pwflag == true && rpw == pw){
$("#r_pwErr").hide();
changeSuccess("#r_userPW");
}else{
$("#r_pwErr").show();
changeError("#r_userPW");
}
};
멘트 역시 위와 같이 조합규칙을 설명하도록 바꾸도록 해야겠다.
♣ 참고 및 인용
'웹 개발 한걸음' 카테고리의 다른 글
| [Mybatis + Ajax] 회원가입 구현해보기 (0) | 2021.05.13 |
|---|---|
| [Mybatis + Ajax] 아이디 중복 확인 구현해보기 (0) | 2021.05.10 |
| [Mybatis + Ajax] 로그인 구현 해보기 (0) | 2021.05.03 |
| [Mybatis] 마이바티스 파헤쳐보기 - 2 - (0) | 2021.04.28 |
| [Mybatis] 마이바티스 파헤쳐보기 - 1 - (0) | 2021.04.22 |
