[Spring][쇼핑몰 프로젝트][6]회원가입 유효성 검사(2)

프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

목표

  앞의 포스팅에 이어서 진행

 

순서

1. 비밀번호 유효성 검사
2. 비밀번호 확인 입력 검사
3. 비밀번호 확인 일치 검사

 

 

1. 비밀번호 유효성 검사

 회원가입 버튼 작동 메서드 내부에 아래의 코드를 추가합니다. 코드를 해석하면 비밀번호(pw) 입력란이 아무것도 입력이 되지 않았을 때 span 태그가 보이도록 하고 pwCheck 변수는 false를 대입합니다. 비밀번호(pw) 입력란에 입력이 되어 있다면 span 태그는 사라지게 하고 pwCheck에 true를 대입합니다.

 

 
        /* 비밀번호 유효성 검사 */
        if(pw == ""){
            $('.final_pw_ck').css('display','block');
            pwCheck = false;
        }else{
            $('.final_pw_ck').css('display', 'none');
            pwCheck = true;
        }
 

 

그림 1

 

 

2. 비밀번호 확인 입력 검사

 회원가입 버튼 작동 메서드 내부에 아래의 코드를 추가합니다. 코드의 의미는 비밀번호 확인(pwck) 입력란이 아무것도 입력이 되지 않았을대 span태그가 보이도록 하고 pwckCheck 변수는 false를 대입합니다. 비밀번호 확인(pwck) 입력란에 입력이 되어있다면 span태그는 사라지도록 하고 pwckCheck는 true를 대입합니다.

 

 
        /* 비밀번호 확인 유효성 검사 */
        if(pwck == ""){
            $('.final_pwck_ck').css('display','block');
            pwckCheck = false;
        }else{
            $('.final_pwck_ck').css('display', 'none');
            pwckCheck = true;
        }
 

 

그림 2

 

 

3. 비밀번호 확인 일치 검사

 비밀번호 확인란에 입력이 되었다는 것을 확인하는 것과 더불어 입력한 데이터가 비밀번호란에 입력한 데이터가 일치하는지 반드시 확인해야합니다. 따라서 아이디 중복검사와 같이 따로 메서드를 만들겠습니다. 단, 비밀번호 일치 검사는 아이디 중복검사와 같이 서버의 요청 없이 자바스크립트로만 진행됩니다.

 

3.1 span 태그 추가

 일치, 불일치 여부에 대한 경고글 역할입니다. 클래스 속성명이 final_pwck_ck인 span태그 위치에 2개의 span 태그를 추가합니다. 각 span 태그의 클래스 속성명은 아래와 같습니다.

 

 
                <span class="pwck_input_re_1">비밀번호가 일치합니다.</span>
                <span class="pwck_input_re_2">비밀번호가 일치하지 않습니다.</span>
 

 

 

 

3.2 css 설정 추가

 추가한 span 태그에 css속성을 추가합니다. (색상 & display)

 

 
/* 비밀번호 확인 일치 유효성검사 */
.pwck_input_re_1{
        color : green;
        display : none;    
}
.pwck_input_re_2{
        color : red;
        display : none;    
}    
 

 

 

 

3.3 메서드 추가

- 비밀번호 확인 입력란에 입력을 할때마다 실행이 되는 메서드를 추가합니다.

 

 
/* 비밀번호 확인 일치 유효성 검사 */
 
$('.pwck_input').on("propertychange change keyup paste input", function(){
        
    
});    
 

 

그림 5

 

- 변수를 선언하여 비밀번호 항목과 비밀번호 확인 항목란의 입력값으로 초기화합니다. 추가적으로 입력이 될 때 '비밀번호 확인을 입력해주세요'(final_pwck_ck)경고글을 사라지도록 하는 코드를 추가합니다.

 

 
/* 비밀번호 확인 일치 유효성 검사 */
 
$('.pwck_input').on("propertychange change keyup paste input", function(){
 
    var pw = $('.pw_input').val();
    var pwck = $('.pwck_input').val();
    $('.final_pwck_ck').css('display', 'none');
        
    
});    
 

 

그림 6

 

 

- if 문을 사용하여 비밀번호 입력 값과 비밀번호 확인 입력값이 같을 경우 일치한다는 경고글이 뜨도록하고 비밀번호 확인 유효성 검사 변수인 pwckcorChcek를 ture를 대입합니다. 일치하지 않을 경우 일치하지 않는다는 경고글과 pwckcorCheck 값에 false를 대입합니다.

 

 
/* 비밀번호 확인 일치 유효성 검사 */
 
$('.pwck_input').on("propertychange change keyup paste input", function(){
 
    var pw = $('.pw_input').val();
    var pwck = $('.pwck_input').val();
    $('.final_pwck_ck').css('display', 'none');
 
    if(pw == pwck){
        $('.pwck_input_re_1').css('display','block');
        $('.pwck_input_re_2').css('display','none');
        pwckcorCheck = true;
    }else{
        $('.pwck_input_re_1').css('display','none');
        $('.pwck_input_re_2').css('display','block');
        pwckcorCheck = false;
    }        
    
});    
 

 

그림 7

 

 

DATE

• 2020.12.03