먼저, HTML 폼에 이메일 입력 필드를 추가합니다.

<input type="email" id="emailInput">
<button onclick="validateEmail()">검증</button>

위의 예시에서는 이메일 입력 필드와 버튼이 있습니다. 버튼을 클릭하면 ‘validateEmail’ 함수가 실행됩니다.

이제 자바스크립트에서 ‘this’ 키워드를 사용하여 이메일 검증 함수를 작성해보겠습니다.

function validateEmail() {
  var input = document.getElementById("emailInput");
  var email = input.value;

  var pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

  if (email.match(pattern)) {
    alert("올바른 이메일 주소입니다.");
  } else {
    alert("유효하지 않은 이메일 주소입니다.");
  }
}

위의 코드에서는 ‘this’ 키워드를 사용하지 않습니다. 대신, document.getElementById를 사용하여 이메일 입력 필드의 값을 가져옵니다. 그 후, 정규식 패턴을 사용하여 이메일 주소의 유효성을 검증합니다.

유효한 이메일 주소 형식인지 판단하기 위해 정규식 /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/를 사용합니다. 이 정규식은 이메일 주소의 형식을 검증하며, 영문 소문자, 대문자, 숫자, “.”, “_”, “-“ 문자가 허용되는 이메일 주소를 유효하다고 판단합니다.

만약 입력한 이메일 주소가 유효하다면 “올바른 이메일 주소입니다.”라는 알림창이 표시되고, 유효하지 않다면 “유효하지 않은 이메일 주소입니다.”라는 알림창이 표시됩니다.

이 외에도 다양한 방법으로 이메일 주소의 유효성을 검증할 수 있습니다. 위의 예시는 간단한 방법 중 하나일 뿐이며, 프로젝트의 요구사항에 맞게 유효성 검증 로직을 수정하실 수 있습니다.

#javascript #이메일유효성검증