HTML5 E-posta Doğrulaması

"HTML5 ile, kullanıcının girişinin geçerli bir e-posta veya url adresi olup olmadığını kontrol etmek için daha fazla js veya sunucu tarafı koda ihtiyacımız yok" deniyor.

Bir kullanıcı girdikten sonra e-postayı nasıl doğrulayabilirim? ve JS olmadan, kullanıcı e-posta adresinin yanlış bir biçimini girerse bir mesajın nasıl görüntüleneceği.

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

HTML5'te şunu yapabilirsiniz:

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

Ve kullanıcı gönder düğmesine bastığında, otomatik olarak aşağıdaki gibi bir hata mesajı gösterir:

input type=emailSayfa www.w3.org bir e-posta adresi şu normal ifadeyi eşleşen herhangi dizesi olduğunu sitesi notları:

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

Değerin normal ifade kalıbıyla eşleşmesini zorunlu kılmak için requiredözniteliği ve bir patternözniteliği kullanın.

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

/ [a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}İçin kullanmasomemail@email.comsomemail@email.com.vn

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

alan boş veya geçerli olduğunda doğru görünüyor. Bunun başka ilginç işaretleri de var:

Chrome'da test edildi.

İşte tüm e-posta girişlerim için kullandığım örnek. Bu örnek ASP.NET'tir, ancak herhangi biri için geçerlidir:

<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, gerekmediğinde kalıbı kullanarak yine de doğrular. Henüz yanlış pozitif olan bir tane bulamadım.

Bu, aşağıdaki HTML olarak oluşturulur:

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

Javascript çözümünün peşinde olmadığınızı biliyorum, ancak deneyimlerime göre yalnızca JS kullanılarak yapılabilen özelleştirilmiş doğrulama mesajı gibi bazı şeyler var.

Ayrıca, JS kullanarak, her bir giriş alanını değiştirmek zorunda kalmadan, doğrulamayı sitenizdeki tüm e-posta türü giriş alanlarına dinamik olarak ekleyebilirsiniz.

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

Parti için biraz geç, ancak bu düzenli ifade, istemci tarafında e-posta türü girişini doğrulamama yardımcı oldu. Yine de her zaman sunucu tarafında da doğrulama yapmalıyız.

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

Her türden daha fazla normal ifadeyi burada bulabilirsiniz .

TL; DR: % 100 doğru tek yöntem, girilen e-posta adresinde bir yerde @ işaretini kontrol etmek ve ardından verilen e-posta adresine bir doğrulama mesajı göndermektir. E -posta mesajındaki doğrulama talimatlarını takip edebiliyorlarsa , girilen e-posta adresi doğrudur.

Uzun cevap:

David Gilbertson bunun hakkında yazdı yıllar önce :

Sormamız gereken iki soru var:

1. Kullanıcı mı , bu alana bir e-posta adresi yazması gerektiğini anladı mı?
2. Kullanıcı kendi e-posta adresini doğru bir şekilde yazdı mı? bu alana yazdı mı?

"E-posta" yazan bir etikete sahip iyi düzenlenmiş bir formunuz varsa ve kullanıcı bir yere bir "@" simgesi girerse, bir e-posta adresi girmeleri gerektiğini anladıklarını söylemek güvenlidir. Kolay.

Ardından, e-posta adreslerini doğru girip girmediklerini belirlemek için bazı doğrulama yapmak istiyoruz.

Mümkün değil.

[...]

Herhangi yanlış yazmanız olacaktır kesinlikle bir neden yanlış e-posta adresine, ama sadece belki bir neden geçersiz e-posta adresi.

[...]

Bir e-posta adresinin 'geçerli' olup olmadığını anlamaya çalışmanın bir anlamı yok. Bir kullanıcı girmek için çok daha muhtemeldir yanlış ve geçerli onlar girmek için olduğundan daha e-posta adresini geçersiz olması .

Başka bir deyişle, herhangi bir tür dize tabanlı doğrulamanın yalnızca sözdiziminin geçersiz olup olmadığını kontrol edebileceğini fark etmek önemlidir. Kullanıcının e-postayı gerçekten görüp göremediğini kontrol edemez (örneğin, kullanıcı zaten kimlik bilgilerini kaybettiğinden, başka birinin adresini yazdığından veya belirli bir kullanım durumu için kişisel e-posta adresi yerine iş e-postasını yazdığından). " Kullanıcıyla verilen e-posta adresini kullanarak iletişim kurabilir miyim " yerine, gerçekte aradığınız soru ne sıklıkla " bu e-posta sözdizimsel olarak geçerli mi"? Dizeyi "içeriyor mu " seçeneğinden daha fazla doğrularsanız , önceki soruyu yanıtlamaya çalışıyorsunuz demektir! Şahsen ben her zaman sadece ikinci soruyla ilgileniyorum.@

Ek olarak, sözdizimsel veya politik olarak geçersiz olabilecek bazı e-posta adresleri çalışır. Örneğin, postmaster@aiTLD'lerin MX kayıtlarına sahip olmaması gerekmesine rağmen teknik olarak çalışır . Ayrıca WHATWG posta listesindeki (HTML5 ilk etapta tasarlanmıştır) e-posta doğrulaması hakkındaki tartışmaya bakın .

HTML 5 kullanarak, giriş e-postasını şöyle yapın:

<input type="email"/>

Kullanıcı giriş kutusunun üzerine geldiğinde, geçerli bir e-posta girmelerini isteyen bir araç ipucu görüntüler. Bununla birlikte, Bootstrap formları, kullanıcıya bir e-posta adresi girmesini söyleyen çok daha iyi bir Araç İpucu mesajına sahiptir ve girilen değer geçerli bir e-postayla eşleşmediği anda açılır.

Bu kalıbı da takip edebilirsiniz

<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: W3Schools'ta

MDN'ye göre , bu RegExp, e-postaları doğrulamak için uygundur, çünkü özellikleri karşılayan e-postalar onunla eşleşmelidir.

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

E-postayı yalnızca HTML5 özelliği "desen" kullanarak doğru şekilde doğrulamak çok zordur. Bir "desen" kullanmazsanız, birisi @ işlenecektir. bu geçerli bir e-posta DEĞİLDİR.

Kullanmak pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}", biçimin olmasını gerektirir, someone@email.comancak gönderenin someone@email.net.au(veya benzeri) bir biçime sahip olması, bunu düzeltmek için doğrulanmazsa, bunu pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"".com.au veya .net.au" veya benzeri bir şekilde doğrulayabilirsiniz.

Ancak bunu kullanmak, birisi@email.com'un doğrulama yapmasına izin vermez. E-posta adreslerini doğrulamak için basitçe HTML5 kullanmak hala tam olarak bizde değil. Bunu tamamlamak için şunun gibi bir şey kullanırsınız:

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

veya:

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

Ancak, HTML5 kalıbı özniteliğini kullanarak e-posta adreslerinin her ikisini veya tüm sürümlerini nasıl doğrulayacağımı bilmiyorum.