태공이의 라이프
개인적인 이야기들 , IT , 책, 영화 , 여행
IT 이야기/자바스크립트 (1)
비밀번호 정규식을 이용한 체크 로직
반응형

프로젝트를 하던 중 비밀번호 대소문자 , 특수문자 , 숫자, 길이를 체크 해야 하는 로직이 필요 했다.

 

검색을 하던 중 다들 현란한 기술로 정규식을 짜서 사용 하였는데

 

실제로 짜여진 코드들을 보면 특수 문자의 갯수나 대문자나 숫자의 길이를 재는 로직은 없었다.

 

그래서 고민 끝에 새로 짜기로 마음을 먹고 새로 코드를 짜게 되었다.

 

일단 변수들을 선언 하였다.

var pattern1 = /[0-9]/; // 숫자 정규식
var pattern2 = /[a-z]/; // 소뮨자 정규식
var pattern3 = /[~!@#$%^&*()_+|<>?:{}]/; // 특수문자 정규식
var pattern4 = /[A-Z]/; // 대문자 정규식
var str = $("#passwordinput아이디").val();
var pattern1length=0; // 숫자 정규식의 길이를 재기 위해 선언
var pattern2length=0; // 소문자 정규식의 길이를 재기 위해 선언
var pattern3length=0; // 특수문자 정규식의 길이를 재기 위해 선언
var pattern4length=0; // 대문자 정규식의 길이를 재기 위해 선언
var strlist = str.split(""); // 문자들의 길이를 재기 위해서 input value를 split으로 배열에 담음
var PS_min_length ="${DB안에서가져온데이터}"; // DB에서  최소 길이 값을 가져와서 변수에 저장
var PS_special_char ="${DB안에서가져온데이터 }"; // DB에서  특수문자 길이 값을 가져와서 변수에 저장
var PS_upppercase ="${DB안에서가져온데이터 }"; // DB에서  대문자 길이 값을 가져와서 변수에 저장
var PS_lowercase = "${DB안에서가져온데이터  }"; // DB에서  소문자 길이 값을 가져와서 변수에 저장
var PS_digit="${DB안에서가져온데이터  }"; // DB에서  숫자 길이 값을 가져와서 변수에 저장

기본 적으로 받아야 하는 것들과 비교해야 할 값들이 많아서 다 선언 해 주 었습니다.

 

선언 한 변수들을 조건문과 반복문을 이용 해서 비교할 예정 입니다.

 

 

$("#비밀번호입력input아이디").change(function(){ //input 박스를 벗어 나게 되면 발생 하게 만들었습니다.
					
if(!pattern1.test(str) || !pattern2.test(str) || !pattern3.test(str) || str.length < 4 ) // 기본적으로 특수 문자 , 숫자 , 문자와 텍스트의 길이를 측정합니다.
{ 
	for (var i = 0; i < strlist.length; i++) { //배열에 담긴 값을 
		if(  pattern1.test(strlist[i])==true) // 숫자 개수 카운팅
			{
				pattern1length =pattern1length+1;	//true면 카운팅 
			}
									 
		else if(  pattern2.test(strlist[i])==true) //소문자 카운팅
			{
				pattern2length =pattern2length+1;//true면 카운팅
			}
									 
		else if(  pattern3.test(strlist[i])==true) //대문자 카운팅
			{
				pattern3length =pattern3length+1;
			}

		else if(  pattern4.test(strlist[i])==true) //숫자 카운팅
			{
			pattern4length =pattern4length+1;//true면 카운팅
			}
		}
	if(PS_min_length < str.length || PS_special_char < pattern3length || PS_upppercase < pattern4length || PS_lowercase < pattern2length || PS_digit < pattern1length)
			{
				alert("비밀번호는 4자리 이상 문자, 숫자, 특수문자로 구성하여야 합니다.");	 
			}
								 
	return false; 
		} 
		else 
{ 
		return true;
}


});
						
						$("#패스워드비교 input 아이디").change(function(){
							if($("#패스워드 아이디").val()!=$("패스워드비교 input 아이디").val()){
							alert("비밀 번호가 다릅니다.");
							$("#패스워드비교 input 아이디").val(''); //패스워드가 다를 경우 비교할 input 값 비우기
							$("#패스워드비교 input 아이디").focus(); // 커서 이동
							}
						});

 

해당 로직은 패스워드 변경 건으로 작성 하게 되었지만

 

기존 회원 가입 로직에서도 사용 가능 합니다.

반응형
  Comments,     Trackbacks