[JS] 정규 표현식 사용하기

문제 발생

subsribe 부분에 input type을 email로 주고 required 설정을 줬다.

이메일 형식에 맞지 않거나 입력하지 않으면 저절로 submit이 되야한다.

하지만 저런 식으로 입력을 해도 정상적으로 잘만 작동되는 것을 발견했다..

<form class="subscribeInput">
      <img src="img/mail.png" alt="메일 이미지" class="mailImg">
      <input type="email" placeholder="Enter your e-mail address" required>
      <button class="subscribeButton">Subscribe</button>
</form>

왜 그런지 확인해보니 js코드에서 문제가 발생 한 것..

event.preventDefault때문에 submit부분에서 멈춰버리니 정상적으로 작동되지 않은 것이었다.

subscribeButton.addEventListener('click',(event)=>{
    let email=document.querySelector('.subscribeInput> input').value;
    event.preventDefault();
    if (!email){
        alert("이메일을 입력해주세요!");
        return;
    }
    modal.style.display='flex';
    //모달창 뜨면 스크롤 막기
    document.body.style.overflow='hidden';
})

이것을 해결하기 위해서 예외 처리를 해야 한다.

아무것도 입력하지 않았을 땐 이미 내가 해줬으니email 주소 유효성 검사를 추가로 해주기로 했다.

---

정규 표현식

• 특정한 규칙을 가진 문자열의 패턴을 표현식으로 텍스트에서 특정 문자열을 검색하거나 치환할때 사용한다

형식

• / 사이에는 패칭 시킬 패턴
• / 다음에는 옵션을 설정하는 플래그(플래그를 하나만 찾을지, 모두 다 찾을지)

대표적인 플래그
i : 대소문자 구분하지 않는다.
g : 문자열 내의 모든 패턴을 검색한다.
m : 문자열의 행이 바뀌더라도 검색은 계속한다.

사용법

• ^ : 패턴의 시작
• $ : 패턴의 종료
• a-zA-Z0-9 : 알파벳 대소문자+ 숫자
• . : 모든 문자열
• [문자] : 문자들 중에 하나여야 가능
• [^문자] : 피해야할 문자들의 집합
• | : 두 패턴 중 하나
• ? : 최대 한번
  • \d? : 숫자가 하나 있거나 없어야함
• '+' : 최소 1개
• '*' : 앞 패턴이 0개 이상이어야함
• {n} : n번 반복해서 나타나는 경우
• {n,m} : 최소 n번 최대 m번 반복해서 나타나는 경우
• \d : 숫자
• \w : 문자
• \s : 화이트 스페이스 (\t \n \r \f)
• . : 뉴라인(\n)을 제외한 모든 문자

이메일 정규 표현식 해석하기

/^[a-zA-Z0-9]([-_.]?[0-9a-zA-Z])*@[a-zA-Z0-9.-]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,4}$/i

• [a-zA-Z0-9._-] = 영어 대소문자, 숫자 , . , _ , -가 올 수 있다.
• ([-_.]?[0-9a-zA-Z])*
  • [-_.]? = - , _ , . 셋 중 하나의 문자가 최대 1개까지 올 수 있다.
  • [0-9a-zA-Z] : 숫자 영어 대소문자가 올 수 있다.
  • ([-_.]?[0-9a-zA-Z])* : 이러한 문자열이 여러번 있을 수도있고 없을 수도 있다.
• @[a-zA-Z0-9.-] = @가 앞에 붙는다.
• \.[a-zA-Z]{2,4} = 앞에 .이 있어야하고 뒤에 붙는 영어 문자열은 2개에서 4개까지 가능하다
• i : 대소문자 구별하지 않는다.