Validasi Email HTML5

Dikatakan "Dengan HTML5, kita tidak perlu lagi js atau kode sisi server untuk memeriksa apakah masukan pengguna adalah alamat email atau url yang valid"

Bagaimana saya bisa memvalidasi email setelah pengguna masuk? dan tanpa JS cara menampilkan pesan jika pengguna salah memasukkan alamat emailnya.

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

Di HTML5 Anda bisa melakukan seperti ini:

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

Dan ketika pengguna menekan kirim, secara otomatis menampilkan pesan kesalahan seperti:

The input type=emailhalaman dari www.w3.org catatan situs yang alamat email adalah string yang cocok dengan ekspresi reguler berikut:

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

Gunakan requiredatribut dan patternatribut agar nilai cocok dengan pola regex.

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

Menggunakan [a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}untuk [email protected]/[email protected]

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

tampaknya benar jika bidang kosong atau valid. Ini juga memiliki beberapa bendera menarik lainnya:

Diuji di Chrome.

Berikut adalah contoh yang saya gunakan untuk semua input email formulir saya. Contoh ini adalah ASP.NET, tetapi berlaku untuk semua:

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

HTML5 masih memvalidasi menggunakan pola jika tidak diperlukan. Belum menemukan satu pun yang merupakan positif palsu.

Ini dirender sebagai HTML berikut:

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

Saya tahu Anda tidak menginginkan solusi Javascript namun ada beberapa hal seperti pesan validasi yang disesuaikan yang, dari pengalaman saya, hanya dapat dilakukan menggunakan JS.

Selain itu, dengan menggunakan JS, Anda dapat secara dinamis menambahkan validasi ke semua bidang masukan jenis email di dalam situs Anda daripada harus mengubah setiap bidang masukan.

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

Agak terlambat untuk pesta, tetapi ekspresi reguler ini membantu saya memvalidasi input jenis email di sisi klien. Padahal, kita juga harus selalu melakukan verifikasi di sisi server.

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

Anda dapat menemukan semua jenis regex di sini .

TL; DR: Satu-satunya metode yang 100% benar adalah dengan memeriksa @ -sign di suatu tempat di alamat email yang dimasukkan dan kemudian memposting pesan validasi ke alamat email yang diberikan. Jika mereka dapat mengikuti instruksi validasi di pesan email , alamat email yang dimasukkan sudah benar.

Jawaban panjang:

David Gilbertson menulis tentang ini tahun lalu:

Ada dua pertanyaan yang perlu kita tanyakan:

1. Apakah pengguna memahami bahwa mereka seharusnya mengetik alamat email di bidang ini?
2. Apakah pengguna mengetik alamat emailnya sendiri dengan benar di bidang ini?

Jika Anda memiliki formulir yang ditata dengan baik dengan label yang bertuliskan "email", dan pengguna memasukkan simbol '@' di suatu tempat, maka aman untuk mengatakan bahwa mereka memahami bahwa mereka seharusnya memasukkan alamat email. Mudah.

Selanjutnya, kami ingin melakukan beberapa validasi untuk memastikan apakah mereka memasukkan alamat email mereka dengan benar.

Tidak memungkinkan.

[...]

Salah ketik pasti akan menghasilkan alamat email yang salah , tetapi hanya mungkin menghasilkan alamat email yang tidak valid .

[...]

Tidak ada gunanya mencoba mencari tahu apakah alamat email itu 'valid'. Pengguna jauh lebih mungkin memasukkan alamat email yang salah dan valid daripada memasukkan alamat email yang tidak valid .

Dengan kata lain, penting untuk diperhatikan bahwa semua jenis validasi berbasis string hanya dapat memeriksa apakah sintaksnya tidak valid. Itu tidak dapat memeriksa apakah pengguna benar-benar dapat melihat email (misalnya karena pengguna telah kehilangan kredensial, mengetik alamat orang lain atau mengetik email kantor alih-alih alamat email pribadi untuk kasus penggunaan tertentu). Seberapa sering pertanyaan yang Anda cari adalah " apakah email ini valid secara sintaksis " dan bukan " dapatkah saya berkomunikasi dengan pengguna menggunakan alamat email yang diberikan "? Jika Anda memvalidasi string lebih dari "isinya @", Anda mencoba menjawab pertanyaan sebelumnya! Secara pribadi, saya selalu tertarik dengan pertanyaan terakhir saja.

Selain itu, beberapa alamat email yang mungkin secara sintaksis atau politis tidak valid, dapat berfungsi. Misalnya, secara postmaster@aiteknis berfungsi meskipun TLD seharusnya tidak memiliki data MX . Lihat juga diskusi tentang validasi email di milis WHATWG (di mana HTML5 dirancang terlebih dahulu).

Menggunakan HTML 5, Cukup buat input email seperti:

<input type="email"/>

Saat pengguna mengarahkan kursor ke kotak input, mereka akan mendapatkan tooltip yang menginstruksikan mereka untuk memasukkan email yang valid. Namun, formulir Bootstrap memiliki pesan Tooltip yang jauh lebih baik untuk memberi tahu pengguna untuk memasukkan alamat email dan itu muncul saat nilai yang dimasukkan tidak cocok dengan email yang valid.

Anda juga bisa mengikuti pola ini

<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: Di W3Schools

Menurut MDN , RegExp ini tidak masalah untuk memvalidasi email, karena email yang memenuhi spesifikasi harus cocok dengannya.

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

Sangat sulit untuk memvalidasi Email dengan benar hanya dengan menggunakan "pola" atribut HTML5. Jika Anda tidak menggunakan "pola" seseorang @ akan diproses. yang BUKAN email yang valid.

Menggunakan pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"akan membutuhkan format yang akan [email protected]tetapi jika pengirim memiliki format seperti [email protected](atau serupa) tidak akan divalidasi untuk memperbaikinya, Anda bisa meletakkan pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"ini akan memvalidasi ".com.au atau .net.au atau serupa.

Namun menggunakan ini, tidak akan mengizinkan [email protected] untuk memvalidasi. Sejauh hanya menggunakan HTML5 untuk memvalidasi alamat email masih belum sepenuhnya dimiliki kami. Untuk menyelesaikan ini, Anda akan menggunakan sesuatu seperti ini:

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

atau:

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

Namun, saya tidak tahu cara memvalidasi kedua atau semua versi alamat email menggunakan atribut pola HTML5.