코북
Keep going
코북
전체 방문자
오늘
어제
  • 분류 전체보기 (114)
    • Computer Science (20)
      • 인터넷 (10)
      • 운영체제 및 일반지식 (4)
      • 공통 요구사항 (4)
      • WAS (2)
    • DataBase (18)
    • JavaScript (22)
    • Spring (15)
    • Java (4)
    • ASP.NET (5)
    • C# (6)
    • 알고리즘 (8)
    • HTML5 + CSS (5)
    • Git & GitHub (5)
    • Machine Learning (5)
    • 좋은 글 공유 (1)

최근 글

최근 댓글

티스토리

hELLO · Designed By 정상우.
코북

Keep going

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

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

2021. 10. 27. 11:33

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

 

■ 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

'JavaScript' 카테고리의 다른 글

[error/javascript] 'Uncaught TypeError: 함수명 is not a function at HTMLButtonElement.onclick'  (0) 2021.11.03
[JavaScript] 로그인 했을 때만 사용 가능한 페이지  (0) 2021.11.02
[JQuery] 비밀번호 일치, 클래스 추가, 클래스 삭제  (0) 2021.10.19
[jQuery/Ajax] 아이디 중복 체크 확인 구현  (4) 2021.08.16
[jQuery] 비밀번호 재확인 기능 구현  (0) 2021.07.29
    'JavaScript' 카테고리의 다른 글
    • [error/javascript] 'Uncaught TypeError: 함수명 is not a function at HTMLButtonElement.onclick'
    • [JavaScript] 로그인 했을 때만 사용 가능한 페이지
    • [JQuery] 비밀번호 일치, 클래스 추가, 클래스 삭제
    • [jQuery/Ajax] 아이디 중복 체크 확인 구현
    코북
    코북

    티스토리툴바