[모수진] Sprint4

[April-37]

요구사항

기본

로그인

• 이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
• 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
• 비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다
• 비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.
• input 에 빈 값이 있거나 에러 메세지가 있으면 ‘로그인’ 버튼은 비활성화 됩니다.
• input 에 유효한 값을 입력하면 ‘로그인' 버튼이 활성화 됩니다.
• 활성화된 ‘로그인’ 버튼을 누르면 “/items” 로 이동합니다

회원가입

• 이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
• 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
• 닉네임 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “닉네임을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
• 비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다
• 비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.
• 비밀번호 input과 비밀번호 확인 input의 값이 다른 경우, 비밀번호 확인 input 아래에 “비밀번호가 일치하지 않습니다..” 에러 메세지를 보입니다.
• input 에 빈 값이 있거나 에러 메세지가 있으면 ‘회원가입’ 버튼은 비활성화 됩니다.
• input 에 유효한 값을 입력하면 ‘회원가입' 버튼이 활성화 됩니다.
• 활성화된 ‘회원가입’ 버튼을 누르면 “/signup” 로 이동합니다

심화

• 눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지기도 합니다.
• 비밀번호의 문자열이 가려질 때는 눈 모양 아이콘에는 사선이 그어져있고, 비밀번호의 문자열이 보일 때는 사선이 없는 눈 모양 아이콘이 보이도록 합니다.

주요 변경사항

• js 파일 추가
• input 칸 focusout 시 eventListener 추가

스크린샷

멘토에게

• 아래에 에러 메시지 출력을 어떤 식으로 해야 할지 모르겠습니다.
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[JaeSang1998]

수진님 이번주도 고생많으셨습니다 :)

[JaeSang1998]

validate 구현 1)

이렇게 validate 가 실패했을때 보통 하단에 보이지 않는 div 등을 추가해주었다가, error 가 생기면 그때 diaplay 를 보여지도록 변경하고 에러 메시지를 content 를 넣어주고! 그런형태로 해보시면 됩니다 :) 안되면 멘토링시간에 한 번 더 질문해주세요!

[JaeSang1998]

focus out 보다는 blur 를 더 많이 사용하는것 같아요!

[JaeSang1998]

적절하게 네이밍을 잘 변경해주셨군요 :) 좋습니다.

[JaeSang1998]

login, signup 둘 다 focus out 일때 로직을 잘 작성해주셨어요!

하지만 항상 우리 form 의 꽃은 submit 입니다! 다음번에는 submit event 를 핸들링하는 함수를 꼭 작성해봅시다 :)

[JaeSang1998]

validate 구현 2)
여기 input 하단에 display가 none 인 div,span 을 숨겨두는거죠.

[JaeSang1998]

여기에서 button 도 불러와서 button 의 disabled 속성을 validate 에 따라 변경해주면 button 도 금방 disable 처리 할 수 있겠죠?