HTML5 Kısıtlama Doğrulamasına Giriş

Etkileşimli web siteleri ve uygulamalar, bize olanak sağlayan formlar olmadan hayal edilemez. kullanıcılarımızla bağlantı kurun, ve için veriyi almak Onlarla sorunsuz işlem yapabilmek için ihtiyacımız var. İhtiyacımız var geçerli kullanıcı girişi, ancak bunu bir şekilde edinmemiz gerekir sinir bozmaz kullanıcılarımız çok fazla.

Akıllıca seçilen UX tasarım desenleriyle formlarımızın kullanılabilirliğini artırabilirken, HTML5 ayrıca kısıtlama doğrulaması için bize izin veren yerel bir mekanizmaya sahiptir Giriş hatalarını doğrudan ön uçta yakalayın.

Bu yayında odaklanacağız tarayıcı tarafından sağlanan kısıtlama onayı, ve öncül geliştiricilerin nasıl yapabildiklerini araştırın HTML5 kullanarak güvenli geçerli kullanıcı girişi.

Neden Ön Uç Giriş Doğrulamasına İhtiyacımız Var

Giriş doğrulama iki ana hedefi var. Aldığımız içeriğin olması gerekiyor:

1. Faydalı

İhtiyacımız var çalışabileceğimiz kullanılabilir veri. İnsanların girmesini sağlamalıyız. doğru formatta gerçekçi veriler. Mesela, bugün yaşayan hiç kimse 200 yıl önce doğmadı. Bu gibi verileri almak ilk başta komik görünebilir, ancak uzun vadede can sıkıcı bir durumdur ve veritabanımızı gereksiz verilerle doldurur.

2. Güvenli

Güvenlikten bahsederken, bunun anlamı bizim Kötü niyetli içeriğin enjeksiyonunu engelle - kasıtlı veya kazayla.

Yararlılık (makul verilerin elde edilmesi) elde edilebilir sadece müşteri tarafında, arka uç ekibi bu konuda çok fazla yardımcı olamaz. Ulaşmak için güvenlik, ön ve arka uç geliştiricilerin birlikte çalışması gerekir.

Frontend geliştiricileri, istemci tarafındaki girdileri doğru bir şekilde doğrularsa, arka uç ekibinin daha az kırılganlıkla başa çıkması gerekecek. Hacking (bir site) genellikle Ekstra veri gönderme, veya yanlış formattaki veriler. Geliştiriciler bunun gibi güvenlik açıklarıyla savaşabilir, ön uçtan başarılı bir şekilde savaşabilir.

Örneğin, bu PHP güvenlik rehberi, müşteri tarafında yapabileceğimiz her şeyi kontrol etmenizi önerir. Aşağıdaki gibi pek çok örnek vererek ön uç giriş onaylamasının önemini vurgulamaktadırlar:

"Giriş doğrulama, örneğin bir şeyin bir tam sayı veya alfasayısal bir dize veya bir HTTP URL olması gerektiğinde, son derece sınırlı değerlerle en iyi şekilde çalışır."

Ön giriş giriş doğrulamasında işimiz makul kısıtlamalar getirmek kullanıcı girişi üzerinde. HTML5'in kısıtlama doğrulama özelliği bize bunun için araçlar sağlar.

HTML5 Kısıtlama Doğrulaması

HTML5'ten önce, ön uç geliştiriciler JavaScript ile kullanıcı girişini doğrulama, Bu sıkıcı ve hataya açık bir süreçti. Müşteri tarafı form doğrulamasını iyileştirmek için, HTML5 bir kısıt doğrulama modern tarayıcılarda çalışan algoritma ve sunulan girdinin geçerliliğini kontrol eder.

Değerlendirme yapmak için, algoritma girdi öğelerinin geçerliliği ile ilgili öznitelikler, gibi , </code>, ve <code><select></code>. Kısıtlama doğrulamasının nasıl yapıldığını öğrenmek için tarayıcıda adım adım bu WhatWG dokümanını inceleyin..</p> <p>HTML5'in kısıtlama doğrulama özelliği sayesinde hepsini uygulayabiliriz <strong>standart giriş doğrulama görevleri</strong> müşteri tarafında <strong>JavaScript olmadan, sadece HTML5 ile</strong>.</p> <p>Doğrulama ile ilgili daha karmaşık görevler gerçekleştirmek için HTML5 bize <strong>Sınırlama Doğrulama JavaScript API</strong> özel doğrulama komut dosyalarımızı ayarlamak için kullanabiliriz.</p> <h4>Anlamsal Giriş Türleriyle Doğrulayın</h4> <p>HTML5 tanıttı <strong>anlamsal giriş tipleri</strong> Bu - kullanıcı aracıları için öğenin anlamını belirtmenin yanı sıra - <strong>kullanıcı girişini doğrula</strong> kullanıcıları belirli bir giriş biçimiyle sınırlandırarak.</p> <p>HTML5'ten önce var olan giriş türlerinin yanı sıra (<code>Metin</code>, <code>parola</code>, <code>Gönder</code>, <code>sıfırlamak</code>, <code>radyo</code>, <code>onay kutusu</code>, <code>buton</code>, <code>gizli</code>) aşağıdakileri de kullanabiliriz <strong>anlamsal HTML5 giriş tipleri</strong>: <code>E-posta</code>,<code>tel</code>,<code>url</code>,<code>numara</code>,<code>zaman</code>,<code>tarih</code>,<code>datetime</code>,<code>datetime-yerel</code>, <code>ay</code>,<code>hafta</code>, <code>menzil</code>, <code>arama</code>,<code>renk</code>.</p> <p>HTML5 giriş türlerini eski tarayıcılarda güvenle kullanabiliyoruz; <code><input type="text"></code> onları desteklemeyen tarayıcılardaki alan.</p> <p>Kullanıcı yanlış giriş türüne girdiğinde ne olacağını görelim. Diyelim ki aşağıdaki kodla bir e-posta giriş alanı oluşturduk:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">E-posta adresiniz:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Kullanıcı bir e-posta formatı kullanmayan bir dize yazdığında, sınırlama doğrulama algoritması <strong>formu göndermiyor</strong>, ve <strong>hata mesajı döndürür</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>Aynı kural, örneğin başka giriş tipleri için de geçerlidir. <code>= "Url" yazarak</code> Kullanıcılar yalnızca URL biçimini izleyen bir girdi gönderebilir (örneğin, <code>http: //</code> veya <code>ftp: //</code>).</p> <p>Bazı girdi türleri, <strong>kullanıcıların yanlış bir giriş formatı girmesine bile izin vermiyor</strong>, Örneğin <code>renk</code> ve <code>menzil</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Arka plan rengi:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Kullanırsak <code>renk</code> giriş türü, kullanıcının renk seçiciden bir renk seçmesi veya varsayılan siyahla kalması ile sınırlıdır. Giriş alanı <strong>tasarım tarafından kısıtlanmış</strong>, bu nedenle kullanıcı hatası için fazla şans bırakmaz.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Uygun olduğunda, kullanmayı düşünmeye değer <code><select></code> Tasarım gereği bu kısıtlı giriş türlerine benzer şekilde çalışan HTML etiketi; kullanıcıların açılır listeden seçim yapmasını sağlar.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">En Sevdiğiniz Meyve:</label> <select name="fruit"> <option value="apple">elma</option> <option value="pear">Armut</option> <option value="orange">Portakal</option> <option value="raspberry">Ahududu</option> </select> <input type="submit" value="Submit"> </form> </pre> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_3.jpg"></figure><h4>HTML5'in Doğrulama Özelliklerini kullanın</h4> <p>Anlamsal giriş türlerini kullanmak, kullanıcıların göndermelerine izin verilen bazı kısıtlamaları belirler, ancak çoğu durumda biraz daha ileri gitmek istiyoruz. Bu ne zaman <strong>doğrulama ile ilgili özellikler</strong> arasında <code><input></code> etiketi bize yardımcı olabilir.</p> <p>Doğrulama ile ilgili özellikler belirli giriş türlerine aittir (üzerinde kullanılamazlar) <em>herşey</em> türleri) başka kısıtlamalar getirdikleri.</p> <h5>1. <code>gereklidir</code> elbette geçerli bir giriş elde etmek için</h5> <p> <code>gereklidir</code> öznitelik, en bilinen HTML doğrulama özniteliğidir. Bu bir <strong>boolean niteliği</strong> bu demektir ki <strong>herhangi bir değer almaz</strong>, sadece içine koymak zorundayız <code><input></code> eğer kullanmak istiyorsak etiket:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Kullanıcı gerekli bir giriş alanına bir değer girmeyi unutursa, tarayıcı <strong>hata mesajı döndürür</strong> Bu, onları alanlara doldurmaları konusunda uyarır ve <strong>formu gönderemiyorum</strong> geçerli bir giriş sunana kadar. Bu yüzden her zaman önemli <strong>görsel olarak işaretle</strong> kullanıcılara zorunlu alanlar.</p> <p> <code>gereklidir</code> özellik olabilir <strong>aşağıdaki giriş türleriyle birlikte kullanılır</strong>: <code>Metin</code>, <code>arama</code>, <code>url</code>, <code>tel</code>, <code>E-posta</code>, <code>parola</code>, <code>tarih</code>, <code>datetime</code>, <code>datetime-yerel</code>, <code>ay</code>, <code>hafta</code>,<code>zaman</code>, <code>numara</code>, <code>onay kutusu</code>, <code>radyo</code>, <code>dosya</code>, artı <code><textarea></code>ve <code><select></code> HTML etiketleri.</p> <h5>2. <code>min</code>, <code>maksimum</code> ve <code>adım</code> numara doğrulama için</h5> <p> <code>min</code>, <code>maksimum</code> ve <code>adım</code> özellikleri bize sağlar <strong>sayı giriş alanlarına kısıtlamalar koymak</strong>. İle birlikte kullanılabilirler <code>menzil</code>, <code>numara</code>, <code>tarih</code>, <code>ay</code>, <code>hafta</code>, <code>datetime</code>, <code>datetime-yerel</code>, ve <code>zaman</code> giriş tipleri.</p> <p> <code>min</code> ve <code>maksimum</code> özellikleri kolayca elde etmek için harika bir yol sağlar <strong>mantıksız verileri hariç tut</strong>. Örneğin, aşağıdaki örnek, kullanıcıları 18 ile 120 arasında bir yaş göndermeye zorlar.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Yaşınız:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>Kısıtlama doğrulama algoritması, kullanıcıdan daha küçük bir kullanıcı girdisine girdiğinde <code>min</code>, veya daha büyük <code>maksimum</code> değer, arka uca ulaşmasını önler ve bir hata mesajı döndürür..</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p> <code>adım</code> nitelik <strong>sayısal bir aralık belirtir</strong> Sayısal giriş alanının yasal değerleri arasında. Örneğin, kullanıcıların yalnızca artık yıllar arasından seçim yapmasını istiyorsak, <code>adım = "4"</code> alanın niteliği. Aşağıdaki örnekte kullandım <code>numara</code> giriş türü, çünkü yok <code>type = "yıl"</code> HTML5'te.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">En Sevdiğiniz Artık Yıl:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>Önceden belirlenmiş kısıtlamalarla, kullanıcılar yalnızca birlikte gelen küçük yukarı okları kullanıyorlarsa, 1972 ve 2016 arasındaki artık yıllar arasından seçim yapabilirler. <code>numara</code> giriş tipi. Giriş alanına manuel olarak bir değer de yazabilirler, ancak kısıtlamaları karşılamaması durumunda, tarayıcı bir hata mesajı verecektir..</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>maksimum uzunluk</code> metin uzunluğu doğrulaması için</h5> <p> <code>maksimum uzunluk</code> öznitelik mümkün kılar <strong>maksimum karakter uzunluğu ayarlamak</strong> metinsel giriş alanları için. Birlikte kullanılabilir <code>Metin</code>, <code>arama</code>, <code>url</code>, <code>tel</code>, <code>E-posta</code> ve <code>parola</code> giriş tipleri ve <code><textarea></code> HTML etiketi.</p> <p> <code>maksimum uzunluk</code> öznitelik, belirli sayıda karakterden fazlasını kullanamayan telefon numarası alanları veya kullanıcıların belirli bir uzunluktan daha fazla yazmalarını istemediğimiz iletişim formları için mükemmel bir çözüm olabilir..</p> <p>Aşağıdaki kod parçacığı ikincisi için bir örnek gösterir, kullanıcı mesajlarını 500 karakterle sınırlar.. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Mesaj (en fazla 500 karakter):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

maksimum uzunluk nitelik hata mesajı döndürmüyor, ancak tarayıcı kullanıcıların belirtilen karakter numaralarından daha fazlasını yazmasına izin vermez. Bu yüzden çok önemlidir kullanıcıları kısıtlama hakkında bilgilendirin, yoksa neden yazmaya devam edemediklerini anlamıyorlar.

 4. Desen Regex doğrulama için
  Desen özellik bize izin verir Normal İfadeler kullanın Giriş doğrulama sürecimizde. Düzenli bir ifade bir önceden tanımlanmış karakter kümesi Bu kesin bir kalıp oluşturur. Deseni izleyen dizeleri aramak veya desen tarafından tanımlanan belirli bir formatı uygulamak için kullanabiliriz..
 İle Desen özellik ikincisini yapabiliriz - kullanıcıları girdilerini bir biçimde gönderme konusunda kısıtlayın verilen normal ifadeyle eşleşir.
   Desen özniteliğin birçok kullanım durumu vardır, ancak istediğimizde özellikle yararlı olabilir bir şifre alanını doğrula.
 Aşağıdaki örnek, kullanıcıların en az 8 karakter uzunluğunda ve en az bir harf ve bir sayı içeren bir şifre girmelerini gerektirir (kullandığım regex'in kaynağı). 
   * Şifreniz:   
 
 Bir kaç şey daha
 Bu makalede, bu yazının nasıl kullanılacağına bir göz attık. tarayıcı tarafından sağlanan form doğrulama HTML5'in yerel kısıtlama doğrulama algoritması tarafından sağlanır. Özel doğrulama komut dosyalarımızı oluşturmak için form doğrulama becerilerini geliştirmek için bir sonraki adım olan Sınırlama Doğrulama API'sini kullanmamız gerekir..
 HTML5 formlarına yardımcı teknolojilerden erişilebilir, bu nedenle kullanmak zorunda değiliz. arya-Gerekli Ekran okuyucular için gerekli giriş alanlarını işaretlemek için ARIA özelliği. Bununla birlikte, eski tarayıcılar için erişilebilirlik desteği eklemek yararlı olabilir. Mümkün kısıtlama doğrulamasından vazgeçmek ekleyerek novalidate boolean niteliği 
 eleman.