Pertanyaan Validasi Email HTML5


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

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

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

75
2017-10-26 10:48


asal


Jawaban:


Di HTML5 Anda dapat melakukannya seperti ini:

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

Dan ketika pengguna menekan submit, itu secara otomatis menunjukkan pesan kesalahan seperti:

Error Message


95
2017-10-26 10:56



Itu input type=email halaman dari www.w3.org situs mencatat bahwa alamat email adalah string apa pun yang cocok dengan ekspresi reguler berikut:

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

Menggunakan required atribut dan a pattern atribut untuk meminta nilai agar sesuai dengan pola regex.

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

24
2017-10-09 07:31



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


8
2017-11-20 04:41



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

<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 masih memvalidasi menggunakan pola bila tidak diperlukan. Belum menemukan satu pun itu adalah positif palsu.

Ini menjadikan sebagai HTML berikut:

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

5
2018-05-19 07:04



Saya tahu Anda tidak mengincar solusi Javascript namun ada beberapa hal seperti pesan validasi khusus yang, dari pengalaman saya, hanya bisa dilakukan menggunakan JS.

Juga, dengan menggunakan JS, Anda dapat secara dinamis menambahkan validasi ke semua bidang input jenis email di situs Anda daripada harus memodifikasi setiap bidang input tunggal.

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

4
2018-02-17 01:35



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

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

enter image description here

Diuji di Chrome.


4
2018-03-28 17:17



Sangat sulit untuk memvalidasi Email dengan benar hanya menggunakan "pola" atribut HTML5. Jika Anda tidak menggunakan "pola" seseorang @ akan diproses. yang TIDAK merupakan 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 someone@email.com namun jika pengirimnya memiliki format seperti someone@email.net.au (atau serupa) tidak akan divalidasi untuk memperbaikinya 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 sejenisnya.

Namun menggunakan ini, itu tidak akan mengizinkan seseorang@email.com untuk memvalidasi. Jadi sejauh hanya menggunakan HTML5 untuk memvalidasi alamat email masih belum sepenuhnya dengan kami. Untuk Melengkapi 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.


1
2018-03-26 08:57



Satu-satunya metode yang benar 100% adalah untuk memeriksa @ -tanda di suatu tempat di alamat email yang dimasukkan dan kemudian memposting pesan validasi ke alamat email yang diberikan. Jika mereka dapat mengikuti instruksi validasi dalam pesan email, alamat email yang dimasukkan sudah benar.

David Gilbertson menulis tentang ini bertahun-tahun lalu:

Ada dua pertanyaan yang perlu kami tanyakan:

  1. Apakah pengguna memahami bahwa mereka seharusnya mengetik email   alamat ke dalam bidang ini?
  2. Apakah pengguna ketikkan email mereka dengan benar   alamat ke dalam bidang ini?

Jika Anda memiliki bentuk yang ditata dengan baik dengan label   yang mengatakan "email", dan pengguna memasukkan simbol ‘@’ di suatu tempat, lalu   aman untuk mengatakan mereka mengerti bahwa mereka seharusnya   memasukkan alamat email. Mudah.

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

Tidak memungkinkan.

[...]

Setiap jenis kesalahan akan pastinya menghasilkan alamat email yang salah tetapi hanya mungkin menghasilkan alamat email yang tidak valid.

[...]

Tidak ada gunanya berusaha jika alamat email ‘valid’. Seorang pengguna jauh lebih mungkin untuk masuk salah dan valid alamat email dari mereka untuk memasukkan salah satu yang tidak valid.

Selain itu, beberapa alamat email yang mungkin secara sintaksis atau secara politik tidak valid, berfungsi. Sebagai contoh, postmaster@ai secara teknis berfungsi meskipun TLD tidak boleh memiliki data MX. Juga lihat diskusi tentang validasi email pada milis WHATWG (di mana HTML5 dirancang di tempat pertama).


0
2018-05-29 06:28