[회원가입 폼] input text onchange

	<!-- 이메일 -->
	<div class="join-content">
	    <div class="input-label">이메일<span>*</span></div>
	    <div class="join-input" id="email-icon">
	        <input type="text" class="form-control" style="width:200px;" id="email" name="email" placeholder="이메일을 입력하세요" onchange="passed()">
	        <span id="email-warning"></span>
	        <i class="fas fa-check true-sign"></i>
	    </div>
	</div>
	
	<!-- 아이디 -->
	<div class="join-content">
	    <div class="input-label">아이디<span>*</span></div>
	    <div class="join-input" id="id-icon">
	        <input type="text" class="form-control" style="width:200px;" id="id" name="id" placeholder="아이디를 입력하세요" onchange="failed()">
	        <span id="id-warning"></span>
	        <i class="fas fa-check red-sign"></i>
	    </div>
	</div>

<script>
$(document).ready(function() {
	// 페이지가 열릴 때 아이콘을 숨겨두고 입력결과에 따라 보여주도록 한다.
	$(".true-sign").css("display", "none");
	$(".red-sign").css("display", "none");
})

// 맞게 입력한 경우
function passed() {
	$(".true-sign").css("display", "block");
	$(".true-sign").css("color", "green");
	$("#email").css("border-color", "green");
	
	// 썼다가 전부 지웠을 때
	if( $("#email").val() == '' ) {
		$(".true-sign").css("display", "none");
		$("#email").css("border-color", "#ced4da");
	}
}

// 틀리게 입력한 경우
function failed() {
	$(".red-sign").css("display", "block");
	$(".red-sign").css("color", "red");
	$("#id").css("border-color", "red");
	
	// 썼다가 전부 지웠을 때
	if( $("#id").val() == '' ) {
		$(".red-sign").css("display", "none");
		$("#id").css("border-color", "#ced4da");
	}
}
</script>

 

 

 

입력 결과

 

초기상태 . 혹은 썼다가 완전히 지운상태.