<input>에 입력한 값이 이메일 형식이 맞는지 검사하려면 어떻게 해야 할지 알아보자.
.includes()
문자열이나 배열에 특정 값이 포함되어 있는 확인하는데 사용되는 메서드.
1. 문자열에서의 .includes()
string.includes(substring, start);- substring : 찾고자 하는 부분 문자열.
- start(선택 사항) : 검색을 시작할 위치. 기본값은 0.
const sentence = "안녕하세요, 만나서 반갑습니다.";
// '안녕'라는 단어가 포함되어 있는지 확인
console.log(sentence.includes("안녕")); // true
// '헬로'라는 단어가 포함되어 있는지 확인
console.log(sentence.includes("헬로")); // false
// 인덱스 10부터 검색 (인덱스 10 이후로는 '안녕'가 없으므로 false)
console.log(sentence.includes("안녕", 10)); // false
2. 배열에서의 .includes()
array.includes(element, start);- element : 찾고자 하는 배열의 요소.
- start(선택 사항) : 검색을 시작할 위치. 기본값은 0.
const fruits = ["apple", "banana", "cherry"];
// 'banana'가 배열에 있는지 확인
console.log(fruits.includes("banana")); // true
// 'grape'가 배열에 있는지 확인
console.log(fruits.includes("grape")); // false
// 인덱스 2 이후에 'banana'가 있는지 확인 (인덱스 2 이후에는 없음)
console.log(fruits.includes("banana", 2)); // false
3. 특징
console.log("Hello".includes("hello")); // false
const numbers = [1, 2, NaN];
console.log(numbers.includes(NaN)); // true- 대소문자를 구분한다. "Hello"와 "hello"는 다른 문자열로 간주된다.
- 배열에서 NaN도 올바르게 인식한다.
이렇게 .includes()는 문자를 검사하는 가장 쉬운 방법니다.
하지만,
- 한글이 들어있냐,
- 영어가 들어있냐,
- A로 끝나냐,
- 마침표 다음에 영어가 있냐
이런 건 includes()만으로 검사하기 어렵다.
정규표현식(regular expression)
줄여서 정규식은 문자열에서 특정 패턴을 찾거나, 그 패턴에 따라 문자열을 처리할 때 사용하는 식이다.
정규식은 복잡한 문자열 탐색, 치환, 추출 등의 작업을 단순화해 준다.
"어떤 문자에 'abc'라는 단어가 들어가 있냐?"라고 물어보고 싶을 때 쓰면 된다.
자바스크립트로 정규식을 어떻게 표현하냐면
/abc/이러면 끝이다.
이제 abc라는 단어가 있냐고 물어볼 준비가 된 것이다.
그러면 abcded라는 문자에 abc라는 단어가 있는지 검사해보도록 하자.
/abc/.test('abcde')/정규식/.test(정규식으로 검사해 볼 문자)를 쓰면 된다.
진짜 들어있으면 true, 없으면 false를 남겨 준다.
정규식 문법
정규식 문법은 너무 많아서 필요할 때 찾아쓰면 된다.
자주 사용하는 몇 개만 알아보도록 하자.
/a/.test('abcde') //true
/가/.test('나다라') //false영어나 한글의 경우 그냥 쓰면 글자가 있는지 없는지 물어볼 수 있다.
/[a-d]/.test('aefg') //true
/[가-다]/.test('다라마바') //true[ ] 기호를 이용해서 문자 범위를 지정할 수 있다.
[a-z] : a부터 z까지 아무 문자 하나를 의미
/[a-d].test('aefg') : a부터 d까지의 아무 문자 하나가 저기 있냐고 검사하는 것.
/[a-zA-Z]/.test('반가워요') //false
/[a-zA-Z]/.test('반가워요a') //true
/[ㄱ-ㅎ가-힣ㅏ-ㅣ]/.test('반가워요') //true[a-zA-Z] : 아무 알파벳 하나를 의미
[ㄱ-ㅎ가-힣ㅏ-ㅣ] : 아무 한글 하나를 의미
/\S/.test('abcde') //true백슬래시S(\S)는 특수문자 포함 아무 문자 1개라는 의미이다.
^a/.test('abcde') //true
/e$/.test('abcde') //true^a : a로 시작하는지 검사할 수 있다.
e$ : e로 끝나는지 검사할 수 있다.
/(e|f)/.test('abcde') //true| 이건 or 기호이다.
위 코드는 e 또는 f 중 아무거나 한 문자가 있는지 검사 가능하다.
정규식에서는 괄후를 마음대로 칠 수 있다.
/a+/+ 기호를 붙이면 뒤에 오는 글자들도 a와 일치하면 반복해서 쭉 찾아달라는 뜻이다.
왜냐하면 /a/는 a를 다 찾으라는 게 아니라 a 1개를 찾으라는 뜻이다.
aaaaa 이런 걸 찾고 싶으면 /a+/를 쓰면 된다.
/\S+t/위 코드는 모든 문자 여러개 다음에 t라는 글자가 있냐를 검사해 주는 정규식이다.
aaaat, bbt 이런 것들을 찾아줄 것이다.
정규식 예시
1. 이메일 형식 검사
이메일은 어쩌구@어쩌구.어쩌구 이렇게 되어야 한다. 모든 문자 사이에 @ 그리고 .이라는 특수문자가 와야 한다.
/\S+@\S+\.\S+/\.라는 기호를 쓴 이유는 마침표는 정규식에서 특수한 문법이기 때문에 마침표 문법을 쓰는 게 아니라 진짜 마침표를 찾아 달라는 의미로 쓰려면 백슬래시를 앞에 붙여야 한다.
2. 전화번호 형식 검사
전화번호는 000-0000-0000 이렇게 되어야 한다. 모든 문자 사이에 -라는 특수문자가 와야 한다.
/\d{3}-\d{4}-\d{4}$/정규 표현식에서 { }는 반복을 나태는 구문이다.
\d는 숫자를 의미, \d{3}은 '숫자 3개'를, \d{4}는 '숫자 4개'를 의미한다.
그러면 폼 전송시 이메일 형식 검증은 어떻게 할까?
지난 포스팅에서 작성했던 <form> 태그를 가지고 왔다.
<div class="black-bg">
<div class="white-bg">
<h4>로그인하세요</h4>
<form action="success.html">
<div class="my-3">
<input type="text" class="form-control" id="email">
</div>
<div class="my-3">
<input type="password" class="form-control">
</div>
<button type="submit" class="btn btn-primary">전송</button>
<button type="button" class="btn btn-danger" id="close">닫기</button>
</form>
</div>
</div>
폼 전송시 아이디가 이메일 형식이 맞는지 검증하려면 이렇게 작성하면 된다.
$('form').on('submit',function(e){
var 입력한값 = document.getElementById('email').value;
if ( !/\S+@\S+\.\S+/.test(입력한값) ){
alert('이메일형식아님')
e.preventDefault();
}
});form 전송시 유저가 <input>에 입력한 걸 찾아서 정규식으로 이메일 테스트 했을 때 false가 나오면 폼 전송을 막고 alert()를 띄우라는 뜻이다.
그렇다면 폼 전송시 유저가 입력한 비밀번호에 영어 대문자가 적어도 1개 있는지 검사하려면?
$('form').on('submit',function(e){
var password = document.getElementById('password').value;
if ( /[A-Z]/.test(password) == false ){
alert('대문자없음')
}
});
* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.
