includes()와 split()이용해서 이메일인지 아닌지 확인하기(JQuery, JavaScript)

이메일을 제대로 입력했는지 아닌지 구별하기

- @가 들어가있으면 이메일 ok

- @가 없으면 '이메일이 아닙니다' alert띄우기

 

 

1. 먼저 <input>태그와 <button>태그로 테스트환경을 만든다.

<input id="isEmail" type="text" /> <button onclick="test()">클릭</button>

▲ input과 button 생성된 결과

 

2. <script>에 test()함수를 만들고 isEmail값을 가져온다.

let txt = $('#isEmail').val() 해석 : id가 isEmail인 것의 값을 txt에 저장한다.

 

즉, 내가 text박스에 '테스트'라고 입력하면 txt변수에 '테스트'가 저장된다는 뜻이다.

<script>
	function test() {
    		let txt = $('#isEmail').val()
  	} 
</script>

 

3. includes를 활용해서 '@'가 있는지 확인하기

test@gmail.com을 입력하면 gmail이 추출되도록 코드를 작성했다.

<script>
	function test() {
    		let txt = $('#isEmail').val()
            
            if(txt.includes('@')){
                alert(txt.split('@')[1].split('.')[0])
            }else{
                alert('이메일이 아닙니다.')
            }
  	} 
</script>

※ includes()는 문자열이 특정 문자열을 포함하는지 확인하는 메서드이다.

※ ()안에 값이 포함되면 true를 반환 / ()안에 값이 포함되지 않으면 false를 반환

 

 

<참고>

txt.includes('@') 해석 : txt에 @가 있으면 true반환 / @가 없으면 false반환

txt.split('@') 해석 : @를 기준으로 나눈다. 그러면 'test','gmail.com'으로 쪼개진다.

아래 사진처럼 골라낼 수 있다.

 

 

그러면 gmail.com을 '.'로 쪼개려면 어떻게 해야할까?

txt.split('@')[1]이 'gmail.com'인건 위에서 확인됐다. 그러면 'gmail.com'에서 '.'로 쪼개면 'gmail', 'com'으로 나타난다. 

'gmail'만 골라내고 싶으면 0번째를 뽑아내면 된다.