HTML5 이메일 유효성 검사

"HTML5를 사용하면 사용자의 입력이 유효한 이메일 또는 URL 주소인지 확인하기 위해 더 이상 js 또는 서버 측 코드가 필요하지 않습니다."

사용자가 입력 한 후 이메일을 확인하려면 어떻게해야합니까? 사용자가 잘못된 형식의 이메일 주소를 입력 한 경우 JS없이 메시지를 표시하는 방법.

<input type="email" pattern="[^ @]*@[^ @]*" placeholder="Enter your email">
<input type="submit" value="Submit">

HTML5에서는 다음과 같이 할 수 있습니다.

<form>
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>

사용자가 제출을 누르면 다음과 같은 오류 메시지가 자동으로 표시됩니다.

www.w3.org 사이트 의 input type=email페이지 는 이메일 주소가 다음 정규식과 일치하는 문자열임을 나타냅니다.

/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

required속성과 pattern속성을 사용하여 정규식 패턴과 일치하는 값을 요구합니다.

<input
    type="text"
    pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
    required
>

사용 [a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}을 위해 somemail@email.com/somemail@email.com.vn

document.getElementById("email").validity.valid

필드가 비어 있거나 유효하면 참인 것 같습니다. 여기에는 다른 흥미로운 플래그도 있습니다.

Chrome에서 테스트되었습니다.

다음은 모든 양식 이메일 입력에 사용하는 예입니다. 이 예제는 ASP.NET이지만 다음에 적용됩니다.

<asp:TextBox runat="server" class="form-control" placeholder="Contact's email" 
    name="contact_email" ID="contact_email" title="Contact's email (format: xxx@xxx.xxx)" 
    type="email" TextMode="Email" validate="required:true"
    pattern="[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*" >
</asp:TextBox>

HTML5는 필요하지 않은 경우에도 패턴을 사용하여 유효성을 검사합니다. 오 탐지 인 것을 아직 찾지 못했습니다.

이것은 다음 HTML로 렌더링됩니다.

<input class="form-control" placeholder="Contact's email" 
    name="contact_email" id="contact_email" type="email" 
    title="Contact's email (format: xxx@xxx.xxx)" 
    pattern="[a-zA-Z0-9!#$%&amp;'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*">

나는 당신이 Javascript 솔루션을 따르지 않는다는 것을 알고 있지만 내 경험으로 볼 때 JS를 사용해야 만 수행 할 수있는 맞춤형 유효성 검사 메시지와 같은 것들이 있습니다.

또한 JS를 사용하면 모든 단일 입력 필드를 수정하는 대신 사이트 내 이메일 유형의 모든 입력 필드에 유효성 검사를 동적으로 추가 할 수 있습니다.

var validations ={
    email: [/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/, 'Please enter a valid email address']
};
$(document).ready(function(){
    // Check all the input fields of type email. This function will handle all the email addresses validations
    $("input[type=email]").change( function(){
        // Set the regular expression to validate the email 
        validation = new RegExp(validations['email'][0]);
        // validate the email value against the regular expression
        if (!validation.test(this.value)){
            // If the validation fails then we show the custom error message
            this.setCustomValidity(validations['email'][1]);
            return false;
        } else {
            // This is really important. If the validation is successful you need to reset the custom error message
            this.setCustomValidity('');
        }
    });
})

파티에는 조금 늦었지만이 정규식은 클라이언트 측에서 이메일 유형 입력을 검증하는 데 도움이되었습니다. 하지만 우리는 항상 서버 측에서도 확인해야합니다.

<input type="email" pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$">

여기 에서 모든 종류의 더 많은 정규식을 찾을 수 있습니다 .

요점 : 유일한 100 % 올바른 방법은 입력 한 이메일 주소에서 @ -sign을 확인한 다음 지정된 이메일 주소에 유효성 검사 메시지를 게시하는 것입니다. 이메일 메시지의 유효성 검사 지침을 따를 수 있다면 입력 한 이메일 주소가 올바른 것입니다.

긴 대답 :

David Gilbertson은 몇 년 전에 다음과 같이 썼습니다 .

두 가지 질문이 필요합니다.

1. 사용자 가 이메일 주소를 입력해야한다는 것을 이해 했습니까? 가이 필드에 ?
2. 사용자 가이 필드에 자신의 이메일 주소 를 올바르게 입력 했습니까 ?

"이메일"이라는 레이블이있는 잘 배치 된 양식이 있고 사용자가 어딘가에 '@'기호를 입력하는 경우 이메일 주소를 입력해야한다고 이해했다고 말하는 것이 안전합니다. 쉬운.

다음으로 이메일 주소를 올바르게 입력했는지 확인하기 위해 몇 가지 유효성 검사를 수행하려고합니다.

불가능합니다.

[...]

모든 잘못 입력이됩니다 확실히 결과 잘못된 이메일 주소,하지만 어쩌면 결과 무효 이메일 주소입니다.

[...]

이메일 주소가 '유효'한지 알아 내려고 할 필요가 없습니다. 사용자가 입력 훨씬 더 가능성이 잘못된 유효한 그들이 입력하는 것보다 이메일 주소를 유효 하나 .

즉, 모든 종류의 문자열 기반 유효성 검사는 구문이 유효하지 않은 경우에만 확인할 수 있다는 점에 유의해야합니다. 사용자가 실제로 이메일을 볼 수 있는지 여부를 확인할 수 없습니다 (예 : 사용자가 이미 자격 증명을 잃어 버렸거나 다른 사람의 주소를 입력했거나 주어진 사용 사례에 대해 개인 이메일 주소 대신 업무용 이메일을 입력했기 때문). 실제로 " 이 이메일이 구문 상 유효 합니까 "대신 " 주어진 이메일 주소를 사용하여 사용자와 통신 할 수 있습니까" 라는 질문이 얼마나 자주 발생 합니까? 문자열의 유효성을 "포함합니까"이상으로 확인 @하면 이전 질문에 답하려고합니다! 개인적으로 저는 항상 후자의 질문에만 관심이 있습니다.

또한 구문 상 또는 정치적으로 유효하지 않은 일부 이메일 주소도 작동합니다. 예를 들어 postmaster@aiTLD에 MX ​​레코드가 없어도 기술적으로 작동합니까 ? 또한 WHATWG 메일 링리스트 (HTML5가 처음 디자인 된 곳)에서 이메일 유효성 검사에 대한 토론을 참조하십시오 .

HTML 5를 사용하여 입력 이메일을 다음과 같이 만드십시오.

<input type="email"/>

사용자가 입력 상자 위로 마우스를 가져 가면 유효한 이메일을 입력하도록 지시하는 도구 설명이 표시됩니다. 그러나 Bootstrap 양식에는 사용자에게 이메일 주소를 입력하도록 알리는 훨씬 더 나은 도구 설명 메시지가 있으며 입력 한 값이 유효한 이메일과 일치하지 않는 순간 팝업됩니다.

이 패턴을 따를 수도 있습니다.

<form action="/action_page.php">
  E-mail: <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <input type="submit">
</form>

참고 : W3Schools에서

MDN에 따르면 이 RegExp는 사양을 충족하는 이메일이 일치해야하므로 이메일의 유효성을 검사하는 것이 좋습니다.

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}
  [a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

단순히 HTML5 속성 "pattern"을 사용하여 이메일을 올바르게 검증하는 것은 매우 어렵습니다. "패턴"을 사용하지 않으면 someone @ 처리됩니다. 유효한 이메일이 아닙니다.

를 사용 pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"하려면 형식이 필요 someone@email.com하지만 보낸 사람이 다음과 같은 형식 someone@email.net.au(또는 유사한 형식)을 가지고있는 경우 이를 수정하기 위해 유효성을 검사하지 않습니다.pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" ".com.au 또는 .net.au 또는 유사하게 유효성 검사를 수행 있습니다.

그러나 이것을 사용하면 someone@email.com이 유효성을 검사 할 수 없습니다. 단순히 HTML5를 사용하여 이메일 주소를 확인하는 한 여전히 우리와 함께하는 것은 아닙니다. 이를 완료하려면 다음과 같이 사용합니다.

<form>
<input id="email" type="text" name="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">
</form>

또는:

<form>
<input id="email" type="text" name="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">
</form>

그러나 HTML5 패턴 속성을 사용하여 이메일 주소의 두 버전 또는 모든 버전의 유효성을 검사하는 방법을 모릅니다.