Hướng dẫn which is the correct syntax for email validation in html 5? - cú pháp chính xác để xác thực email trong html 5 là gì?

Thử nó

Giá trị đầu vào được tự động xác thực để đảm bảo rằng nó trống hoặc địa chỉ email được định dạng đúng (hoặc danh sách địa chỉ) trước khi biểu mẫu có thể được gửi. Các lớp giả

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

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

Trên các trình duyệt không hỗ trợ đầu vào loại

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

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

Giá trị

Thuộc tính

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

1. Một chuỗi trống ("") chỉ ra rằng người dùng không nhập giá trị hoặc giá trị đã bị xóa.
2. Một địa chỉ e-mail được hình thành đúng cách. Điều này không nhất thiết có nghĩa là địa chỉ e-mail tồn tại, nhưng ít nhất nó được định dạng chính xác. Nói một cách đơn giản, điều này có nghĩa là
   3 hoặc
   4. Tất nhiên, có nhiều thứ hơn thế; Xem xác thực cho một biểu thức chính quy phù hợp với thuật toán xác thực địa chỉ e-mail.
3. Nếu và chỉ khi thuộc tính

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

   6 được chỉ định, giá trị có thể là danh sách các địa chỉ e-mail được phân tách bằng dấu phẩy được hình thành đúng. Bất kỳ dấu vết nào và khoảng trắng hàng đầu đều được xóa khỏi mỗi địa chỉ trong danh sách.

Xem Xác thực để biết chi tiết về cách địa chỉ e-mail được xác thực để đảm bảo rằng chúng được định dạng đúng.

Thuộc tính bổ sung

Ngoài các thuộc tính hoạt động trên tất cả các yếu tố

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

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

danh sách

Các giá trị của thuộc tính danh sách là

<input id="emailAddress" type="email" />

Maxlength

Số lượng ký tự tối đa (như đơn vị mã UTF-16) Người dùng có thể nhập vào đầu vào

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

<input id="emailAddress" type="email" />

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

<input id="emailAddress" type="email" />

Đầu vào sẽ không thành công xác thực ràng buộc nếu độ dài của giá trị văn bản của trường lớn hơn

<input id="emailAddress" type="email" />

Độ dài nhỏ nhất

Số lượng ký tự tối thiểu (như các đơn vị mã UTF-16) Người dùng có thể nhập vào đầu vào

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

<input id="emailAddress" type="email" />

<input id="emailAddress" type="email" />

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

Đầu vào sẽ không thành công xác thực ràng buộc nếu độ dài của văn bản nhập vào trường ít hơn

<input id="emailAddress" type="email" />

nhiều

Một thuộc tính Boolean, nếu có, chỉ ra rằng người dùng có thể nhập danh sách nhiều địa chỉ e-mail, được phân tách bằng dấu phẩy và, tùy chọn, các ký tự khoảng trắng. Xem cho phép nhiều địa chỉ e-mail cho một ví dụ hoặc thuộc tính HTML: Nhiều chi tiết để biết thêm chi tiết.

Lưu ý: Thông thường, nếu bạn chỉ định thuộc tính

<input id="emailAddress" type="email" multiple />

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

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

<input id="emailAddress" type="email" multiple />

<input id="emailAddress" type="email" multiple />

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

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

<input id="emailAddress" type="email" multiple />

họa tiết

Thuộc tính

<input id="emailAddress" type="email" multiple />

<input id="emailAddress" type="email" multiple />

<input id="emailAddress" type="email" multiple />

Nếu mẫu được chỉ định không được chỉ định hoặc không hợp lệ, không có biểu thức chính quy nào được áp dụng và thuộc tính này bị bỏ qua hoàn toàn.

Lưu ý: Sử dụng thuộc tính

<input type="email" placeholder="" />

<input type="email" placeholder="" />

Xem phần Xác thực mẫu để biết chi tiết và một ví dụ.

1

Thuộc tính

<input type="email" placeholder="" />

Nếu nội dung của điều khiển có một hướng (LTR hoặc RTL) nhưng cần trình bày trình giữ chỗ theo hướng ngược lại, bạn có thể sử dụng các ký tự định dạng thuật toán nhị phân Unicode để ghi đè tính định hướng trong trình giữ chỗ; Xem cách sử dụng các điều khiển Unicode cho văn bản BIDI để biết thêm thông tin.

Lưu ý: Tránh sử dụng thuộc tính

<input type="email" placeholder="" />

<input type="email" placeholder="" />

4

Một thuộc tính Boolean, nếu có, có nghĩa là trường này không thể được chỉnh sửa bởi người dùng. Tuy nhiên,

<input type="email" placeholder="" />

Lưu ý: Vì trường chỉ đọc không thể có giá trị,

<input id="emailAddress" type="email" multiple />

<input type="email" placeholder="" />

<input id="emailAddress" type="email" multiple />

<input type="email" placeholder="" />

0

Thuộc tính

<input type="email" size="15" />

<input type="email" size="15" />

Điều này không đặt giới hạn về số lượng ký tự người dùng có thể nhập vào trường. Nó chỉ chỉ định xấp xỉ số lượng có thể được nhìn thấy tại một thời điểm. Để đặt giới hạn trên về độ dài của dữ liệu đầu vào, hãy sử dụng thuộc tính

<input id="emailAddress" type="email" />

Sử dụng đầu vào email

Địa chỉ e-mail là một trong những biểu mẫu dữ liệu văn bản được phát hành thường xuyên nhất trên web; Chúng được sử dụng khi đăng nhập vào các trang web, khi yêu cầu thông tin, để cho phép xác nhận đặt hàng, cho webmail, v.v. Do đó, loại đầu vào

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

<input id="emailAddress" type="email" />

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

Tuy nhiên, điều quan trọng cần lưu ý là điều này không đủ để đảm bảo rằng văn bản được chỉ định là địa chỉ e-mail thực sự tồn tại, tương ứng với người dùng của trang web hoặc được chấp nhận theo bất kỳ cách nào khác. Nó đảm bảo rằng giá trị của trường được định dạng đúng là địa chỉ e-mail.

Lưu ý: Điều quan trọng là phải nhớ rằng người dùng có thể sửa đổi HTML của bạn đằng sau hậu trường, vì vậy trang web của bạn không được sử dụng xác thực này cho bất kỳ mục đích bảo mật nào. Bạn phải xác minh địa chỉ e-mail ở phía máy chủ của bất kỳ giao dịch nào trong đó văn bản được cung cấp có thể có bất kỳ ý nghĩa bảo mật nào của bất kỳ loại nào. It's also crucial to remember that a user can tinker with your HTML behind the scenes, so your site must not use this validation for any security purposes. You must verify the e-mail address on the server side of any transaction in which the provided text may have any security implications of any kind.

Một đầu vào email đơn giản

Hiện tại, tất cả các trình duyệt thực hiện phần tử này thực hiện nó như một trường đầu vào văn bản tiêu chuẩn với các tính năng xác thực cơ bản. Tuy nhiên, đặc điểm kỹ thuật cho phép trình duyệt vĩ độ về điều này. Ví dụ: phần tử có thể được tích hợp với sổ địa chỉ tích hợp của thiết bị của người dùng để cho phép chọn địa chỉ e-mail từ danh sách đó. Ở dạng cơ bản nhất, đầu vào

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

<input id="emailAddress" type="email" />

Lưu ý rằng nó được coi là hợp lệ khi trống và khi một địa chỉ email được định dạng hợp lệ được nhập, nhưng nếu không thì không được coi là hợp lệ. Bằng cách thêm thuộc tính

<input id="emailAddress" type="email" multiple />

Cho phép nhiều địa chỉ e-mail

Bằng cách thêm thuộc tính boolean

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

<input id="emailAddress" type="email" multiple />

Đầu vào hiện được coi là hợp lệ khi một địa chỉ e-mail duy nhất được nhập hoặc khi bất kỳ số lượng địa chỉ e-mail nào được phân tách bằng dấu phẩy và, tùy chọn, một số ký tự khoảng trắng có mặt.

Lưu ý: Khi

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

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

Một số ví dụ về các chuỗi hợp lệ khi

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

• <input type="email" size="32" minlength="3" maxlength="64" />
  

  2

• <input type="email" size="32" minlength="3" maxlength="64" />
  

  3

• <input type="email" size="32" minlength="3" maxlength="64" />
  

  2

• <input type="email" size="32" minlength="3" maxlength="64" />
  

  5

• <input type="email" size="32" minlength="3" maxlength="64" />
  

  6

• <input type="email" size="32" minlength="3" maxlength="64" />
  

  7

Một số ví dụ về các chuỗi không hợp lệ:

• <input type="email" size="32" minlength="3" maxlength="64" />
  

  5

• <input type="email" size="32" minlength="3" maxlength="64" />
  

  9

• <input type="email" value="" />
  

  0

Người giữ chỗ

Đôi khi, thật hữu ích khi cung cấp một gợi ý trong bối cảnh về những gì hình thành dữ liệu đầu vào nên lấy. Điều này có thể đặc biệt quan trọng nếu thiết kế trang không cung cấp nhãn mô tả cho mỗi

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

Ở đây, chúng tôi có đầu vào

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

<input type="email" placeholder="" />

Kiểm soát kích thước đầu vào

Bạn có thể kiểm soát không chỉ độ dài vật lý của hộp đầu vào, mà cả độ dài tối thiểu và tối đa cho phép cho chính văn bản đầu vào.

Kích thước phần tử đầu vào vật lý

Kích thước vật lý của hộp đầu vào có thể được kiểm soát bằng thuộc tính

<input type="email" size="15" />

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

<input type="email" size="15" />

Độ dài giá trị phần tử

<input type="email" size="15" />

<input id="emailAddress" type="email" />

<input id="emailAddress" type="email" />

Ví dụ dưới đây tạo ra một hộp nhập địa chỉ e-mail rộng 32 ký tự, yêu cầu nội dung không ngắn hơn 3 ký tự và không quá 64 ký tự.

<input type="email" size="32" minlength="3" maxlength="64" />

Cung cấp các tùy chọn mặc định

Cung cấp một mặc định bằng cách sử dụng thuộc tính giá trị

Như mọi khi, bạn có thể cung cấp giá trị mặc định cho hộp nhập

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

<input type="email" value="" />

Cung cấp các giá trị đề xuất

Đưa nó thêm một bước nữa, bạn có thể cung cấp một danh sách các tùy chọn mặc định mà người dùng có thể chọn bằng cách chỉ định thuộc tính

<input type="email" size="40" list="defaultEmails" />

<datalist id="defaultEmails">
  <option value="">option>
  <option value="">option>
  <option value="">option>
  <option value="">option>
  <option value="">option>
datalist>

<input type="email" size="40" list="defaultEmails" />

<datalist id="defaultEmails">
  <option value="">option>
  <option value="">option>
  <option value="">option>
  <option value="">option>
  <option value="">option>
datalist>

<input type="email" size="40" list="defaultEmails" />

<datalist id="defaultEmails">
  <option value="">option>
  <option value="">option>
  <option value="">option>
  <option value="">option>
  <option value="">option>
datalist>

<input type="email" size="40" list="defaultEmails" />

<datalist id="defaultEmails">
  <option value="">option>
  <option value="">option>
  <option value="">option>
  <option value="">option>
  <option value="">option>
datalist>

<input type="email" size="40" list="defaultEmails" />

<datalist id="defaultEmails">
  <option value="">option>
  <option value="">option>
  <option value="">option>
  <option value="">option>
  <option value="">option>
datalist>

Với phần tử

Thẩm định

Có hai cấp độ xác thực nội dung có sẵn cho các đầu vào

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

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

CẢNH BÁO: Xác thực biểu mẫu HTML không phải là một sự thay thế cho các tập lệnh đảm bảo rằng dữ liệu đã nhập ở định dạng thích hợp. Thật dễ dàng để ai đó điều chỉnh HTML cho phép họ bỏ qua xác thực hoặc xóa hoàn toàn. Ai đó cũng có thể bỏ qua hoàn toàn HTML của bạn và gửi dữ liệu trực tiếp đến máy chủ của bạn. Nếu mã phía máy chủ của bạn không xác thực dữ liệu mà nó nhận được, thảm họa có thể tấn công khi dữ liệu được định dạng không đúng (hoặc dữ liệu quá lớn, là loại sai, và vv) được nhập vào cơ sở dữ liệu của bạn. HTML form validation is not a substitute for scripts that ensure that the entered data is in the proper format.It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it completely. It's also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.

Xác nhận cơ bản

Các trình duyệt hỗ trợ loại đầu vào

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

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

Để tìm hiểu thêm về cách thức xác thực biểu mẫu hoạt động và cách tận dụng các thuộc tính

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

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

Lưu ý: Có các vấn đề đặc điểm kỹ thuật đã biết liên quan đến tên miền quốc tế và xác thực các địa chỉ e-mail trong HTML. Xem W3C Bug 15489 để biết chi tiết. There are known specification issues related to international domain names and the validation of e-mail addresses in HTML. See W3C bug 15489 for details.

Xác thực mẫu

Nếu bạn cần địa chỉ e-mail đã nhập để bị hạn chế hơn là "bất kỳ chuỗi nào trông giống như địa chỉ e-mail", bạn có thể sử dụng thuộc tính

<input id="emailAddress" type="email" multiple />

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

Ví dụ: giả sử bạn đang xây dựng một trang cho các nhân viên của Best Startup Ever, Inc., điều này sẽ cho phép họ liên hệ với bộ phận CNTT của họ để được giúp đỡ. Trong mẫu đơn giản hóa của chúng tôi, người dùng cần nhập địa chỉ e-mail của họ và một thông báo mô tả vấn đề họ cần giúp đỡ. Chúng tôi muốn đảm bảo rằng người dùng không chỉ cung cấp địa chỉ e-mail hợp lệ mà còn cho các mục đích bảo mật, chúng tôi yêu cầu địa chỉ là địa chỉ email của công ty nội bộ.

Vì các đầu vào của loại

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

<input id="emailAddress" type="email" multiple />

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

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

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

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

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

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

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

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

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

Chúng ta hãy xem xét kỹ hơn về hộp nhập địa chỉ e-mail. Các thuộc tính

<input type="email" size="15" />

<input id="emailAddress" type="email" />

<input id="emailAddress" type="email" multiple />

Một

<input type="email" placeholder="" />

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

Nếu chúng ta để lại mọi thứ, ít nhất chúng ta sẽ xác nhận trên các địa chỉ e-mail hợp pháp. Nhưng chúng tôi muốn đi một bước xa hơn: chúng tôi muốn đảm bảo rằng địa chỉ e-mail trên thực tế là ở dạng "". Đây là nơi chúng tôi sẽ sử dụng

<input id="emailAddress" type="email" multiple />

<input id="emailAddress" type="email" multiple />

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

Lưu ý rằng điều này thậm chí không gần với bộ lọc đầy đủ cho các địa chỉ e-mail hợp lệ; Nó sẽ cho phép những thứ như "@BestStartupever.com" (lưu ý không gian hàng đầu) hoặc "@@ beststartupever.com", không có gì hợp lệ. Tuy nhiên, trình duyệt chạy cả bộ lọc địa chỉ e-mail tiêu chuẩn và mẫu tùy chỉnh của chúng tôi so với văn bản được chỉ định. Do đó, chúng tôi kết thúc với một xác nhận nói rằng "đảm bảo điều này giống như một địa chỉ e-mail hợp lệ và nếu có, hãy chắc chắn rằng đó cũng là địa chỉ BestStartupever.com."

Nên sử dụng thuộc tính

<input type="email" placeholder="" />

<input id="emailAddress" type="email" multiple />

<input type="email" placeholder="" />

<input type="email" placeholder="" />

<input type="email" placeholder="" />

<input type="email" placeholder="" />

Đó là lý do tại sao, thay vào đó, chúng tôi chỉ định chuỗi "Vui lòng chỉ cung cấp một địa chỉ e-mail công ty tốt nhất từ ​​trước đến nay" bằng cách đó, thông báo lỗi đầy đủ có thể giống như "văn bản đã nhập không khớp với mẫu yêu cầu. Chỉ có một công ty khởi nghiệp tốt nhất từ ​​trước đến nay địa chỉ e-mail của công ty. "

Lưu ý: Nếu bạn gặp rắc rối trong khi viết các biểu thức chính quy xác thực của mình và chúng không hoạt động đúng, hãy kiểm tra bảng điều khiển của trình duyệt; Có thể có thông báo lỗi hữu ích ở đó để hỗ trợ bạn giải quyết vấn đề. If you run into trouble while writing your validation regular expressions and they're not working properly, check your browser's console; there may be helpful error messages there to aid you in solving the problem.

Ví dụ

Ở đây chúng tôi có một đầu vào email với ID

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

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

<input type="email" size="40" list="defaultEmails" />

<datalist id="defaultEmails">
  <option value="">option>
  <option value="">option>
  <option value="">option>
  <option value="">option>
  <option value="">option>
datalist>

<input type="email" size="40" list="defaultEmails" />

<datalist id="defaultEmails">
  <option value="">option>
  <option value="">option>
  <option value="">option>
  <option value="">option>
  <option value="">option>
datalist>

Như một liên lạc bổ sung, phần tử

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

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

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

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

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

Xem thêm