정규식으로 이메일 형식 검증하는 법

.includes()

문자에서 찾을 단어가 들어있는지 검사하고 있다면 true / 없으면 false 반환한다.

 

'문자'.includes('찾을단어') // 사용법

'abc'.includes('a');  // true
'abc'.includes('ab'); // true
'abc'.includes('ac'); // true

그외에 값은 false

 

문자 abc중 하나라도 포함하고 있으면 true를 반환한다.

 

하지만 한글, 영어가 들어있는지, a로 끝나는지, 마침표 다음 영어가 있는지 등등
이와 같은 경우는 includes() 만으로 검증하기 힘들다.

 

 

정규표현식 (regular expression)

정규식은 문자 검사를 할 때 사용하는 식이다.
어떤 문자에 "abc"라는 단어가 들어있는지 확인할 때 사용한다.

 

js로 정규식을 표현하는 방법

사용법
/정규식/.test(정규식으로 검사해볼 문자)

/abc/.test('abcdef') 

문자열 값 중 abc를 포함하고 있다면 true를 반환한다.

 

 

정규식은 매우 많아서 필요할 때마다 찾아써야한다.

자주 쓰는 몇가지만 적어보겠다.

 

/a/.test('abcde')  //true

한글이나 영어의 경우 글자 존재 유무를 확인할 수 있다.

 

/[a-d]/.test('aefg')  //true
/[가-다]/.test('다라마바')  //true

기호를 이용하여 문자 범위를 지정 할 수 있다.
a-z는 a부터 z까지의 하나의 문자 범위를 의미한다.

 

 

 

/[a-zA-Z]/.test('반가워요')  //false
/[a-zA-Z]/.test('반가워요a') //true
/[ㄱ-ㅎ가-힣ㅏ-ㅣ]/.test('반가워요')  //true

[a-zA-Z] 전체 알파벳 하나라는 뜻이다.
[ㄱ-ㅎ가-힣ㅏ-ㅣ] 전체 한글 하나라는 뜻이다.

 

 

/\S/.test('abcde')   //true  

백슬래시S 는 특수문자 포함 아무문자 1개라는 뜻이다

 

/^a/.test('abcde')   //true
/e$/.test('abcde') //true

^a 라고 적으면 a로 시작하는지 검사할 수 있다
e$ 라고 적으면 e로 끝나는지 검사할 수 있다.

 

 

/(e|f)/.test('abcde')//true

OR연산자처럼 e와 f중 범위 내에서 한 문자가 있는지 검사한다.
AND연산자도 사용가능하다.

 

/a+/

+ 기호를 붙여주시면 뒤에 오는 글자들도 a와 일치하면 반복해서 쭉 찾아달라는 뜻이다
왜냐면 /a/는 a를 다 찾으라는게 아니라 a 한개를 찾으라는 뜻이다.
aaaaa 이런걸 찾고 싶으면 /a+/ 쓰면 된다.

 

 

/\S+t/

\S는 모든문자
+t는 \S뒤에 있는 것들 중 t문자를 찾는다.

모든 문자 여러개 다음에 t라는 글자가 있냐를 검사해주는 정규식이다. 

ex) ddddddt 이런 값들을 찾을 수 있다.

 

 

간단히 작성해보는 이메일 정규식

이메일은 모든 문자@모든문자.모든문자 이런식으로 되야한다.
모든 문자 사이에 @ 그리고 .이라는 특수문자가 와야한다. 

/\S+@\S+\.\S+/

\. 이라는 기호는 왜 이렇게 썼냐면 마침표(.)는 정규식에서 특수한 문법이기 때문에
마침표 문법을 쓰는게 아니라 진짜 마침표를 찾아달라라는 의미로 쓰려면 백슬래시를 앞에 붙인다.

 

 

비밀번호 대문자 정규식

loginForm.addEventListener("submit", function(e){
    if(/[A-Z]/.test(userPWD.value) == false){
        alert("비밀번호에 대문자를 포함해주세요.")
        e.preventDefault();
    }
})