HTML5 Validasi Email

Di HTML5 yang dapat anda lakukan seperti ini:

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

Dan ketika pengguna tekan submit, maka secara otomatis menunjukkan pesan kesalahan seperti:

The input type=email halaman www.w3.org situs catatan bahwa alamat email adalah semua string yang sesuai dengan ekspresi reguler berikut:

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

Gunakan diperlukan atribut dan pola atribut memerlukan nilai untuk mencocokkan 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 somemail@email.com / somemail@email.com.vn

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

tampaknya benar ketika field kosong atau valid. Ini juga memiliki beberapa menarik lainnya flags:

Diuji di Chrome.

Berikut adalah contoh yang saya gunakan untuk semua bentuk masukan email. Contoh ini adalah ASP.NET, tapi berlaku untuk setiap:

HTML5 masih memvalidasi menggunakan pola ketika tidak diperlukan. Belum't menemukan satu belum yang positif palsu.

Ini menjadikan sebagai berikut 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!#$%&'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*">

Aku tahu kau tidak setelah Javascript solusi namun ada beberapa hal seperti disesuaikan validasi pesan itu, dari pengalaman saya, hanya dapat dilakukan dengan menggunakan JS.

Juga, dengan menggunakan JS, anda dapat secara dinamis menambahkan validasi untuk semua field input type email dalam situs anda daripada harus memodifikasi setiap field input.

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

Sedikit terlambat untuk partai, tapi ini ekspresi reguler membantu saya untuk memvalidasi email jenis input di sisi klien. Meskipun, kita harus selalu melakukan verifikasi di server side juga.

<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 lebih banyak regex dari semua jenis di sini.

Satu-satunya 100% benar metode untuk memeriksa @-tanda di suatu tempat di alamat email yang dimasukkan dan kemudian posting validasi pesan ke alamat email tertentu. Jika mereka dapat mengikuti validasi petunjuk dalam pesan email, diinput alamat email yang benar.

David Gilbertson menulis tentang ini tahun yang lalu:

Ada dua pertanyaan yang perlu kita tanyakan:

1. Apakah pengguna **memahami bahwa mereka seharusnya ketik email

• alamat* ke bidang ini?

2. Apakah pengguna **benar jenis email mereka

• alamat* ke bidang ini?

Jika anda memiliki yang baik meletakkan-out formulir dengan label yang mengatakan "email", dan pengguna memasukkan sebuah simbol '@' di suatu tempat, maka itu aman untuk mengatakan mereka mengerti bahwa mereka seharusnya memasukkan alamat email. Mudah.

Berikutnya, kami ingin melakukan beberapa validasi untuk memastikan apakah mereka benar masukkan alamat email mereka.

Tidak mungkin.

[...]

Salah ketik akan pasti hasil di alamat email yang salah tapi hanya mungkin hasil di alamat email yang tidak valid.

[...]

tidak Ada gunanya mencoba untuk bekerja keluar apakah alamat email yang 'valid'. Pengguna jauh lebih mungkin untuk memasukkan yang salah dan sah alamat email dari mereka untuk memasukkan valid salah satu.

Selain itu, beberapa alamat email yang mungkin sintaksis atau politik yang tidak valid, melakukan pekerjaan. Misalnya, postmaster@ai apakah secara teknis pekerjaan meskipun Tld tidak harus memiliki catatan MX. Lihat juga diskusi tentang validasi email di WHATWG mailing list (di mana HTML5 dirancang di tempat pertama).

Anda dapat mengikuti pola ini juga

  E-mail: <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <input type="submit">

Ref : Di W3Schools

Hal ini sangat sulit untuk memvalidasi Email dengan benar hanya menggunakan HTML5 atribut "pola". Jika anda tidak menggunakan "pola" seseorang@ akan diproses. yang TIDAK valid email.

Menggunakan pola="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2," akan memerlukan format yang sama someone@email.com namun jika pengirim memiliki format seperti someone@email.net.au (atau yang serupa) tidak akan divalidasi untuk memperbaiki ini, anda bisa menempatkan pola="[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 sama.

Namun dengan ini, itu tidak akan mengizinkan someone@email.com untuk memvalidasi. Jadi sejauh yang hanya menggunakan HTML5 untuk memvalidasi alamat email yang masih belum benar-benar dengan kita. Untuk Menyelesaikan ini, anda akan menggunakan sesuatu seperti ini:

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

atau:

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

Namun, saya tidak tahu bagaimana untuk memvalidasi atau semua versi dari alamat email yang menggunakan HTML5 atribut pola.

Menggunakan HTML 5,Hanya membuat input email seperti :

<input type="email"/>

Ketika pengguna melayang di atas kotak input, mereka akan tooltip memerintahkan mereka untuk memasukkan email yang valid. Namun, Bootstrap memiliki bentuk yang jauh lebih baik Tooltip pesan untuk memberitahu pengguna untuk memasukkan alamat email dan itu muncul saat nilai yang dimasukkan tidak sesuai dengan email yang valid.