Download presentation
Presentation is loading. Please wait.
1
LOGIN할 때 아이디, 비번 입력 여부 체크하기
요구사항 <form>과 <input>을 사용하여 아이디와 암호 입력창을 만든다. 아이디가 입력되지 않으면 경고창을 띄우고, 커서를 아이디 입력창에 위치 시킨다. 암호가 입력되지 않으면 경고창을 띄우고, 커서를 암호 입력창에 위치시킨다.
2
프로그램 설계-1 (FORM 문 작성) <body>
<form method=get action=activate.php > <p>아이디: <input type=text id=userid name=userid></p> <p>암호: <input type=password id=passwd name=passwd></p> <p><button type=submit >LOGIN</button> </form> </body>
3
프로그램 설계-2 (자바스크립트 함수) document.getElementById(“userid”).focus();
아이디 입력값 가져오기 아이디 입력창에 커서 위치시키기(focus) var userid; userid = document.getElementById(“userid”).value; document.getElementById(“userid”).focus();
4
프로그램 설계-3 (return 값 설정) <form action=activate.php
onsubmit="return checkValue()"> <script> function checkValue() { if(error) return false; return true; } </script> 함수의 return 값이 true이면 activate.php가 실행되고, return 값이 false이면 넘어가지 않는다.
5
validation.html <!doctype html> <html> <head>
<script> function checkValue() { var userid = document.getElementById("userid").value; var passwd = document.getElementById("passwd").value; if(userid=="") { alert("아이디를 입력하세요"); document.getElementById("userid").focus(); return false; } if(passwd=="") { alert("암호를 입력하세요"); document.getElementById("passwd").focus(); return true; </script> </head>
6
validation.html <body>
<form method=get action=" onsubmit="return checkValue()"> <p>아이디: <input type=text id=userid name=userid></p> <p>암호: <input type=password id=passwd name=passwd></p> <p><button type=submit >LOGIN</button> </form> </body> </html>
Similar presentations
