회원가입 ID확인 (AJAX)

GOAL : 아이디를 입력하고 다음 커서로 넘어갔을때(focusout) 그 아이디가 이미 database에 있는 아이디인지 아닌지 구분하고 box아래 메세지를 표출하는 것.

 

 

1. 공간 만들기

 

            <tr>
                <td>ID</td>  <!-- 중복체크 AJAX로 알림주기 / 특수문자 -->
                <td ><input type="text" id="userid" name="userid">
                    <p style="display: none;" id="userid_msg"></p>
                </td>
            </tr>

 

아이디 입력한 아래 메세지를 표출할 공간을 만든다. 메세지가 표출되기 전까지 보이지 않게 임시로 display:none으로 가려놨다.

 

2. js에 이용할 두 HTML 태그들을 선언해 준다.

 

const userid = document.querySelector('#userid');
const userid_msg = document.querySelector('#userid_msg');

 

3. userid를 확인하기 위한 함수를 생성한다.

 

        function userid_check(){
 
            if(login_flag){
            
                userid_msg.innerHTML = 'CORRECT ID';
                userid_msg.style.color = 'green';
                userid_msg.style.display = 'block';
                
            }else{
            
                userid_msg.innerHTML = 'THIS ID IS ALREADY IN USE.'
                userid_msg.style.color = 'red';
                userid_msg.style.display = 'block';
                
            }
        }

 

if문을 만들어주는데 결과값이 true/false일때 userid_msg의 내용과 style을 지정해줬다.

여기서 login_flag는 아직 선언되지 않았다. 

 

4. AJAX를 사용해서 정보를 주고받을 수 있게 설정한다.

 

	async function userid_check(){
            let idData = await axios.get(`http://localhost:3000/user/userid_check?userid=${userid.value}`);
            
            if(login_flag){
                userid_msg.innerHTML = 'CORRECT ID';
                userid_msg.style.color = 'green';
                userid_msg.style.display = 'block';
            }else{
                userid_msg.innerHTML = 'THIS ID IS ALREADY IN USE.'
                userid_msg.style.color = 'red';
                userid_msg.style.display = 'block';
            }
        }

 

이때 위에서 가지고온 userid의 value를 uri로 넣어서 데이터를 가지고 온다.

userid_check는 임의로 작성한 url.

 

axios사용을 위해 라이브러리를 지금 작성한 script전에 불러와야한다.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>

 

 

5. 아이디 정보를 가지고 올 url를 연결/설정해준다. (위에서 임의로 미리 작성해놓은 userid_check)

 

router.get('/userid_check',controller.userid_check);

 

 

5번 전체코드

let userid_check = async (req,res)=>{
    let userid = req.query.userid;
    let flag = false;
    let result = await User.findOne({
        where:{ userid }
    })
    //result 가 undefined면 아이디 생성가능 / defined면 불가능

    if(result == undefined){
        flag=true;
    }else{
        flag=false;
    }

    res.json({
        login:flag,
        userid,
    })
}

 

5-1. 4번에서 보내준 uri값의 value(userid)를 받아 변수로 설정해준다.

 

let userid = req.query.userid;

 

5-2. 받은 변수를 사용해서 query문으로 database로부터 data를 불러온다.

 

    let result = await User.findOne({
        where:{ userid }
    })

 

5-3. data가 존재 하는지 안하는지를 구분하기 위해서 flag를 선언해주고(처음 들어갔을때는 default를 false로) 불러온 데이터가 undefined일때와 defined일때를 if문으로 구분시켜서 flag를 설정해준다.

 

    let flag = false;
    
    if(result == undefined){
        flag=true;
    }else{
        flag=false;
    }

 

5-4. 이렇게 나온 값들을 json형식으로 변환시켜서 보내준다.

 

    res.json({
        login:flag,
        userid,
    })
    
    module.exports = {
	   userid_check,
    }

=> 이때 login변수에 flag값을 넣어준다.

 

6. 3번 함수의 조건문에 flag를 기준으로 준다.

 

let login_flag = idData.data.login;

3번에서 선언한 idData안의 data안에 있는 login(5-3번에서 설정해서 받아준 flag값)을 변수로 받아 사용한다.

 

 

7. 생성한 함수를 이벤트 리스너로 발동시킨다.

 

        userid.addEventListener('focusout',()=>{
            userid_check();
        })

 

 

전체코드

const userid = document.querySelector('#userid');
const userid_msg = document.querySelector('#userid_msg');

        async function userid_check(){
            let idData = await axios.get(`http://localhost:3000/user/userid_check?userid=${userid.value}`);
            let login_flag = idData.data.login;
            if(login_flag){
                userid_msg.innerHTML = 'CORRECT ID';
                userid_msg.style.color = 'green';
                userid_msg.style.display = 'block';
            }else{
                userid_msg.innerHTML = 'THIS ID IS ALREADY IN USE.'
                userid_msg.style.color = 'red';
                userid_msg.style.display = 'block';
            }
        }

        userid.addEventListener('focusout',()=>{
            userid_check();
        })

 

 

 

결과

 

A. 데이터 베이스에 없는 id를 입력했을때

커서가 빠지면 설정해둔 값이 뜬다.

 

B. 이미 존재하는 id를 입력했을때