HTML5 이메일 유효성 검사

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('');
        }
    });
})

---

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

David Gilbertson wrote about this years ago:

There are two questions we need to ask:

1. Did the user understand that they were supposed to type an email address into this field?
2. Did the user correctly type their email address into this field?

If you have a well laid-out form with a label that says “email”, and the user enters an ‘@’ symbol somewhere, then it’s safe to say they understood that they were supposed to be entering an email address. Easy.

Next, we want to do some validation to ascertain if they correctly entered their email address.

Not possible.

[...]

Any mistype will definitely result in an incorrect email address but only maybe result in an invalid email address.

[...]

There is no point in trying to work out if an email address is ‘valid’. A user is far more likely to enter a wrong and valid email address than they are to enter an invalid one.

In addition, some email addresses that may be syntactically or politically invalid, do work. For example, postmaster@ai does technically work even though TLDs should not have MX records. Also see discussion about email validation on the WHATWG mailing list (where HTML5 is designed in the first place).

---

A bit late for the party, but this regular expression helped me to validate email type input in the client side. Though, we should always do verification in server side also.

<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})(\]?)$">

You can find more regex of all kinds here.

---

It is very difficult to validate Email correctly simply using HTML5 attribute "pattern". If you do not use a "pattern" someone@ will be processed. which is NOT valid email.

Using pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" will require the format to be someone@email.com however if the sender has a format like someone@email.net.au (or similar) will not be validated to fix this you could put pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" this will validate ".com.au or .net.au or alike.

However using this, it will not permit someone@email.com to validate. So as far as simply using HTML5 to validate email addresses is still not totally with us. To Complete this you would use something like this:

<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>

or:

<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>

However, I do not know how to validate both or all versions of email addresses using HTML5 pattern attribute.

---

You can follow this pattern also

<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>

Ref : In W3Schools

---

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

<input type="email"/>

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

참고 URL : https://stackoverflow.com/questions/19605773/html5-email-validation