LOGIN할 때 아이디, 비번 입력 여부 체크하기 요구사항 <form>과 <input>을 사용하여 아이디와 암호 입력창을 만든다. 아이디가 입력되지 않으면 경고창을 띄우고, 커서를 아이디 입력창에 위치 시킨다. 암호가 입력되지 않으면 경고창을 띄우고, 커서를 암호 입력창에 위치시킨다.
프로그램 설계-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>
프로그램 설계-2 (자바스크립트 함수) document.getElementById(“userid”).focus(); 아이디 입력값 가져오기 아이디 입력창에 커서 위치시키기(focus) var userid; userid = document.getElementById(“userid”).value; document.getElementById(“userid”).focus();
프로그램 설계-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이면 넘어가지 않는다.
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>
validation.html <body> <form method=get action="http://cslab2.kku.ac.kr/~sunwoo/action_page.php" 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>