코딩/Spring 쇼핑몰 프로젝트

Spring [쇼핑몰프로젝트] - 이메일 형식 유효성 검사[16]

유미._. 2023. 4. 28. 15:55
728x90

 

 

오늘은 이메일 형식 유효성 검사에 대한 포스팅을 해보겠습니다 （*＾-＾*）

 

 

구현 순서

 

1. 오류 수정

2. span 태그 추가

3. 이메일 형식 검사 메서드

4. 메서드 적용

5. 테스트

 

 

1. 오류 수정

 

이메일 형식 유효성 검사를 시작하기 전, 지난 포스팅에서 진행했던 프로젝트에서 오류가 발생이 되어서 수정을 해주겠습니다.

 

가입하기 버튼을 눌렀을 때 데이터 베이스로 값이 전송 되지 않고 화면이 메인 페이지로 넘어가지 않았던 오류인데, 변수명 오타가 있었습니다.

idCheck변수를 idckCheck로 변경해 줍니다.

 

 

 

 

2. span 태그 추가

 

class명은 mail_input_box_warn으로 된 span 태그를 추가해 줍니다.

 

 

<span class="mail_input_box_warn"></span>

 

 

3. 이메일 형식 검사 메서드

 

이메일 형식 검사 메서드는 자바스크립트에서 제공하는 test 메서드를 사용합니다. 해당 메서드는 주어진 문자열이 정규 표현식을 만족하는지 판별해주고, 그여부를 true 혹은 false로 반환해줍니다. 

매개변수명이 email이고 이름이 mailFormCheck인 메서드를 작성해 줍니다.

메서드 내에 이메일 형식 검사를 해주는 정규 표현식으로 초기화 해줍니다. (외계어 같죠?🤔)

 

 

return 값으로 form.test(email)을 넣어줍니다.

매개변수 email이 form에 저장된 정규표현식에 부합할 경우 true를 반환하고 부합하지 않을 경우 false를 반환해 줍니다.

 

 

	/* 입력 이메일 형식 유효성 검사 */
	function mailFormCheck(email){
		var form = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
		return form.test(email);
	}

 

 

4. 메서드 적용

 

위에서 추가로 작성한 span 태그를 사용하기 편하도록 변수를 추가해 줍니다.

 

 

이메일 형식 유효성 검사에 대한 코드를 추가해 줍니다.

email 형식이 올바른 이메일 형식이면 이메일이 전송되었다는 문구와 mailFormCheck()가 true를 반환합니다. 

email 형식이 올버르지 않으면 올바르지 못한 이메일 형식이라는 문구와 함께 false를 반환하여 ajax가 실행이 되지 않고 이메일 전송 메서드를 벗어나게 됩니다.

 

 

 

		/* 이메일 형식 유효성 검사 */
		if(mailFormCheck(email)){
			warnMsg.html("이메일이 전송 되었습니다. 이메일을 확인해주세요!");
			warnMsg.css("display","inline-block");
		}else{
			warnMsg.html("올바르지 못한 이메일 형식입니다.");
			warnMsg.css("dislpay","inline-block");
			return false;
		}

 

 

5. 테스트

 

올바른 형식의 이메일 입력할 경우 ↓↓↓

 

 

올바르지 않은 이메일을 입력할 경우 ↓↓↓

 

 

 

 

 

 

 

 

이상입니다 ( •̀ ω •́ )y

 

 

 

 

 

 

 

 

 

 

 

참고 : Kim VamPa (tistory.com) 👍

728x90
반응형