> For the complete documentation index, see [llms.txt](https://wlrma-study.gitbook.io/js-study/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wlrma-study.gitbook.io/js-study/na-join/2..md).

# 2. 박서영

## 결과

![회원가입 구현 결과 화면 ](/files/-LxBlS0SiG6Phtyww9_o)

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

```javascript
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 요소들을 자바스크립트 변수에 가져와 할당해 주었습니다.&#x20;

```javascript
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 속성을 통해 이벤트 처리에 해당하는 함수들을 저장해주었습니다.&#x20;

```javascript
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 라는 하나의 함수에서 에러발생 여부를 확인해 줍니다. &#x20;
>
> 또한, errorBox 생성과 errorBoxRemove 함수를 inputCheck함수에서 호출해주면서, 기본적으로 html 코드에 작성되어있는 에러메세지를 보여주고, 삭제는 동작을 수행할 수 있습니다.&#x20;

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wlrma-study.gitbook.io/js-study/na-join/2..md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.