[HTML] HTML5 이용하기 02 - 정규식 이용하기 (170417)

HTML5 이용하기02 - 정규식 이용하기

• 정규식을 이용한 유효성 검사 form

- form에 submit 이벤트가 일어났을 때 정규식을 통과하지 못하면 실행되지 않도록 한다.

- form을 입력할 때 keyup이벤트 발생

- keyup 이벤트 발생시 정규식의 매칭 여부를 초록과 빨강으로 나타낸다.

cf > 

- this를 잘 활용하자

** 출력 결과 **

• bootstrap을 이용한 유효성 검사 form

- 아이디와 비밀번호의 유효성을 검사한다.

- keyup이 되면 유효성 검사를 통해 우측에 아이콘(bootstrap)이 뜨도록 한다.

- keyup결과에 따라 글의 색상이 red와 green이 되도록 한다. 

- Id나 Email의 유효성이 false라면 form전송을 막는다. (disabled이용)

- keyup에 따라 바뀌는 것들을 makeSuccess함수와 makeError함수로 만든다.

- 이메일을 검증할 정규 표현식은 google검색을 통해 얻으면 빠르다.

 - submit을 막을 때, return false;는 매우 중요하다!

** 출력 결과 **