2. 박서영

결과

회원가입 구현 결과 화면

기본 함수 구현 + 에러 메세지 기능 활성화

var pattern1=/[0-9]/;
var pattern2 =/[a-zA-Z]/;
var pattern3=/[~!@#$%^&*()_+|<>?:{}]/;

var userId = document.querySelector("#id"); //객체
var userPw = document.querySelector("#pswd1");
var userPw2 = document.querySelector("#pswd2");
var userName = document.querySelector("#name");
var userYear = document.getElementById("yy");
var userDay = document.getElementById("dd");
var userGender = document.getElementById("gender");
var userEmail = document.getElementById("email");
var userPhone = document.getElementById("mobile");

var inputs =document.querySelectorAll("input");
var errors =document.querySelectorAll(".error_next_box");
var JoinBtn = document.getElementById("btnJoin");

: 일단 기본적으로, 선경님 마크업 문서를 참조하여 각 input 요소들을 자바스크립트 변수에 가져와 할당해 주었습니다.

userId.onchange=checkId;
userPw.onchange = checkPw;
userPw2.onchange = checkPw2;
userName.onchange = checkName; //
userYear.onchange = checkYY;
userDay.onchange = checkDD;
userEmail.onchange = checkEmail;
userPhone.onchange = checkPhone;

function checkId(){
    inputNum=0;
    if(userId.value.length<4 || userId.value.length >10){
        alert("4자-10자 아이디를 입력하세요.");
        userId.value="";
        userId.focus();
    }
    inputcheck(inputNum);
}

function checkPw(){
    inputNum=1;
    if(userPw.value.length<8 || userPw.value.length>16 ||!pattern1.test(userPw.value) 
    ||!pattern2.test(userPw.value)||!pattern3.test(userPw.value) ){
    
        alert("8~16자 영문 대 소문자, 숫자, 특수문자를 사용하세요.");
        userPw.value="";
        userPw.focus();
    } 
    inputcheck(inputNum); 
}

: DOM 요소로 가져온 변수들에 onchange 속성을 통해 이벤트 처리에 해당하는 함수들을 저장해주었습니다.

var inputNum;
function inputcheck(i){
    for(var j=i;j>=0;j--){
        if(inputs[j].value===""){
            if(j>=6){
                errorBox(j-1);
            }
            else{
        errorBox(j);
            }
    }
    else{
        if(j>=6){
            errorBoxRemove(j-1);
        }else
        errorBoxRemove(j);
    }
    }
    for(var k=i;k<inputs.length;k++){
     if(inputs[k].value===""){
         if(k>=6){
             errorBox(k-1);
         }else{
             errorBox(k);
         }
     }
     else{
        if(j>=6){
            errorBoxRemove(k-1);
        }else
        errorBoxRemove(k);
     }
 }
}

function errorBox(j){
    errors[j].style.display="inline-block";
}
function errorBoxRemove(j){
    errors[j].style.display="none";
}

: 각 input 엘리먼트의 이벤트를 처리하는 함수들에서 inputNum 을 변경해주면서, 해당 inputNum을 이용해서, inputCheck 라는 하나의 함수에서 에러발생 여부를 확인해 줍니다.

또한, errorBox 생성과 errorBoxRemove 함수를 inputCheck함수에서 호출해주면서, 기본적으로 html 코드에 작성되어있는 에러메세지를 보여주고, 삭제는 동작을 수행할 수 있습니다.

나머지 함수들도 위와 같은 로직을 기본으로, 각 함수에 맞게 확인해야하는 조건들의 차이만 존재하게 됩니다.