Mengapa validasi formulir HTML5 mengizinkan email tanpa titik?

Saya sedang menulis mock-up yang sangat sederhana untuk mendemonstrasikan beberapa validasi formulir HTML5. Namun, saya perhatikan validasi email tidak memeriksa titik di alamat, juga tidak memeriksa karakter yang mengikuti titik tersebut.

Dengan kata lain, "john @ doe" dianggap valid, jika jelas bukan alamat email yang valid; "doe" bukan domain.

Beginilah cara saya mengkodekan bidang email saya:

<input type="email" required />

Apa itu belum cukup?

Periksa biola ini untuk melihat apa yang saya maksud.

Catatan: Saya tahu cara melakukannya melalui pola RegEx. Saya hanya ingin tahu bagaimana seseorang bisa lolos dengan menggunakan jenis email sebagai gantinya.

Karena a @ b adalah alamat email yang valid (misalnya localhost adalah domain yang valid). Lihat http://en.wikipedia.org/wiki/Email_address#Examples

Juga, perlu diingat bahwa Anda harus selalu melakukan validasi input di server. Validasi sisi klien seharusnya hanya untuk memberikan umpan balik kepada pengguna dan tidak dapat diandalkan, karena dapat dengan mudah dilewati.

Anda secara teoritis dapat memiliki alamat tanpa "." di.

Karena secara teknis hal-hal seperti:

user@com
user@localserver
user@[IPv6:2001:db8::1]

Apakah semua email yang valid.

Jadi validasi HTML5 standar memungkinkan semua email yang valid, termasuk yang tidak umum.

Untuk beberapa penjelasan yang mudah dibaca (Alih-alih membaca melalui standar): http://en.wikipedia.org/wiki/Email_address#Examples

Coba tambahkan ini ke masukan

pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,63}$"

Biola

The RFC 822 , pasal 6, memberikan spesifikasi alamat di augmented Backus-Naur Form (BNF):

addr-spec   =  local-part "@" domain
local-part  =  word *("." word)
domain      =  sub-domain *("." sub-domain)

Menggunakan spesifikasi ini a@badalah alamat yang valid.

MEMPERBARUI

Untuk menjawab komentar Trejkaz, saya menambahkan definisi berikut. Kami melihat bahwa SPACE diperbolehkan tetapi hanya dalam string yang dikutip.

word          =  atom / quoted-string
atom          =  1*<any CHAR except specials, SPACE and CTLs>
quoted-string = <"> *(qtext/quoted-pair) <">
SPACE         =  <ASCII SP, space>
CTL           =  <any ASCII control character and DEL> 
qtext         =  <any CHAR excepting <">, "\" & CR, and including linear-white-space>
quoted-pair   =  "\" CHAR  

Pada halaman MDN ini menunjukkan regex browser yang harus digunakan untuk memvalidasi email:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#Validation

Anda dapat sedikit mengubah ekspresi reguler ini agar memerlukan setidaknya satu titik dalam nama domain: ubah bintang *di akhir ekspresi reguler menjadi plus +. Kemudian gunakan regex itu sebagai patternatribut:

<input type="email" pattern="^[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])?)+$"></input>

Anda dapat menyesuaikan pola bidang email:

input:valid {
  border-color: green
}

input:invalid {
  border-color: red
}

Email:
<input type="email" required value="[email protected]" /><br>

Non-dots Email:
<input type="email" required pattern="[^.]+@[^.]+" value="[email protected]" />

Berikut adalah bagaimana Anda bisa melakukannya dengan html5 menggunakan pola regex. Anda juga dapat menyertakan pesan khusus untuk ditampilkan.

<form>
  <input type="email" value="paul@test" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,63}$" title="Hey, you are missing domain part in the email !!!"/>
  <button type="submit">Click Me</button>
</form>

Pola ini selalu berhasil untuk saya.

Teks harus dalam huruf kecil pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"tapi menurut saya itu mencakup lebih atau kurang sebagian besar email.