[졸업작품] - 제작 1주차(수정)

오늘 블로그는 다른팀원이 한 회원가입 페이지를 더 완성도 있게 수정하는 과정을 보여줄 것이다. 

회원가입 페이지

이것은 졸업작품을 같이만드는 조원이 제작한 회원가입 페이지다. 

-기능-

1. 비밀번호 입력값과 비밀번호 확인값이 다르면 아래 이름,생년월일, 핸드폰 번호, 이메일등을 입력하는 창이 안나오게 하였다.

2. 모든 값을 입력하고 회원가입 버튼을 누르면 모든 값이 로컬저장소에 저장되도록 하였다.

+ 이메일 형식이 틀리면 아래 문구가 나오게 하였다. 만약 값이 없다면 다시 해제된다.(내가 한것)

---

현재 기능은 이정도뿐이라서 추가하고 싶은 기능이 뭐가 더 있을까 생각하다가 네이버 회원가입 페이지를 찾아보게 되었다.  거기서 특이했던 점은 이메일 형식이 틀리면 오류 문구가 이메일 입력창 아래 나오게 하는 기능이였다. 그래서 한번 구현해 보기로 하였다. 어려울 것으로 예상되었으나 생각보다 쉽게 구현할 수 있었다.

-깨달은 점-

1. 이메일 형식을 제한하는 표현식이 따로 있다는 것을 알았다.

var re = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;

re.test(Email)===false

형식이 틀린지 아닌지 판별하기 위해서 test함수를 써서 확인할 수 있다.

2. 'blur' 이벤트를 처음 써봤는데 신기했다. 이 이벤트는 해당 요소에 포커스가 해제되었을 때 진행된다.