[JQuery] 비밀번호 일치, 클래스 추가, 클래스 삭제

안녕하세요 코북입니다. 이번 프로젝트에서도 여김 없이 로그인을 구현하게 됐는데, 이번에는 클래스를 변경하는 작업까지 해봐서 기록하러 왔습니다. jquery에서 addClass와 removeClass를 사용해 손쉽게 클래스를 추가하고 지울 수 있었습니다. 말 그대로 addClass는 기존 클래스에 클래스를 추가해주고 removeClass는 기존 클래스에 있는 내용을 지워줍니다. 비밀번호 일치 여부가 변경될 경우, 기존에 있는 값을 지우고 추가해줘야 하기 때문에 removeClass를 addClass보다 앞에서 실행합니다. 아래는 코드와 구현 화면입니다.

+

https://yenbook.tistory.com/63

자바스크립트 vs 제이쿼리 ( JQuery )

 

 처리 속도 측면도 고려하기 위해 jQuery의 편의성에 너무 의존하면 안 될 것 같다는 생각이 드는 글입니다.

<div class="form-group has-success">
	<label class="form-label mt-4" for="inputValid">비밀번호</label>
	<input type="password" class="form-control" id="mb_pwd1" name="mb_pwd">
	<div class="valid-feedback"></div>
</div>

<div class="form-group has-danger">
	<label class="form-label mt-4" for="inputInvalid">비밀번호 재확인</label> 
	<input type="password" class="form-control is-invalid" id="mb_pwd2">
	<div><font id="pwd_feedback" size="2"></font></div>
</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>	
	<script type ="text/javascript">

		$('#mb_pwd2').keyup(function(){
//		    let pass1 = $("#mb_pwd1").val();
//		    let pass2 = $("#mb_pwd2").val();

		    let pass1 = document.getElementById('mb_pwd1').value;
		    let pass2 = document.getElementById('mb_pwd2').value;
            
		    if (pass1 != "" || pass2 != ""){
		    	if (pass1 == pass2){
		        	$("#pwd_feedback").html('비밀번호가 일치합니다');
		        	$("#pwd_feedback").attr('color','#2fb380');
		        	$("#mb_pwd2").addClass("is-valid");
		        	$("#mb_pwd2").removeClass("is-invalid");
		        } else {
		        	$("#pwd_feedback").html('비밀번호가 일치하지 않습니다');
                  		$("#pwd_feedback").attr('color','#dc3545');
		        	$("#mb_pwd2").removeClass("is-valid");		            
		        	$("#mb_pwd2").addClass("is-invalid");
		        }
		    }
		
		})

	</script>