<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>젊은이여 그대의 이름을 가치있게 하라</title>
</head>
<script>
function check_pw(){
var pw = document.getElementById('pw').value;
var SC = ["!","@","#","$","%"];
var check_SC = 0;
if(pw.length < 6 || pw.length>16){
document.getElementById('pw_pro_label').innerHTML ='비밀번호는 6글자 이상, 16글자 이하만 이용 가능합니다.';
document.getElementById('pw_pro').value='0';
return;
}
for(var i=0;i<SC.length;i++){
if(pw.indexOf(SC[i]) != -1){
check_SC = 1;
}
}
if(check_SC == 0){
document.getElementById('pw_pro_label').innerHTML = '비밀번호에 !,@,#,$,% 의 특수문자를 포함시켜야 합니다.'
return;
}
document.getElementById('pw_pro_label').innerHTML = '';
if(pw.length < 8){
document.getElementById('pw_pro').value='1';
}
else if(pw.length<12){
document.getElementById('pw_pro').value='2';
}
else{
document.getElementById('pw_pro').value='3';
}
if(document.getElementById('pw').value !='' && document.getElementById('pw2').value!=''){
if(document.getElementById('pw').value==document.getElementById('pw2').value){
document.getElementById('check').innerHTML='비밀번호가 일치합니다.'
document.getElementById('check').style.color='blue';
}
else{
document.getElementById('check').innerHTML='비밀번호가 일치하지 않습니다.';
document.getElementById('check').style.color='red';
}
}
}
</script>
<style>
td{padding:5px;}
</style>
<body>
<table>
<tr>
<td width="5%" align="center">*</td>
<td width="20%">아이디</td>
<td><input type="text" name ="userId" id="id"></td>
</tr>
<tr >
<td width="5%" align="center">*</td>
<td width="20%">비밀번호</td>
<td><input type="password" name="userPW" id="pw" onchange="check_pw()"> <span style="color:cadetblue">보안성</span> <progress id="pw_pro" value="0" max="3"></progress> <span id="pw_pro_label"></span></td>
</tr>
<tr>
<td width="5%" align="center">*</td>
<td width="20%">비밀번호 확인</td>
<td><input type="password" name="userPW2" id="pw2" onchange="check_pw()"> <span id="check"></span></td>
</tr>
</table>
</body>
</html>
