본문 바로가기
멀티캠퍼스 풀스택 과정/프론트엔드

프론트엔트3-3. login form 만들기 / 이메일 분리하기

by 이쟝 2022. 2. 9.

1. div와 ul을 이용해서 login form을 만들기

1. submit버튼을 이용하기

1) HTML 파일

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>loginForm</title>
</head>
<body>
	<div id="login">
		<h1>로그인</h1>
		<hr/>                           <!-- submit버튼을 눌렀을 때 loginFormCheck()실행 -->
		<form method="post" action="login.jsp" id="loginForm" onsubmit="return loginFormCheck()">
		<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>
</html>

  • submit버튼을 누르게 되면 원래는 바로 action이 실행되는데 onsubmit을 사용하게 되면 지정된 함수가 실행된다.

submit 버튼의 실행

  1. 처음 이벤트가 발생되는 곳 -> type="submit" value="로그인" 
  2. onsubmit으로 이동
  3. return의 값이 true일 때면 action으로 이동(action이 실행된다.) false이면 현재 페이지 유지(아무일도 일어나지 않음)
  4. 여기서 true의 의미(아이디 비밀번호 둘 다 있을 때)와 false의 의미(아이디나 비밀 번호 둘 중 하나 없어도)

2) CSS 파일

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>loginForm</title>
	<style>
		ul,li{margin:0; padding:0; list-style-type:none; }
		#login{width:300px; margin:0 auto;}
		#login>h1{text-align:center;}
		
		#loginForm>ul>li{float:left; width:40%}
		#loginForm>ul>li:nth-child(2n){width:60%;}
		#loginForm>ul>li:last-of-type{width:100%; text-align:center; margin-top:20px;}
	</style>
</head>
더보기

2)-1 가운데 정렬

	<style>
		ul,li{margin:0; padding:0; list-style-type:none; }
		#login{width:300px; margin:0 auto;}
		#login>h1{text-align:center;}
	</style>

2)-2 main content 가운데 정렬

	<style>
		ul,li{margin:0; padding:0; list-style-type:none; }
		#login{width:300px; margin:0 auto;}
		#login>h1{text-align:center;}
		
		#loginForm>ul>li{float:left; width:40%} 
		#loginForm>ul>li:nth-child(2n){width:60%;}
	</style>

 

2)-3 로그인 버튼과 취소 버튼  가운데 정렬

	<style>
		ul,li{margin:0; padding:0; list-style-type:none; }
		#login{width:300px; margin:0 auto;}
		#login>h1{text-align:center;}
		
		#loginForm>ul>li{float:left; width:40%}
		#loginForm>ul>li:nth-child(2n){width:60%;}
		#loginForm>ul>li:last-of-type{width:100%; text-align:center; margin-top:20px;}
	</style>

3) JS(loginFormCheck( )함수의 구현)

  • id와 비밀번호를 입력하지 않으면 alert( )실행하고 커서를 각 input에 위치시킨다.
  • 아이디와 비밀번호를 모두 입력했으면 return true!
	<script>
		function loginFormCheck() {
			var id = document.querySelector("#userid");
			if(id.value=="") {              // 아이디가 없을 때
				alert("아이디를 입력하세요");
				id.focus();              // 커서를 해당객체에 위치시킨다.
				return false;             // return 만나면 함수실행 끝!
			}
			
			if(document.querySelector("#userpwd").value=="") {
				alert("비밀번호을 입력하세요");
				document.querySelector("#userpwd").focus();
				return false;
			}
			// 아이디와 비밀번호가 모두 입력되었을 때
			// action에게 true값이 반환되며 action에 있는 파일이 실행됨
			return true;
		}
	</script>

1. <button>을 이용하기

  • <button>은 말그대로 button모양이다 submit 속성이 아니기 때문에 js없이는 아무것도 할 수 없다.

1) HTML파일

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>loginForm</title>
</head>
<body>
	<div id="login">
		<h1>로그인</h1>
		<hr/>                           
		<form method="post" action="login.jsp" id="loginForm">
		<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="button" value="로그인" onclick="loginFormCheck()"/>
				<input type="reset" value="취소"/></li>
		</ul>
		</form>
	</div>
</body>
</html>
  • button을 클릭했을 때 loginFormCheck 함수 실행!

 

2) js 파일

	<script>
		function loginFormCheck() { 
			var id = document.querySelector("#userid");
			if(id.value=="") {  
				alert("아이디를 입력하세요");
				id.focus(); 
				return false; 
			}
			
			if(document.querySelector("#userpwd").value=="") {
				alert("비밀번호을 입력하세요");
				document.querySelector("#userpwd").focus();
				return false;
			}
			// 아이디와 비밀번호가 모두 입력되었을 때
			// submit 발생시키기(js로 form태그의 submit 발생)
			document.getElementById("loginForm").submit();
		}
	</script>
  • 나머지는 다 똑같은데 submit을 발생시켜야 action이 실행되기 때문에 true를 반환하는 것이 아니고 document.getElementById("loginForm").submit();를 실행시킨다. 
  • submit 버튼을 사용하거나 button을 사용해서 form태그의 submit을 발생시키면 된다.

2. email 분리하기

  • 이메일을 입력받고나서 이메일을 @ 기준으로 아이디와 도메인으로 나눈다. 
  • login이 아니기 때문에 form 태그를 이용하지 않아도 된다.

1. HTML 파일

<body>
	<div id="main">
		이메일
		<input type="text" name="useremail" id="email">
		<input type="button" value="확인" onclick="emailSplit()"/>
		<hr/>
		<div>
			아이디<br/>
			<input type="text" name="userid" id="id"/>
		</div>
		<div>
			도메인<br/>
			<input type="text" name="domain" id="domain"/>
		</div>

	</div>
</body>
</html>

2. CSS파일

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>email</title>
	<style>
		#main{
			width:400px; padding:20px;
			margin:50px auto;
			border:1.5px solid #ddd;
			text-align:center;
			overflow:auto;
		}
		#main>div{
			float:left;
			width:50%;
		}
	</style>
</head>
더보기

2)-1 가운데 정렬

	<style>
		#main{
			width:400px; padding:20px;
			margin:50px auto;
			border:1.5px solid #ddd;
			text-align:center;
		}
	</style>

2)-2 main content 가운데 정렬

	<style>
		#main{
			width:400px; padding:20px;
			margin:50px auto;
			border:1.5px solid #ddd;
			text-align:center;
		}
		#main>div{
			float:left;
		}
	</style>
  • main 컨텐츠를 빠져나오기 때문에 컨텐츠 공간을 확보해주기 위해서 #main에 overflow를 해준다.
  • 아이디와 도메인을 각각 50%해서 화면에서 반씩 차지하게 해준다. 
	<style>
		#main{
			width:400px; padding:20px;
			margin:50px auto;
			border:1.5px solid #ddd;
			text-align:center;
			overflow:auto;
		}
		#main>div{
			float:left;
			width:50%;
		}
	</style>

3. JS 파일

  • <button>을 클릭했을 때 emailSplit( )함수 실행!
	<script>
		function emailSplit(){
			// email, id, domain 변수생성
			var email = document.getElementById("email").value;
			var id = document.getElementById("id");
			var domain = document.querySelector("#domain");

			// email을 잘못 입력했을 때는 -1반환
			if(email.indexOf("@"==-1)){
				alert("이메일을 잘못입력하였습니다.");
				return;
			}

			// @를 기준으로 자르기 위해서 emailCut 변수생성
			var emailCut = email.split("@");
			
			// @를 기준으로 앞은 id에 뒤는 domain에
			id.value = emailCut[0];
			domain.value = emailCut[1];
            
		}
	</script>

 

  • 분리한 다음에 email의 값을 비우기
	<script>
		function emailSplit(){
			// 위의 예제와 동일        
                       // 분리한 다음에 email의 값을 비우기!
	  		document.getElementById("email").value="";
		}
	</script>

유효성검사

  • @이 하나만 입력되었는지 / 2) .이 입력되었는지 / 3) .이 @보다 뒤에 오는지
  • email 문자열에서 각각의 위치의 값을 알아야 한다. 
// 유효성 검사를 하기 위해서 
//email에서의 @의 처음위치와 email에서의 @마지막 위치, .의 위치를 변수 생성
	var atMarkStart = email.indexOf("@");
	var atMarkEnd = email.lastIndexOf("@");
	var point = email.indexOf(".");
    
    // email을 잘못입력했을 때
	if(email.indexOf("@")==-1 || atMarkStart != atMarkEnd || point==-1
					|| atMarkStart>point ){
				alert("이메일을 잘못입력하였습니다.");
				return;
	}
  • @이 입력 되지 않았거나 || @@이 두번 입력되었거나(시작값과 끝값이 다를 때) || .이 없거나 || .이 @보다 앞에 있다면(인덱스 위치는 point가 atMarkStart보다 더 크다)
저작자표시 (새창열림)

'멀티캠퍼스 풀스택 과정 > 프론트엔드' 카테고리의 다른 글

프론트엔드3-5. javascript의 내장객체 date와 달력만들기예제  (0) 2022.02.09
프론트엔드3-4. JavaScript의 내장객체 String, Math, Array  (0) 2022.02.09
프론트엔드3-2. JavaScript의 함수(메서드)와 이벤트  (0) 2022.02.09
프론트엔드3-1. JavaScript 기본(입출력방법과 Dom요소의 선택)  (0) 2022.02.09
프론트엔드2-3. tab메뉴 만들기  (0) 2022.02.08

관련글

티스토리툴바