[JS] JS를 임시 비밀번호 만들기(소문자, 대문자, 숫자, 특수문자 혼합)

임시비밀번호 발급 버튼을 눌렀을 때 Javascript로 특정 패턴을 지닌(소문자, 대문자, 숫자, 특수문자 혼합) 임시비밀번호를 발급하는 로직입니다.

 

<th class="th_bold">비밀번호*</th>
<td id="random_pw"><a onclick="temp_pw_issuance()" class="btn_noimg random_pw">임시비밀번호 발급</a></td>

 

Math.random() 함수는 0이상 1미만의 구간에서  근사적으로 균일한(approximately uniform) 부동소숫점 의사난수를 반환합니다. 우리는 이 값을 원하는 범위로 변형할 수 있습니다. ==> 변환 값 : 0 ~ 1 사이 부동소숫점 난수

function go_random() {
	const value = Math.random();
    alert(value);
}

 

범위 지정 : 정수인 난수를 생성하는 방법은? 

Math.floor(); Math.floor() 함수는 소수점 1째자리 이후의 숫자를 버림하고 정수를 리턴한다.

0<=x<=9 : Math.floor(Math.random() *10);

0<=x<=10 : Math.floor(Math.random() *11);

0<=x<=99 : Math.floor(Math.random() *100);

0<=x<=100 : Math.floor(Math.random() *101);

1<=x<=10 : Math.floor(Math.random() *10) +1;

 

문자열 포함한 난수 만들기 : 

Math.random().toString(36)					// 0.q7w4ccs5~ 
Math.random().toString(36).substr(2,11);	// q7w4ccs5~~
Math.random().toString(36).slice(2);

특수문자, 대문자, 소문자, 숫자 포함한 난수 만들기 : 

function temp_pw_issuance() {
	let ranValue1 = ['1','2','3','4','5','6','7','8','9','0'];
	let ranValue2 = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
	let ranValue3 = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
	let ranValue4 = ['!','@','#','$','%','^','&','*','(',')'];
	
	var temp_pw = "";
	
	for(i=0 ; i<2; i++) {
		let ranPick1 = Math.floor(Math.random() * ranValue1.length);
		let ranPick2 = Math.floor(Math.random() * ranValue2.length);
		let ranPick3 = Math.floor(Math.random() * ranValue3.length);
		let ranPick4 = Math.floor(Math.random() * ranValue4.length);
		temp_pw = temp_pw + ranValue1[ranPick1] + ranValue2[ranPick2] + ranValue3[ranPick3] + ranValue4[ranPick4];
	}
	
	alert("임시 비밀번호는 " + temp_pw + " 입니다.");
	$(".btn_noimg random_pw").hide();
	$("#random_pw").text(temp_pw);
	
}

숫자, 대문자, 소문자, 특수문자를 각 배열로 만들어 배열의 자리수만큼 난수를 돌려서 1개씩 넣는 패턴이다.

해당 패턴은 숫자, 대문자, 소문자, 특수문자의 위치와 자리수가 고정이란 단점이 있다.