S1: 회원가입 폼 만들기

작동 조건 

#1. 아이디에는 4자리 이상이 들어가야하며 4자리 이상일시,

"사용할 수 있는 아이디" 4자리 미만일시,

"아이디는 최소 4자리 이상이여야 합니다." 가 출력된다.

 

#2. 비밀번호와 비밀번호 확인이 같을 시 넘기고 다를 시 "비밀번호가 일치하지 않습니다." 출력

 

#3. 비밀번호와 비밀번호 확인칸 둘중 하나라도 빈칸일 시 검사를 안하므로 반응이 없다.

 

#4. #1~#3까지 만족해야 회원가입 버튼이 활성화 된다.

 

작성

각 엘리먼트 추출

아이디 입력, 사용할 수 있는 아이디 div, 아이디가 최소 4자리이상이여야합니다 div, 비밀번호, 비밀번호 입력 확인, 비밀번호가 일치하지 않습니다div, 회원가입의 엘리먼트를 변수에 할당합니다.

 

'hide' 클래스 적용

message의 div에는 hide 클래스를 주어 css로 hide클래스가 적용되면 display:none으로 숨김처리를 해둡니다.

이후 각 input에 맞는 조건이 입력된다면 hide 클래스가 사라지도록 작성합니다.

 

js의 nameEl 작동

name.El에 키가 입력될 때 마다 함수 isMoreThan4Length를 작동시켜 인수로 nameEl에 사용자가 입력한 값을 보냅니다. 받은 함수에서는 해당 값의 길이를 4보다 큰지 아닌지 if조건문으로 거르게 됩니다. 4보다 크다면 성공메세지 div에 hide클래스를 숨기고 실패메세지 div에 hide를 추가합니다.

 

js의 password 작동

비밀번호 입력칸도 마찬가지로 첫번재 패스워드 입력칸과 두번째 패스워드입력칸에 키가 입력될때 함수가 실행되며

isMatch함수로 패스워드1과 패스워드2를 인수로 받아 두 값이 같거나 한개의 값만 존재할시 true를 보내어 키가 눌릴때마다 앞 함수의 return 값인  true,false에 의해 if문이 동작하게 됩니다. 조건에 따라 불일치 메세지 div에 hide를 추가하고 삭제하게 됩니다.

 

회원가입 버튼 제어

아이디 입력칸 조건과 비밀번호 입력칸조건이 모두 통과 되어야 회원가입버튼이 활성화 되도록 작성합니다. 아이디입력칸에 정상적으로 통과됐을때는 nameCount에 1을 할당하고 그렇지않을시 초기값 0을 할당합니다. 비밀번호 입력칸에서도 동일하게 정상적으로 입력되어 불일치 메세지가 div가 출력되지않는 조건에서 pwCount를 1로 할당하고 그렇지 않을시 초기값 0으로 할당합니다. 회원가입 버튼의 엘리먼트는 disabled를 true로 할당하여 처음부터 비활성화를 시킨뒤 각 아이디입력 칸이나 비밀번호 입력칸마다 버튼이 눌릴때마다 매 순간 확인하기 위해 nameCount와 pwCount 둘다 값을 1을 가지고있을때 회원가입 버튼의 disabled를 false로 바꾸어 활성화 시킵니다. 그 외에는 두 값중 하나라도 0일 시 true로 전환하게 됩니다.

 

비밀번호 입력칸 제어

첫번째 비밀번호와 두번째 비밀번호중에 하나라도 값이 없을때도 기존 로직은 pwCount를 1로주어 회원가입 버튼이 활성화되니 두값이 모두있을때만 pwCount를 1로 줄수 있도록 if(firstPassword.value && secondPassword.value)를 주어 내부에서 pwCount를 제어합니다.