번호 인증을 하기 위한 조건 (중복확인 + password 길이 + 휴대폰번호 길이)

간단하게 중복확인을 하고나서 중복확인 여부와 password 길이, 휴대폰 길이 조건에 따라서 버튼 클릭이 가능하게 만들려고 합니다. 나중에 더 디테일하게 할려면 password, confirm password true를 문구 뿐만 아니라 그 조건도 가지고 올 수 있게 조만간 다뤄보겠습니다. 

우선 번호 인증을 하기 위한 조건을 하기 전에 그전에 다뤘던 중복확인을 따라서 만들어본 후 진행하시는 것을 추천합니다. 

<input type="text" id="id" placeholder="아이디를 입력해주세요.">
<button id="checkId">중복확인</button>

@section('javascript')
<script>
	const checkId = document.getElementById("checkId");
    checkId.addEventListener("click", function(){
    	let login_id = $("#login_id").val();
        $.ajax({
        	type : "GET",
            url : "/checkId/"+login_id,
            success : function(response){
            	let user = response.user;
                if(user == null){
                	alert("사용 가능한 아이디입니다.")
                }
                else{
                	alert("이미 사용하고 있는 아이디입니다.")
                }
            }
    })
</script>
@endsection

1. 조건문에서 사용가능할 때에는 localStorage set으로 해서 value 1을하고 이미 사용하고 있는 아이디일 경우 value 2로 담을 수 있게 셋팅합니다.

<input type="text" id="id" placeholder="아이디를 입력해주세요.">
<button id="checkId">중복확인</button>

@section('javascript')
<script>
	const checkId = document.getElementById("checkId");
    checkId.addEventListener("click", function(){
    	let login_id = $("#login_id").val();
        $.ajax({
        	type : "GET",
            url : "/checkId/"+login_id,
            success : function(response){
            	let user = response.user;
                if(user == null){
                	alert("사용 가능한 아이디입니다.")
                    localStorage.setItem('confirmId', 1)
                }
                else{
                	alert("이미 사용하고 있는 아이디입니다.")
                    localStorage.setItem('confirmId', 2)
                }
            }
    })
</script>
@endsection

• 참고▶ localStorage get으로 할 때 1일 경우에는 true, 2일경우에는 false로 구분지어서 사용할 것입니다.

2. password, confirmPassword 다룰 input을 만듭니다.

<input type="text" id="id" placeholder="아이디를 입력해주세요.">
<button id="checkId">중복확인</button>
<input type="password" id="password" placeholder="비밀번호를 입력해주세요.">
<input type="password" id="confirmPassword" placeholder="비밀번호를 다시 입력해주세요.">
@section('javascript')
<script>
	const checkId = document.getElementById("checkId");
    checkId.addEventListener("click", function(){
    	let login_id = $("#login_id").val();
        $.ajax({
        	type : "GET",
            url : "/checkId/"+login_id,
            success : function(response){
            	let user = response.user;
                if(user == null){
                	alert("사용 가능한 아이디입니다.")
                    localStorage.setItem('confirmId', 1)
                }
                else{
                	alert("이미 사용하고 있는 아이디입니다.")
                    localStorage.setItem('confirmId', 2)
                }
            }
    })
</script>
@endsection

3. onchange event를 사용해서 password, confirmPassword value를 가지고 옵니다.

<input type="text" id="id" placeholder="아이디를 입력해주세요.">
<button id="checkId">중복확인</button>
<input type="password" id="password" placeholder="비밀번호를 입력해주세요.">
<input type="password" id="confirmPassword" placeholder="비밀번호를 다시 입력해주세요.">
@section('javascript')
<script>
	const checkId = document.getElementById("checkId");
    checkId.addEventListener("click", function(){
    	let login_id = $("#login_id").val();
        $.ajax({
        	type : "GET",
            url : "/checkId/"+login_id,
            success : function(response){
            	let user = response.user;
                if(user == null){
                	alert("사용 가능한 아이디입니다.")
                    localStorage.setItem('confirmId', 1)
                }
                else{
                	alert("이미 사용하고 있는 아이디입니다.")
                    localStorage.setItem('confirmId', 2)
                }
            }
    })
    $("#password, #password-confirm").on("change", function(){
      var password = $("#password").val();
      var confirmPassword = $("#password-confirm").val();
    })
</script>
@endsection

4. password를 기본적으로 8자리 이상일 경우에 조건이 실행될 수 있게 if문으로 셋팅합니다. 그 안에 if(password.length>7)로 진행하시면 됩니다. 

5. password == confirmPassword 일 경우에는 비밀번호가 동일하다는 alert가 나오게 하고 아닐 경우에는 비밀번호가 일치하지 않다는 alert가 나오게 합니다.

<input type="text" id="id" placeholder="아이디를 입력해주세요.">
<button id="checkId">중복확인</button>
<input type="password" id="password" placeholder="비밀번호를 입력해주세요.">
<input type="password" id="confirmPassword" placeholder="비밀번호를 다시 입력해주세요.">
@section('javascript')
<script>
	const checkId = document.getElementById("checkId");
    checkId.addEventListener("click", function(){
    	let login_id = $("#login_id").val();
        $.ajax({
        	type : "GET",
            url : "/checkId/"+login_id,
            success : function(response){
            	let user = response.user;
                if(user == null){
                	alert("사용 가능한 아이디입니다.")
                    localStorage.setItem('confirmId', 1)
                }
                else{
                	alert("이미 사용하고 있는 아이디입니다.")
                    localStorage.setItem('confirmId', 2)
                }
            }
    })
    $("#password, #password-confirm").on("change", function(){
      var password = $("#password").val();
      var confirmPassword = $("#password-confirm").val();
            // password 8자리이상일경우에만 비교 
      if(password.length>7){
        if(password == confirmPassword){
			alert("비밀번호가 일치합니다")
        }
        else{
			alert("비밀번호가 일치하지 않습니다")
        }
      }
    })
</script>
@endsection

 

6. 휴대폰 번호를 입력할 input 과 번호인증 버튼을 만듭니다. 

7. 휴대폰 번호는 기본적인 길이는 11자리이기 때문에 조건문을 만들면 중복확인이 true일 때 localStorage getItem이 1인 것과 비밀번호 자릿수, 휴대폰 자릿수가 일치할 때에는 버튼이동이 가능하게 하고 아닐 경우에는 else if를 통해서 어디 부위가 미흡한지 alert로 알려줍니다.

<input type="text" id="id" placeholder="아이디를 입력해주세요.">
<button id="checkId">중복확인</button>
<input type="password" id="password" placeholder="비밀번호를 입력해주세요.">
<input type="password" id="confirmPassword" placeholder="비밀번호를 다시 입력해주세요.">
<input type="text" id="phone" placeholder="휴대폰 번호를 입력해주세요.">
<button id="authPhone">번호 인증</button>
@section('javascript')
<script>
	const checkId = document.getElementById("checkId");
    checkId.addEventListener("click", function(){
    	let login_id = $("#login_id").val();
        $.ajax({
        	type : "GET",
            url : "/checkId/"+login_id,
            success : function(response){
            	let user = response.user;
                if(user == null){
                	alert("사용 가능한 아이디입니다.")
                    localStorage.setItem('confirmId', 1)
                }
                else{
                	alert("이미 사용하고 있는 아이디입니다.")
                    localStorage.setItem('confirmId', 2)
                }
            }
    })
    $("#password, #password-confirm").on("change", function(){
      var password = $("#password").val();
      var confirmPassword = $("#password-confirm").val();
            // password 8자리이상일경우에만 비교 
      if(password.length>7){
        if(password == confirmPassword){
			alert("비밀번호가 일치합니다")
        }
        else{
			alert("비밀번호가 일치하지 않습니다")
        }
      }
    })
    
        // 번호 인증 클릭시 
    const authPhone = document.getElementById('authPhone')
    authPhone.addEventListener('click', function(){
      let login_id = localStorage.getItem('confirmId');
      var password = $("#password").val();
      var phone = $("#phone").val();
      if(login_id == 1&&password.length>7&&phone.length>10){
		alert("모든 조건이 맞습니다");
      }
      else if(login_id ==2){
        alert("아이디 중복확인해주시길 바랍니다.")
      }
      else if(password.length<=7){
        alert("비밀번호 8자리이상 작성해주시길 바랍니다.")
      }
      else if(phone.length<=10){
        alert("핸드폰번호를 다시 입력해주시길 바랍니다.")
      }
      else{
        alert("아이디 및 비밀번호, 핸드폰번호를 작성해주시길 바랍니다.")
      }
    })
</script>
@endsection

 

주의 사항▷ 현재 다룬 기술은 alert로 표현했지만 그 사이에 append로 해서 나타나게 할 수도 있고 문구로 표현할 수 도 있습니다. 그리고 번호인증 버튼을 누르면 별도로 문자로 확인하는 기능까지 응용할 수 있습니다.