■ 패스워드 형식 검사하기
# 소스코드
<html>
<head>
<title>:: JAVASCRIPT 비밀번호 검사 ::</title>
<script type="text/javascript">
function checkPasswordPattern(str) {
var pass = str.value;
var message = "";
// 비밀번호 문자열에 숫자 존재 여부 검사
var pattern1 = /[0-9]/; // 숫자
if(pattern1.test(pass) == false) {
message = "비밀번호에 숫자가 입력되지 않았습니다.\n숫자를 입력하여 주시기 바랍니다.";
}
// 비밀번호 문자열에 영문 소문자 존재 여부 검사
var pattern2 = /[a-z]/;
if(pattern2.test(pass) == false) {
message = "비밀번호에 영문 소문자가 입력되지 않았습니다.\n영문 소문자를 입력하여 주시기 바랍니다.";
}
// 비밀번호 문자열에 영문 대문자 존재 여부 검사
var pattern3 = /[A-Z]/;
if(pattern3.test(pass) == false) {
message = "비밀번호에 영문 대문자가 입력되지 않았습니다.\n영문 대문자를 입력하여 주시기 바랍니다.";
}
// 비밀번호 문자열에 특수문자 존재 여부 검사
var pattern4 = /[~!@#$%^&*()_+|<>?:{}]/; // 특수문자
if(pattern4.test(pass) == false) {
message = "비밀번호에 특수문자가 입력되지 않았습니다.\n특수문자를 입력하여 주시기 바랍니다.";
}
// 비밀번호 문자열의 입력 길이 검사
if(pass.length < 8 || pass.length > 16) {
message = "비밀번호는 8자리 이상 16자리 이하만 가능합니다.\n비밀번호를 다시 입력하여 주시기 바랍니다.";
}
// 비밀번호 문자열 결과 출력
if(message) {
alert(message);
str.value = "";
str.focus();
return false;
} else {
alert("사용하셔도 좋은 비밀번호 입니다.");
}
}
</script>
</head>
<body>
<!-- input type="password" id="" value=""/ -->
<!-- 스타일 ime-mode:disabled 속성은 textbox에 영문만을 입력되게 한다. --> <input type="text" id="memberPw" value="" style="ime-mode:disabled;"/>
<input type="button" onClick="checkPasswordPattern(memberPw);" value="검사"/>
</body>
</html>
|
# 출력결과
■ 패스워드 형식 실시간 검사하기
위에서 패스워드 형식을 검사하는 자바스크립트 함수를 만들어 보았다.
그렇지만 위 방법은 사용자가 작성하고 버튼을 다시 클릭하고
비밀번호 형식에 적합하지 않으면은 다시 입력하고 또 클릭하는 불필요한 작업이 많기에.
실시간으로 비밀번호의 형식을 검사해 보려고 한다.
# 소스코드
<html>
<head>
<title>:: JAVASCRIPT 비밀번호 안전성 겁사 ::</title>
<script type="text/javascript">
function safetyPasswordPattern(str) {
var pass = str.value;
var message = "";
var color = "";
var checkPoint = 0;
// 입력값이 있을경우에만 실행
if(pass.length) {
// 최대 입력 글자수를 제한한다.
if(pass.length < 8 || pass.length > 16) {
message = ":: 최소 8자 이상, 최대 16자 이하 ::";
color = "#A23E48";
}
// 문자열의 길이가 8 ~ 16 인경우
else {
// 비밀번호 문자열에 숫자 존재 여부 검사
var pattern1 = /[0-9]/; // 숫자
if(pattern1.test(pass) == false) {
checkPoint = checkPoint + 1;
}
// 비밀번호 문자열에 영문 소문자 존재 여부 검사
var pattern2 = /[a-z]/;
if(pattern2.test(pass) == false) {
checkPoint = checkPoint + 1;
}
// 비밀번호 문자열에 영문 대문자 존재 여부 검사
var pattern3 = /[A-Z]/;
if(pattern3.test(pass) == false) {
checkPoint = checkPoint + 1;
}
// 비밀번호 문자열에 특수문자 존재 여부 검사
var pattern4 = /[~!@#$%^&*()_+|<>?:{}]/; // 특수문자
if(pattern4.test(pass) == false) {
checkPoint = checkPoint + 1;
}
if(checkPoint >= 3) {
message = ":: 보안성이 취약한 비밀번호 ::";
color = "#A23E48";
} else if(checkPoint == 2) {
message = ":: 보안성이 낮은 비밀번호 ::";
color = "#FF8C42";
} else if(checkPoint == 1) {
message = ":: 보안성이 보통인 비밀번호 ::";
color = "#FF8C42";
} else {
message = ":: 보안성이 강력한 비밀번호 ::";
color = "#0000CD";
}
}
}
else {
message = ":: 비밀번호를 입력해 주세요 ::";
color = "#000000";
}
document.getElementById("makyText").innerHTML = message;
document.getElementById("makyText").style.color = color;
}
</script>
</head>
<body> <!-- 스타일 ime-mode:disabled 속성은 textbox에 영문만을 입력되게 한다. -->
<input type="text" id="memberPw" value="" onKeyup="safetyPasswordPattern(this);" style="ime-mode:disabled;"/>
<br/>
<span id="makyText">:: 비밀번호를 입력해 주세요 ::</span>
</body>
</html>
|
# 출력결과
