오늘 한일

• 정규표현식을 통해 validation(유효성 검사) 만들기
• javascript event handler

정규 표현식

regular Expression이라고 하며, 데이터의 일정한 패턴을 표현하는 방식이다.

문법

javascript 에서는 \ \ 사이에 조건을 설정하여 정규표현식 패턴을 만들 수 있다.

id: /^\w{4,}/ 
// 4자 이상의 영문 대소문자 또는 숫자
 
password: 
/^(?=.*[a-zA-Z]{3,})(?=.*\d)(?=.*[!"#$%&'()*+,-./:;=>?@\]\^_\`\{\|\}\~\\])[\d\w!"#$%&'()*+,-./:;=>?@\]\^_\`\{\|\}\~\\]{4,}$/ 
// 영문 대소문자 3글자 이상, 특수문자 포함, 4글자 이상
    
name: /^[가-힣]{2,20}$/, 
// 한글 2글자 , 20글자 이하
    
email: 
/^[\w._-]+\@[a-z]+\.(([a-z]{2}\.[a-z]{2})|[a-z]{3,5})/,
// 영문 대소문자 또는 숫자 또는 ., _, -` 중 1개이상 `@` `영문 소문자` 1개 이상 `.`
// 영문 소문자 2개 . 영문 소문자 2개` 또는 `영문 소문자 3개 이상 5개 이하

• . : 문자열 한개를 의미
• ^ : 뒤에 오는 문자열을 제외 또는 문자열의 시작
• • : 앞에 있는 문자열이 하나 이상
• • : 앞에 있는 문자열이 0개 이상
• {n,m} : n개 이상 m개 이하
• [a-z] : 알파벳 소문자 중 아무거나
• \ : escape 탈출문자 (정규표현식 기호가 아닌 특수문자 그대로로 사용할 때)

메서드

정규표현식에서는 test, exec, test, match, search, replace, replace, split이 있으며,

• exec : 대응되는 문자열을 찾는 RegExp 메소드입니다. 정보를 가지고 있는 배열을 반환합니다. 대응되는 문자열을 찾지 못했다면 null을 반환합니다.
• test : 대응되는 문자열이 있는지 검사하는 RegExp 메소드 입니다. true 나 false를 반환합니다.
• match : 대응되는 문자열을 찾는 RegExp 메소드입니다. 정보를 가지고 있는 배열을 반환합니다. 대응되는 문자열을 찾지 못했다면 null을 반환합니다.
• search : 대응되는 문자열이 있는지 검사하는 String 메소드 입니다. 대응된 부분의 인덱스를 반환합니다. 대응되는 문자열을 찾지 못했다면 -1을 반환합니다.
• replace : 대응되는 문자열을 찾아 다른 문자열로 치환하는 String 메소드입니다.
• split : 정규식 혹은 문자열로 대상 문자열을 나누어 배열로 반환하는 String 메소드입니다.

적용

validation(유효성검사)에서는 test()메서드만 사용했으며, 위에 있는 id, password, name, email을 통해서 해당 input의 value를 모두 검사해 주었다.