JS 사용자 입력 검증 - Regular Expression

Javascript 검증 오류 처리 검증, 오류 처리란? 값을 입력하고 제출하기 전에 폼양식 입력값 - 공란은 없는가? - 입력 조건을 주고 싶은가? 글자 개수, 지정된 문자 등 잘못 입력된 값은 없는가? Email주소의 형태가 정확 한가?

Javascript로 사용자 입력 검증 자료를 제출하면?(validate.html)

Validate.html 코드분석 폼양식에 입력된 값에 관한 함수

Validate.html 코드분석 입력된 문자 검사 -> 정규 표현식 사용 (regular expression)

정규 표현식(Regular Expression) Pattern matching에 널리 활용되는 형식언어 (http://en.wikipedia.org/wiki/Regular_expression) 기본 사용법 / 원하는 문자 패턴(메타문자)/ 예) /[^a-zA-Z0-9_-]/ -> 모든 정규표현식은 /로 감싸야 한다 ※ 특별한 메타문자 [ : 열림괄호, ] : 닫힘 괄호, l-r: l과 r 사이의 문자범위 ^ : 괄호사이의 모든 것을 뒤집음 (not) a-z : 모든 소문자 A-Z 모든 대문자 0-9 : 모든 숫자

정규 표현식(Regular Expression) 문자 매칭 /<.*>/ : “<”로 해서 “>”로 끝나며, 그 안에는 비거나, 모든 문자가 와도 됨 /<.+>/ : “<”로 해서 “>”로 끝나며, 그 안에는 1개 혹은 모든 문자가 와도 됨 /5\.0/ : 5.0과 일치. ‘.’은 \.으로 이스케이프 /5\.0*/ : ?(생각해보세요) * : 0개 이상의 어떤 문자(들) + : 1개 이상의 어떤 문자(들) ? : 0개 또는 1개의 어떤 문자 . : 모든 문자

정규 표현식(Regular Expression) 괄호‘( )’로 그룹만들기 /1(,000)+ / 뜻 : 1,000 1,000,000 1,000,000,000 등을 의미함 마지막 공백은 공백을 만나 끝나야만 일치함을 의미함 * : 0개 이상의 어떤 문자(들) + : 1개 이상의 어떤 문자(들) ? : 0개 또는 1개의 어떤 문자 . : 모든 문자

정규 표현식(Regular Expression) 문자 클래스 ‘[ ]’ : 불명확한 일치 /gr[ae]y/ 뜻 : gray, grey 모두 일치함 단, 둘 중 한 개만 선택가능 (or) /Le *Guin/ 뜻 : LeGuin, Le Guin, Le Guin 모두 일치함 -> 공백 뒤에 *를 넣는다. * : 0개 이상의 어떤 문자(들) + : 1개 이상의 어떤 문자(들) ? : 0개 또는 1개의 어떤 문자 . : 모든 문자

정규 표현식(Regular Expression) 범위(-) 표시/ 메타 문자들 /[0-9]/ 뜻 : 0~9사이의 유일한 숫자와 일치 [0-9]대신 [\d]를 써도 된다. (digit) \d : 한 개의 숫자 일치 \D 숫자가 아닌것 한 개 일치 \n : 새줄 문자 일치 \s : 공백 일치 \S 공백이 아닌것 한 개 일치 \t : tab 문자 일치 \w : 단어문자 일치(a-z, A-Z, 0-9, _) \W : 단어 아닌 문자 일치(a-z,A-Z,0-9,_ 제외 모든 문자) {n} : 정확히 n개 일치 {n,} : n개 혹은 그 이상 일치 {min, max} : 적어도 min부터 최대 max개까지 일치

Automata (http://en.wikipedia.org/wiki/Automata_theory )

정규 표현식(Regular Expression) 복잡한 예제 <a href=“www.mozilla.org”> 전체와 일치시키려면 /<[^>]+>/ / : 정규표현식 시작 < : 태그의 열림 괄호만 일치 [^>] : ‘>를 제외하고’일치하는 문자클래스 + : 적어도 하나 이상의 [^>] > : 태그의 닫힘 괄호만 일치 / : 정규표현식 끝

정규 표현식(Regular Expression) 복잡한 예제 /[^a-zA-Z0-9_-]/ / : 정규표현식 시작 [ : 문자클래스 시작 ^ : not(부정) a-z : 소문자 A-Z : 대문자 0-9 : 모든 숫자 _- : 언더바와 대쉬 문자 ] : 문자클래스 끝 / : 정규표현식 끝 뜻 : 소문자, 대문자, 숫자, _,- 문자가 아닌 문자열

정규 표현식(Regular Expression) 메타 문자 : 문자이외에 특별한 의미를 가진 문자 / . * + ? [문자(집합)] [^문자(집합)] (그룹) left|right a-z ^ 문자열의 시작에서 일치 ([^]와 다름) $ : 문자열의 끝에서 일치 \b \B \d \D \n \s \S \t \w \W \x {n} {n,} {min,max}

정규 표현식(Regular Expression) 정규표현식의 예제 rec[ei][ei]ve : receive, recieve, receeve, reciive rec[ei]{2}ve: 위와 같음 rec(ei)|(ie)ve: receive, recieve (receeve, reciive 는 안됨) cat|dog : “I like cats and dogs”에서 cat이나 dog cats$: “My cats are friendly cats”중에서 마지막 cats ^my: “my cats are my pets”중에서 첫번째 my \d{2,3} : 2개 혹은 3개의 숫자 00-999 [\w]+ : 한 개 혹은 그 이상의 문자 단어 [\w]{5}: 어떤 5개의 문자 단어

정규 표현식(Regular Expression) Javascript에 활용 : test(), replace() 메소드 활용 /g : ‘global’ matching e.g., /cats/g : “I like cats and cats like me” 두번의 cats 모두 일치 /i : 대소문자 모두 matching e.g., /dogs/gi : “Dogs like other dogs”에서 Dogs와 dogs 일치 /[a-zA-Z]/ 대신 /[a-z]/i 혹은 /[A-Z]/i 사용 document.write((“Cats are fun. I like cats”).replace(/cats/gi, ”dogs”)) -> “dogs are fun. I like dogs” 반환 document.write(/cats/i.test(“Cats are fun. I like cats”)) -> true 반환

Thank you