[웹페이지 제작 #1] 회원가입-(4) javascript로 비밀번호 확인

회원가입-(4) javascript로 비밀번호 확인

비밀번호 확인의 핵심은 입력한 비밀번호와 비밀번호 확인의 값이 같은가? 를 확인하는 것입니다. 그리고 이게 다입니다.

아래의 예제 결과 화면들을 보면 단적으로, 비밀번호와 비밀번호 확인의 값이 자릿수부터 다르다는 것을 알 수 있습니다.

1 alert 사용

alert는 위와 같이 작은 확인창을 하나 띄우는 것입니다.

<script type="text/javascript"> function tocheckpw1() { var pw = document.getElementById("Pw").value; var pwck = document.getElementById("PwCheck").value; if (pw != pwck) { alert('비밀번호가 틀렸습니다. 다시 입력해 주세요'); return false; } } </script>

2 innerHTML 사용

위의 빨간 글자가 있는 위치에 p 태그를 두고, id를 지정합니다.

비밀번호가 다를 경우 해당 p 태그의 내부 html 내용이 변경됩니다.

<script type="text/javascript"> function tocheckpw2() { var pw = document.getElementById("Pw").value; var pwck = document.getElementById("PwCheck").value; if (pw != pwck) { document.getElementById('pwsame').innerHTML = '비밀번호가 틀렸습니다. 다시 입력해 주세요'; return false; } } </script>

수정된 register.html

<form action="register.php" onsubmit="return tocheckpw2()" data-ajax="false" method="post"> <h1>회원 가입</h1> <label for="name">이름</label> <input type="text" id="Name" name="name"required><br> <label for="id">ID</label> <input type="text" id="Id" name="id" required><br> <label for="pw">PW</label> <input type="password" id="Pw" name="pw" required><br> <label for="pck">PW 확인</label> <input type="password" id="PwCheck" required><br> <p id="pwsame" style="color:red;"></p> <br><br> <input type="submit" value="확인"> <input type="reset" value="취소"> </form>

onsubmit="return tocheckpw2()" ==> tocheckpw2() 함수가 참일 때 submit. 거짓일 때 현재 페이지에 그대로 머무른다.

수정된 register.php의 $data_stream

$data_stream = "'".$_POST['name']."','".$_POST['id']."',password('".$_POST['pw']."')";

password() 를 통한 단방향 암호화를 통해 새롭게 넣은 12번 데이터의 pw부분이 암호화되어있는 것을 확인할 수 있습니다.