[JavaScript/jQuery] 아이디/비밀번호 입력 알림

 안녕하세요 코북입니다. 로그인 파트가 거의 완성되어가는 시점이기도 하고 잠깐 쉬어가는 느낌으로 아이디/비밀번호 입력 알림을 구현해봤습니다. 

 

■ jQuery

 

 기존 태그에 id 값을 추가하여 jQuery로 접근했습니다.

<form action="${cpath}/signIn.do" method="post">
  <div class="form-group">
	<input type="text" class="form-control" name="mb_id" id="mb_id" placeholder="아이디">
  </div>
  <div class="form-group">
	<input type="password" class="form-control" name="mb_pwd" id="mb_pwd" placeholder="비밀번호">
  </div>
  <div class="form-check">
	<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
	<label class="form-check-label text-secondary" for="flexCheckDefault">
		로그인 상태 유지
	</label>
  </div>
  <div class="d-grid gap-2">
	<button class="btn btn-primary btn-lg" id="login" type="submit">로그인</button>
  </div>
</form>
    
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>    
<script>
  	 
	// 아이디 비밀번호 입력 안 한 경우
	$("#login").on("click",function(){
		let mb_id = $("#mb_id").val();
		let mb_pwd = $("#mb_pwd").val();
    	 
		if(mb_id == ""){
			alert("아이디를 입력해주세요.");			 
		} else if (mb_pwd == ""){
			alert("비밀번호를 입력해주세요.");			 		 
	 	}

	});
	
	
</script>

 

■ JavaScript

 

 JavaScript의 경우입니다. loginCheck() 함수를 실행시키기 위해 type을 submit에서 button으로 변경했습니다. form태그를 submit 해주는 작업을 처리하기 위해 아이디와 비밀번호가 모두 입력되면 수동으로 submit 처리를 해줍니다.

<form name="loginForm" action="${cpath}/signIn.do" method="post">
  <div class="form-group">
	<input type="text" class="form-control" name="mb_id" id="mb_id" placeholder="아이디">
  </div>
  <div class="form-group">
	<input type="password" class="form-control" name="mb_pwd" id="mb_pwd" placeholder="비밀번호">
  </div>
  <div class="form-check">
	<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
	<label class="form-check-label text-secondary" for="flexCheckDefault">
		로그인 상태 유지
	</label>
  </div>
  <div class="d-grid gap-2">
	<button class="btn btn-primary btn-lg" id="login" type="button" onclick="loginCheck()">로그인</button>
  </div>
</form>
	
    <script>
    // 아이디 비밀번호 입력 안 한 경우
    function loginCheck(){
    	let loginForm = document.loginForm;
    	let mb_id = document.getElementById('mb_id').value;
    	let mb_pwd = document.getElementById('mb_pwd').value;
    	
    	if(mb_id == ""){
    		alert("아이디를 입력해주세요.");
    	} else if (mb_pwd == ""){
    		alert("비밀번호를 입력해주세요.");
    	} else {
    		loginForm.submit();
    	}
    }
    </script>

 

 

구현 화면

 

사용 기술 및 언어

JAVA, HTML, CSS, Bootstrap, JavaScript, JQuery, JSP

 

배운 점

 alert에서 개행할 때는 <br>태그가 아닌 "\n"을 사용해야 했습니다. jQuery와 JavaScript의 경우를 각각 작성해 볼 수 있었습니다. 이전에는 주로 jQuery로 코드를 작성해서 JavaScript로 코드를 작성할 때 오히려 낯설다는 느낌을 받았습니다. 작성할 코드의 양이 많지 않은 경우나 처리 속도 향상을 고려해야 하는 경우 jQuery보다는 JavaScript로 구현하는 연습이 필요할 것 같습니다.

 

 

 

본 글은 아래 링크의 내용을 참고하여 학습한 내용을 나름대로 정리한 글임을 밝힙니다.

JavaScript, jQuery

https://yenbook.tistory.com/63

https://dololak.tistory.com/728

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=o3k3585&logNo=220869653667

Error

https://okky.kr/article/601317