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

Computer Science/Web

TwinParadox 2017. 6. 24. 14:40

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

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

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

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

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

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';

}

}

}

<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>

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

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

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

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

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

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

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

Twinparadox Factory