Xác thực Email HTML5

Người ta nói rằng "Với HTML5, chúng tôi không cần thêm js hoặc mã phía máy chủ để kiểm tra xem đầu vào của người dùng có phải là địa chỉ email hoặc url hợp lệ hay không"

Làm cách nào để xác thực email sau khi người dùng nhập? và không có JS làm thế nào để hiển thị thông báo nếu người dùng nhập sai mẫu địa chỉ email của họ.

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

Trong HTML5, bạn có thể làm như sau:

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

Và khi người dùng nhấn gửi, nó sẽ tự động hiển thị một thông báo lỗi như:

Các input type=emailtrang của www.w3.org ghi chú trang web đó một địa chỉ email bất kỳ chuỗi mà phù hợp với biểu thức chính quy sau:

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

Sử dụng requiredthuộc tính và patternthuộc tính để yêu cầu giá trị khớp với mẫu regex.

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

Sử dụng [a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}cho somemail@email.com/somemail@email.com.vn

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

dường như đúng khi trường trống hoặc hợp lệ. Điều này cũng có một số cờ thú vị khác:

Đã thử nghiệm trong Chrome.

Đây là ví dụ tôi sử dụng cho tất cả các đầu vào email biểu mẫu của tôi. Ví dụ này là ASP.NET, nhưng áp dụng cho bất kỳ:

<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 vẫn xác thực bằng cách sử dụng mẫu khi không được yêu cầu. Chưa tìm thấy cái nào là dương tính giả.

Điều này hiển thị dưới dạng HTML sau:

<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-]+)*">

Tôi biết bạn không theo đuổi giải pháp Javascript tuy nhiên có một số thứ như thông báo xác thực tùy chỉnh mà theo kinh nghiệm của tôi, chỉ có thể được thực hiện bằng cách sử dụng JS.

Ngoài ra, bằng cách sử dụng JS, bạn có thể thêm động xác thực vào tất cả các trường đầu vào của loại email trong trang web của bạn thay vì phải sửa đổi từng trường đầu vào.

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

Hơi muộn đối với bữa tiệc, nhưng biểu thức chính quy này đã giúp tôi xác thực đầu vào loại email ở phía máy khách. Mặc dù vậy, chúng tôi cũng nên thực hiện xác minh ở phía máy chủ.

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

Bạn có thể tìm thêm regex các loại ở đây .

TL; DR: Phương pháp duy nhất đúng 100% là kiểm tra @ -sign ở đâu đó trong địa chỉ email đã nhập và sau đó đăng thông báo xác thực đến địa chỉ email đã cho. Nếu họ có thể làm theo hướng dẫn xác thực trong email thì địa chỉ email đã nhập là chính xác.

Câu trả lời dài:

David Gilbertson đã viết về điều này nhiều năm trước:

Có hai câu hỏi chúng ta cần hỏi:

1. Người dùng có hiểu rằng họ phải nhập địa chỉ email vào trường này không?
2. Người dùng có nhập đúng địa chỉ email của họ vào trường này không?

Nếu bạn có một biểu mẫu được bố trí tốt với nhãn có nội dung “email” và người dùng nhập ký hiệu '@' ở đâu đó, thì có thể an toàn khi nói rằng họ hiểu rằng họ được cho là đang nhập địa chỉ email. Dễ dàng.

Tiếp theo, chúng tôi muốn thực hiện một số xác thực để xác định xem họ đã nhập chính xác địa chỉ email của mình hay chưa.

Không thể.

[...]

Bất kỳ loại sai nào chắc chắn sẽ dẫn đến một địa chỉ email không chính xác , nhưng chỉ có thể dẫn đến một địa chỉ email không hợp lệ .

[...]

Sẽ chẳng ích gì nếu bạn cố gắng tìm ra địa chỉ email là 'hợp lệ'. Người dùng có nhiều khả năng nhập sai địa chỉ email hợp lệ hơn là nhập địa chỉ không hợp lệ .

Nói cách khác, điều quan trọng cần lưu ý là bất kỳ loại xác thực dựa trên chuỗi nào cũng chỉ có thể kiểm tra xem cú pháp có không hợp lệ hay không. Nó không thể kiểm tra xem người dùng có thể thực sự thấy email hay không (ví dụ: vì người dùng đã mất thông tin đăng nhập, địa chỉ đã nhập của người khác hoặc đã nhập email công việc thay vì địa chỉ email cá nhân cho một trường hợp sử dụng nhất định). Tần suất câu hỏi bạn thực sự đang theo đuổi là " cú pháp email này có hợp lệ không " thay vì " tôi có thể giao tiếp với người dùng bằng địa chỉ email đã cho " không? Nếu bạn xác thực chuỗi nhiều hơn "nó chứa @", bạn đang cố trả lời câu hỏi trước đây! Cá nhân tôi luôn chỉ quan tâm đến câu hỏi sau.

Ngoài ra, một số địa chỉ email có thể không hợp lệ về mặt cú pháp hoặc chính trị, vẫn hoạt động. Ví dụ: postmaster@aivề mặt kỹ thuật có hoạt động hay không mặc dù TLD không nên có bản ghi MX . Cũng thấy thảo luận về xác thực email trên danh sách gửi thư WHATWG (nơi HTML5 được thiết kế ngay từ đầu).

Sử dụng HTML 5, chỉ cần tạo email đầu vào như:

<input type="email"/>

Khi người dùng di chuột qua ô nhập liệu, họ sẽ thấy một chú giải công cụ hướng dẫn họ nhập một email hợp lệ. Tuy nhiên, các biểu mẫu Bootstrap có thông báo Chú giải công cụ tốt hơn nhiều để yêu cầu người dùng nhập địa chỉ email và nó sẽ bật lên ngay khi giá trị được nhập không khớp với một email hợp lệ.

Bạn cũng có thể làm theo mẫu này

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

Tham khảo: Trong W3Schools

Theo MDN , RegExp này có thể xác thực email, vì email đáp ứng các thông số kỹ thuật phải khớp với nó.

/^[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])?)*$/

Rất khó để xác thực Email một cách chính xác chỉ bằng cách sử dụng thuộc tính HTML5 "mẫu". Nếu bạn không sử dụng "mẫu" thì ai đó @ sẽ được xử lý. đó KHÔNG phải là email hợp lệ.

Việc sử dụng pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"sẽ yêu cầu định dạngsomeone@email.com tuy nhiên nếu người gửi có định dạng như someone@email.net.au(hoặc tương tự) sẽ không được xác thực để khắc phục điều này mà bạn có thể đặtpattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" điều này sẽ xác thực ".com.au hoặc .net.au hoặc tương tự.

Tuy nhiên, sử dụng điều này, nó sẽ không cho phép ai đó@email.com xác nhận. Cho đến nay, việc sử dụng HTML5 để xác thực địa chỉ email vẫn chưa hoàn toàn phù hợp với chúng tôi. Để hoàn thành điều này, bạn sẽ sử dụng một cái gì đó như sau:

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

hoặc là:

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

Tuy nhiên, tôi không biết cách xác thực cả hai hoặc tất cả các phiên bản của địa chỉ email bằng thuộc tính mẫu HTML5.