[자바스크립트] 비밀번호 영문, 숫자, 특수문자, 자릿수 조합 체크하기

아래 소스 코드는 비밀번호 정규식을 통해서 유효성을 검사하고, 비밀번호 확인을 통해 비교하는 로직입니다.

정규식을 사용하여 유효성을 검사하고, 이후 비밀번호 확인 input창에서 일치하는지 확인합니다. 간단한 소스 코드이니 확인하시고 응용하시면 됩니다.

 

정규식

var passwordRegex = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*?_]).{8,16}$/;

 

1. 비밀번호 자릿수 (최소 8자에서 16자까지)

2. 최소 하나 이상의 영문자 (소문자 or 대문자)

3. 최소 하나 이상의 숫자

4. 최소 하나 이상의 특수문자 (!@#$%^&*?_)

 

<script>
function validatePassword() {
	var newPassword = document.getElementById('newPassword').value;
	var confirmPassword = document.getElementById('confirmPassword').value;
	var resultDiv = document.getElementById('result');

	var passwordRegex = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*?_]).{8,16}$/;

	if (passwordRegex.test(newPassword)) {
		if (newPassword === confirmPassword) {
			resultDiv.innerHTML = '비밀번호가 일치하며 유효합니다.';
			resultDiv.style.color = 'green';
		}else{
			resultDiv.innerHTML = '비밀번호가 일치하지 않습니다.';
			resultDiv.style.color = 'red';
		}
	}else{
		resultDiv.innerHTML = '비밀번호는 최소 8자에서 16자까지, 영문자, 숫자 및 특수 문자를 포함해야 합니다.';
		resultDiv.style.color = 'red';
	}
}
</script>
<p>새로운 비밀번호를 입력하세요.</p>
<input type="password" id="newPassword" placeholder="새로운 비밀번호 입력">
<br><br>
<input type="password" id="confirmPassword" placeholder="비밀번호 확인">
<br><br>
<button onclick="validatePassword()">확인</button>
<div id="result"></div>

 

 

비밀번호 정규식 패턴 체크

 

 

새로운 비밀번호 일치 여부 체크

 

 

유효한 비밀번호