* 예외처리하기 (Validation check)*
어플 회원가입 화면
<화면>
<HTML>
<CSS>
<JS>
1. 자주 쓸것 같은것을 변수로 간단하게 저장한다.
2. 정보 취합. 취합이 잘 되었나 확인한다.
( 함수를 만들어 놓고 맨 아래에서 적용했다. )
-.value : 칸에 적힌 내용
3. 성공적으로 회원 가입 되었을 때 '회원가입을 축하합니다'라고 팝업창을 띄울걸 미리 만들어 놓는다.
4. 예외처리
1) 빈 칸 없이 다 입력되었는지 확인
if (!변수이름) {
입력되지 않았을 때 실행할 행동
}
- .focus() : 커서가 해당 칸에 가도록 한다. UX를 올려줌
- return : 실행되기 전 상태로 돌아가는것. 실행된 if 문 위로 올라간다.
- 모든 빈칸에 대한 확인
- 아이디가 입력되지 않았을 때 실행화면
- 이후 아이디 입력칸에 커서가 간 화면
2) 비밀번호와 비밀번호 확인 칸이 같은지 비교하기
비교연산자 != 이용.
- .value 에 '' (null)을 넣어준다.
- 비밀번호가 서로 다를때의 팝업
3) 비밀번호 길이 확인. (6보다 길 경우 통과)
- 보통 비밀번호 비교보다 먼저 실행한다.
- 길이를 확인하는 방법 : 변수.length
- 길이가 제대로 취합되는지 확인
-> 제대로 된다.
- 길이가 6보다 짧을 때 실행할 동작
- 비밀번호길이가 6보다 작을때의 웹 화면
5) 이메일이 형식대로 잘 적혔는지 확인
: 정규식 이용
- 이메일 정규식 : 이메일이 영어, 숫자, 골뱅이, ....com or co.kr ..등으로 구성되어있는지 확인한다
- 정규식을 공부하면 스스로 작성할 수 있다
-구글에 검색해서 사용하기도 한다.
모두 통과되었을 때 결과 화면.
물론 진짜 웹에서 이렇게 작성하면 통과되지 않겠지만 연습이기 때문에 이 정도만 작성했다.
'프론트엔드 > JavaScript' 카테고리의 다른 글
| <Javascript> 조건문 (switch ... case & 삼항조건문 ) (0) | 2017.07.29 |
|---|---|
| <Javascript> 다른 내용 작성하는데 HTML과 JS 둘다 주석처리하기 귀찮을 때 쓰기 좋은 방법 (0) | 2017.07.28 |
| <Javascript> 조건문 if 예제1. 자판기 만들기 (0) | 2017.07.28 |
| <Javascript> 조건문1 (if) (0) | 2017.07.28 |
| <Javascript> 연산자 (0) | 2017.07.28 |