Computer Science/Web

Web] 자바스크립트를 활용한 비밀번호 체크

TwinParadox 2017. 6. 24. 14:40
728x90




커뮤니티, 쇼핑몰 같은 웹 사이트에서 회원가입을 하게 되면

비밀번호를 확인하는 경우가 있다.

자바스크립트를 활용하면 이를 간단하게 해결할 수 있다.




'password'와, 'pass1'을 입력한 상태.





두 칸 모두 'password'를 입력한 상태.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function isSame() {
    var pw = document.twin.wUserPW.value;
    var confirmPW = document.twin.wUserPWConfirm.value;
    if (pw.length < 6 || pw.length > 16) {
        window.alert('비밀번호는 6글자 이상, 16글자 이하만 이용 가능합니다.');
        document.getElementById('pw').value=document.getElementById('pwCheck').value='';
        document.getElementById('same').innerHTML='';
    }
    if(document.getElementById('pw').value!='' && document.getElementById('pwCheck').value!='') {
        if(document.getElementById('pw').value==document.getElementById('pwCheck').value) {
            document.getElementById('same').innerHTML='비밀번호가 일치합니다.';
            document.getElementById('same').style.color='blue';
        }
        else {
            document.getElementById('same').innerHTML='비밀번호가 일치하지 않습니다.';
            document.getElementById('same').style.color='red';
        }
    }
}
 
cs



1
2
3
4
5
6
7
8
9
10
11
12
13
14
<tr class="register" height="30">
    <td width="5%" align="center">*</td>
    <td width="15%">비밀번호</td>
    <td><input type="password" name="wUserPW" id="pw" onchange="isSame()" /></td>
</tr>
<tr height="7">
    <td colspan="3"><hr /></td>
</tr>
<tr class="register" height="30">
    <td width="5%" align="center">*</td>
    <td width="15%">비밀번호 확인</td>
    <td><input type="password" name="wUserPWConfirm" id="pwCheck" onchange="isSame()" />&nbsp;&nbsp;<span id="same"></span></td>
</tr>
 
cs




tr 태그에 들어간 class는 CSS에 사용되었으므로 무시하면 된다.

이번 DB 프로그래밍에서 쇼핑몰을 만들면서 급하게 집어넣은 기능 중 하나다.


비밀번호를 입력하고 그 비밀번호 입력을 다시 확인하는 과정에서

버튼을 눌러 php로 문제를 체크하지 않아도,

클라이언트가 즉시 확인할 수 있도록 자바스크립트로 기능을 만들었다.


솔직히, 인터넷으로 찾아가며 배워서 만들어놓은 거라

금기된 사항과 아닌 사항은 잘 모르겠고, 기능 구현에 중심을 뒀다.

728x90