Javascript Project 1 . 회원가입양식 및 유효성검사

Javascript Project  1 .  회원가입양식 및 유효성검사

회원가입양식

 

사용자이름, 이메일, 비밀번호를 기입할 수있게 했다.

사용자가 입력한 값이 유효하면 초록색으로 하이라이트를 주고, 유효하지않으면 빨간색이 뜨며, 안내메세지가 해당칸 하단에 나온다.

이메일정규식을 넣어 이메일값의 유효성을 검사한다.

 

 

 

 

 

 

 

 

 

 

CSS

• 사용자가 입력하기위해 input칸을 누르면 선택한 칸을 보여주기위해 보더강조한다.
• 주요색상은 이름을 선언후 불러서 쓰기
• 상위태그에 relative를 줘서 하위태그가 absolute적용 후 포지션기준을 잡을 수있게 했다.
• 에러메시지는 기본적으로 가려주고, 에러상태에서만 나타나도록 설정.

JS

• 이메일 정규식표현을 구글링 한 후 유효성검사 함수에 넣어줬다. 사용자가 입력한 이메일문자의 유효성을 검사한다.
• 올바르게 입력했으면 input태그를 감싸는 부모태그에 하이라이트속성이 담긴 클래스명이 추가된다.
• 조건설정시 콘솔에 입력하면서 작동되는 지 확인하면서 작성
• 첫번째 암호와 확인암호가 불일치 할 경우 안내메세지를 출력한다.

개인프로젝트를 작게나마 매일 해야겠다.

자바스크립트기능을 넣을때마다 효과들이 눈에 보이니까 재밌다. 아직 백엔드기능이없어서 빈깡통느낌이지만, 빨리 주변지인들도 이용할 수있는 사이트를 완성하고싶어졌다.