[javascript] 10. 문자 검사 '정규식'

문자검사

< input >에 입력한 값을 검사할 때 사용할 수 있는 방법

'문자'.includes('찾을 단어')
/정규식/.test('찾을 단어')

---

📢 문자 검사하는 가장 쉬운 방법 = includes( )

결과 값은 참이면 true, 거짓이면 false

 'abcd'.indcludes('a')

하지만 includes 만으로는 검사하기 어려운 것들이 존재

• 한글이 들어있냐

• 영어가 들어있냐

• A로 끝나냐

• 마침표 다음에 영어가 있냐

등등

➡️ 그럴 때 사용하는 것이 정규식이다

📢 정규식

문자를 검사할 수 있는 식

/abc/

이걸 활용하면 문자 검사가 쉬워진다
마찬가지로 결과 값은 참이면 true, 거짓이면 false

🤔 정규식 예제

기본 검사

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

범위를 지정해서 검사

/[a-d]/.test('aefg') //true
/[가-다]/.test('다라마바') //true
/[a-zA-Z]/.test('반가워요') //false
/[a-zA-Z]/.test('반가워요a') //true
/[ㄱ-ㅎ가-힣ㅏ-ㅣ]/.test('반가워요') //true

아무문자 검사

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

시작/끝 검사

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

연산자 검사

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

반복 검사

/a+/.test('aaaaa') //true
/\S+t/.test('bbaat') //true

📢 응용

이메일 정규식

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

. 마침표는 정규식에서 특수한 문법이기 때문에 마침표 문법을 쓰는게 아니라 진짜 마침표를 찾아달라라는 의미로 쓰려면 백슬래시를 앞에 붙여야 한다

✅ 폼 전송 시 이메일 형식 검사

만약 이메일 형식이 아니라면 alert 창 띄우기

  $('form').on('submit',function(e){
    let emailInput=$('#email').val();
    if(!(/\S+@\S+\.\S+/.test(emailInput))){
        alert('a');
        e.preventDefault();
    }  
    })

form 태그를 선택해서 이벤트 핸들러를 submit으로 해도 무관하다!
e.preventDefault(); 를 통해 형식에 맞지 않을 때 다음 창으로 넘어가는 것을 막는다

✅ 폼 전송 시 유저가 입력한 비번에 대문자가 1개 이상 있는지 검사

만약 있다면 alert 창 띄우기

    $('form').on('submit',function(e){
        let pwInput= $('#pw').val();
        if(/[A-Z]/.test(pwInput)){
            alert('대문자를 입력하지 마세요');
            e.preventDefault();
        }
    })