[JavaScript] 아이디 중복 확인, 비밀번호 확인

 

 

<form method="post" action="./joinAction">


    <div class="form-group row">
    <label class="col-sm-2" for="uid">ID</label>
    <div class="col-sm-2" style="display:flex">
    <input class="form-control" type="text" id="id" name="id" required placeholder="아이디" oninput = "checkId()">
    </div>
    <div class="col-sm-3" id="id-alert" style="display:none; color:pink">이미 사용 중인 아이디입니다.</div>
    </div>

    <br>


    <div class="form-group row">
    <label class="col-sm-2" for="password">비밀번호  </label>
    <div class="col-sm-3">
    <input class="form-control" type="password" id="password" name="password" required placeholder="비밀번호">
    </div>
    </div>


    <br>


    <div class="form-group row">
    <label class="col-sm-2" for="passwordCheck">비밀번호 확인</label>
    <div class="col-sm-3" style="display:flex">
        <input class="form-control" type="password" id="passwordCheck" name="passwordCheck" required placeholder="비밀번호 확인" oninput="checkPassword()">
    </div>
    <div class="col-sm-3" id="password-alert-false" style="display:none; color:pink">비밀번호가 일치하지 않습니다.</div>
    <div class="col-sm-3" id="password-alert-true" style="display:none; color:green">비밀번호가 일치합니다.</div>
    </div>
</form>

 

//	아이디, 비밀번호 확인하지 않으면 join 버튼 비활성화	
	var idCheck = false;
	var passwordCheck = false;
	
//	아이디 중복 체크	
	function checkId(){
		var inputId = $('#id').val();
		$.ajax({
			
			data : { inputId : inputId },
			url : './checkId',
			type : 'post',
			success : function(data){
				if(data === '1'){	//	아이디가 중복되었다면
					$('#id').css("background-color", "lightpink");
					$('#id-alert').css("display", "block");
					$('#id').focus();
					idCheck = false;
				}else {				//	중복이 아니라면
					$('#id-alert').css("display", "none");
					$('#id').css("background-color", "lightgreen");
					idCheck = true;
				}
				joinBtnControll();
			}
			
		})
	}
    
//	비밀번호 - 비밀번호 확인 일치 체크
	function checkPassword() {
		var inputPassword = $('#password').val();
		var inputPasswordCheck = $('#passwordCheck').val();
		
		if(inputPassword !== inputPasswordCheck){	//	비밀번호-확인이 같지 않으면
			$('#password-alert-false').css("display", "block");
			$('#password-alert-true').css("display", "none");
			$('#passwordCheck').css("background-color", "lightpink");
			passwordCheck = false;
		}else{										//	비밀번호-확인이 같으면
			$('#password-alert-false').css("display", "none");
			$('#password-alert-true').css("display", "block");
			$('#passwordCheck').css("background-color", "lightgreen");
			passwordCheck = true;
		}
			joinBtnControll();
		
	}
	
//	
	function joinBtnControll() {
//		아이디 체크 완료
		if(idCheck && passwordCheck){
			document.getElementById("joinBtn").removeAttribute('disabled');
		}else{
			// 여기에 join 버튼 비활성화 구현
			document.getElementById("joinBtn").setAttribute('disabled', 'disabled');
		}
	}

 

 

 

아이디가 중복이 아니고, 비밀번호/비밀번호 확인이 일치하면 join 버튼 활성화