HTML 이메일 확인

오늘 포스트에서는 HTML에서 이메일 유효성 검사를 수행하는 방법에 대해 알아봅니다.

HTML의 이메일 유효성 검사

이메일 주소가 도달 가능하고 유효한지 확인하기 위해 이메일 주소를 확인하는 프로세스를 이메일 유효성 검사라고 합니다. 순진한 실수든 의도적인 속임수든 오타를 빠르게 찾아내는 짧은 프로세스를 실행합니다.

고품질 데이터 획득을 보장하는 가장 효율적인 방법은 여전히 이메일 검증입니다. 하드 바운스는 일반적으로 사용자가 이메일 주소를 닫거나, 가짜 이메일 주소이거나, 두 가지 모두로 인해 발생합니다.

모범 사례에 따르면 전송된 이메일 5,000개당 스팸 불만 신고가 5개 이상 접수되지 않아야 합니다.

사용자는 email 유형의 <input> 요소를 사용하여 이메일 주소를 입력하고 수정할 수 있습니다. 양식을 제출하기 전에 입력 값이 비어 있는지 또는 올바른 형식의 이메일 주소인지 확인하기 위해 입력 값이 자동으로 확인됩니다.

<input> 요소의 값 속성에는 이메일 구문을 준수하는 것으로 자동으로 확인되는 문자열이 포함됩니다.

입력 값이 제약 조건 유효성 검사를 통과하기 위해 제공되는 경우 pattern 특성은 입력 값이 일치해야 하는 정규식입니다.

이메일 확인 패턴은 다음과 같습니다.

^[a-z0-9!#$%&‘*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?

이전 개념을 더 잘 이해하려면 다음 예제를 고려하십시오.

<form id="emailForm">
<input
    type="email"
    required
    placeholder="email1"
>
<input type="text" required name="email1"
    pattern="^[a-z0-9!#$%&‘*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?">

<button type="submit">save</button>
</form>

const form = document.getElementById('emailForm');
function handleForm(event) {
  event.preventDefault();
  console.log('Form submitted')
}
form.addEventListener('submit', handleForm);

마지막 예에서 우리는 두 개의 입력 요소를 정의했습니다. 그 중 첫 번째 요소는 이메일 유형이며 이메일 유효성 검사를 독립적으로 수행합니다.

텍스트 데이터 유형의 두 번째 입력 요소에 유효한 이메일 ID 패턴이 제공되었습니다. 이메일 주소가 정확하지 않으면 양식을 제출할 수 없으며 오류 알림이 표시됩니다.

HTML과 호환되는 모든 브라우저에서 위의 코드 줄을 실행합니다. 다음과 같은 결과가 표시됩니다.