[자바스크립트] 로그인

seoooc 2022. 2. 9. 19:25

<body>
<div id="log">
  <h1>로그인</h1>
  <hr/>
<form method="post" action="login.js" id="logform" onsubmit="return logFormCheck()">
  <ul>
  	<li>아이디</li>
  	<li><input type="text" name="userid" id="userid"/></li>
  	<li>비밀번호</li>
  	<li><input type="password" name="userpwd" id="userpwd"/></li>
	<li><input type="submit" value="로그인"/>
		<input type="reset" value="취  소"/></li>
  </ul>
  </form>
</div>
</body>

<style>
	/* ul, li 기본 셋팅 */
	ul,li{margin:0; padding:0; list-style-type: none;}
    /* 로그인 박스 400px, 화면 가운데 위치 */
	#log{width:400px; margin:0px auto;}
    /* 로그인 텍스트 가운데 정렬 */
	#log>h1{text-align:center;}
    /* 아이디, 아아디_input, 비번, 비번_input, 로그인, 취소 모두 왼쪽으로 정렬(붙여줌) */
	#logform>ul>li{
		float:left;
		width:30%;
	}
    /* 아이디_input, 비번_input 스타일 */
	#logform>ul>li:nth-child(2n){width:70%;}
    /* 로그인, 취소 버튼 스타일 */
	#logform>ul>li:last-of-type{width:100%; text-align:center; margin-top:30px;}
</style>

<form method="post" action="login.js" id="logform" onsubmit="return logFormCheck()">

onsubmit : submit가 일어났을 때 실행될 액션 정의

form에서 로그인 버튼을 눌러 제출(submit)하면 logFormCheck()를 호출한다.

logFormCheck 함수가 동작한 후에는 반환값을 리턴한다.

즉, logFormCheck에서 false, true를 받는다는 뜻이며 false가 나오면 멈춘다.

javascript 코드

<script>
	function logFormCheck(){
		//id, pw 입력 유뭄 확인, 모두 입력되면 action 파일 요청
		//하나라도 입력 안 되면 현재 페이지에 머무름
		var id = document.getElementById("userid");
		if(id.value==""){
			 alert("아이디를 입력하세요.");
			 id.focus;	//커서를 아이디 객체로 이동
			 console.log("실행?");
			 return false;
		}
		if(document.querySelector("#userpwd").value==""){
			alert("비밀번호를 입력하세요.");
			document.querySelector("#userpwd").focus();
			return false;
		}
		//id,pw 모두 입력한 경우
		return true;
	}
</script>

로그인 버튼을 누른 후 id, pw의 유효성 검사를 실시한다.

값이 입력되지 않은 경우에는 아래와 같은 alert 알림이 뜬다.

확인을 누르고 나면 focus를 통해 입력되지 않은 input 칸으로 커서가 이동한다.

또한, form의 action이 실행되지 않고 그대로 멈춘다.

button에 submit 적용하는 방법

<li><input type="button" value="로그인" onclick="logFormCheck()"/>
		<input type="reset" value="취  소"/></li>

위와 같은 코드에서 로그인을 button 타입으로 작성한다면 submit이 진행되지 않는다.

따라서, 아래와 같이 script에 button에 submit을 발생시키는 코드를 작성해야 한다.

//id,pw 모두 입력한 경우 submit 발생시키기
document.getElementById("logform").submit();

submit() : form 제출 함수