Web geliştirmede bazen ihmal edilen ya da gereken özen gösterilmeyen en önemli noktalardan biri de web sitesi tasarımıdır. form doğrulama ve onları oluşturan alanlardan, bu doğrulamalar, hangi değerleri kabul edebileceklerinden, uzunluklarından gerekli olup olmadıklarına kadar uzanır.
Bu doğrulamaların müşteri tarafı geçmişte onlar tarafından yürütüldü Javascript birkaç alanı doğrulamak ve her zaman en uygun olmayan sonuçları elde etmek için hantal işlevler oluşturmak, aynı zamanda sunucu tarafı ancak bu, ilk önce verileri işlememiz ve tüm verilerimizin doğru olduğunu doğrulamak için sunucudan yanıt beklememiz gerektiğinden kullanıcıya kolay bir deneyim sunmadı.
Düzgünce çalıştıktan bir süre sonra Javascript İstemci tarafında her türlü işlemi gerçekleştirmek için, çerçeveler işleri kolaylaştırıyor gibi görünüyor, aralarında en ünlülerinden biri: jQuery; Önceden tanımlanmış bir yapı ve işleri yapmanın daha temiz ve daha optimal bir yolu ile, tüm kötü uygulamaları geride bırakmak ve geliştiriciye, doğrulamalar da dahil olmak üzere bu işlemleri gerçekleştirmek için çok daha eksiksiz bir araç sağlamak mümkün oldu.
Ama yine de jQuery istemci tarafında birçok işlemi kolaylaştırdı, doğrulama sorununa doğrudan saldıracak bir şey henüz geliştirilmedi, bu yüzden eklentisi Önyükleme Doğrulayıcı tüm faydalarını kullanan jQuery ve çerçevesi HTML5 Y CSS3, Önyükleme.
1. Önyükleme Doğrulayıcı
Önyükleme Doğrulayıcı dayalı bir eklentidir jQuery Y Önyükleme, eklenti kitaplıklarının basit bir şekilde dahil edilmesi ve güçlü ama basit kullanımıyla formların yanı sıra içindeki öğelerin doğrulanmasına izin verir. API, bu sahip olduğu tüm özellikleri unutmadan bunlardan bazılarını görelim:
- Yazı tipleri ve stiller ile entegrasyon Önyükleme.
- Diğerlerinin yanı sıra içerik uzunluğu, tarihler, kredi kartları, telefonlar, e-posta gibi önceden tanımlanmış alan doğrulamaları.
- Alanlar için özel doğrulamalar.
- Alan başına birden çok doğrulama ekleme imkanı.
- Doğrulama sonucuna göre bir geri bildirim simgesi görüntüleme imkanı.
- Mesajları kullanma imkanı HTML doğrulama sonucuna göre.
Gördüğümüz gibi, bu özellikler onu projelerimizde doğrulamaların uygulanması için dikkate alınması gereken bir numaralı seçenek haline getiriyor.
Kullanmak için neye ihtiyacımız var?kullanabilmek için Önyükleme Doğrulayıcı dahil etmemiz gerekiyor jQuery tercihen en son sürümünde, Önyükleme senin versiyonundan 3.x ve dosyalar .css Y .js kitapçıdan. Ek olarak, aşağıdaki gibi bir web sunucusu kurulumuna ihtiyacımız olacak. bataklık üzerinde çalışıyorsak pencereler veya Lamba içinde Linux.
2. Doğrulayıcılar
Bu öğreticinin pratik kısmına girmeden önce, kullandığı en önemli doğrulayıcılardan bazılarını bilmek önemlidir. Önyükleme Doğrulayıcı formlar içinde doğrulamaların ele alınması için, görelim:
base64Base-64 ile kodlanmış bir karakter dizisini doğrular.
arasındaBir alanın değerinin kesinlikle verilen iki sayı arasında olup olmadığını kontrol edin.
kredi kartıBir kredi kartı numarasını doğrulayın.
tarihBir tarihi, biçim, maksimum, minimum tarih ve hatta ayırıcının öne çıktığı belirli seçeneklere göre doğrulayın.
rakamlarDeğer yalnızca sayı içeriyorsa true veya true döndürür.
e-posta adresiAdından da anlaşılacağı gibi, bir e-posta adresini doğrular.
normal ifadeVerilen değerin şu normal ifadeyle eşleşip eşleşmediğini veya buna karşılık gelip gelmediğini doğrular. Javascript.
Bu, sahip olduğumuz doğrulayıcıların tam repertuarının sadece küçük bir örneğidir. Önyükleme DoğrulayıcıDoğrulayıcıların tam listesi için buraya girebilir ve ihtiyaçlarımıza en uygun olanı kontrol edebiliriz:
3. Giriş Formu
Mevcut herhangi bir web sitesinin en önemli yönlerinden biri, Giriş Formu, kullanıcılarımızın kullanıcı adı ve şifreleri ile sayfamıza girebilecekleri ve giriş yaparken ek avantajlardan yararlanabilecekleri.
Önyükleme Doğrulayıcı bu iki alanı birkaç basit kod satırıyla doğrulamamıza olanak tanır, ayrıca Önyükleme basit bir şekilde kalıcı bir pencere uygulamamıza izin vererek ona ek bir dokunuş vermemizi sağlar, böylece kullanıcının gözüne profesyonel ve hoş görünecek bir oturum açma formu oluşturur.
Yukarıda belirtilen dosyalardan herhangi birinin kaynak kodunda herhangi bir değişiklik yapmayacağımız için, bunları ilgili dosyalarından dahil edeceğiz. CDN, önce dosyaları ekleyeceğiz .css çok fazla güçlendirici beğenmek Önyükleme Doğrulayıcı:
Şimdi dosyaları dahil edeceğiz .js ve daha temiz bir yapıya sahip olmak için doğrulamalarımızın kodunu adlı bir dosyada ayıracağız. validator.js:
O zaman faydalarını kullanacağız Önyükleme Sadece onu oluşturan öğelere gerekli sınıfları uygulayarak istenen işlevselliği uygulayan modal penceremizi oluşturmak için:
Giriş Formu×Tarayıcıda çalıştırdığımızda örneğimizin şu ana kadar nasıl göründüğüne bakalım:Giriş yapmak
Kullanıcı adıParolaGiriş yapmak
Formumuzla birlikte modal penceremiz zaten çalışıyor, şimdi sadece doğrulamaları dahil etmemiz gerekiyor. Önyükleme Doğrulayıcı, bunun için bir başlatacağız belge.hazır bizim dosyamızda validator.js ve bunun içinde yöntemi arayacağız boostrapValidator ():
$ ('# loginForm'). bootstrapValidator ({message: 'Bu değer geçerli değil', feedbackIcons: {valid: 'glyphicon glyphicon-tamam', geçersiz: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, alanlar: {kullanıcı: {doğrulayıcılar: {notEmpty: {mesaj: 'Kullanıcı adı gereklidir'}}}, şifre: {doğrulayıcılar: {notEmpty: {message: 'Parola gereklidir'}}}}} ); Bu kodda dikkat etmemiz gereken ilk şey, yöntemi başlatmak için seçicinin kullanılmasıdır, bu durumda çağrılan formun kimliğini kullanırız. Giriş Formu, bu geçmek için DOM ağacı ve hiyerarşide altındaki öğelere ulaşın. Ardından, doğrulamalarda başarı veya hata olması durumunda formumuza görsel bir dokunuş vermek için genel bir mesaj ve geri bildirim simgeleri tanımlarız.
Sonunda doğrulamalarımız var ve bir bakışta bunun son derece okunabilir ve benzersiz bir basitliğe sahip olduğunu nasıl görebiliyoruz, formlarımızın alanlarının adını belirtiyoruz ve bu örnekte tek bir doğrulama kullanacağız. zorunlu alan, ancak yorumladığımız gibi alan başına birden fazla olabilirler.
Aşağıdaki resimde alanları doldurmadan bilgileri göndermeye çalıştığımızda formumuzun nasıl göründüğünü görelim:
Doğrulamalarımızın nasıl çalıştığını görüyoruz ve alanlara bilgi girilene kadar form, Sunmak Buton varsayılan olarak devre dışı olduğu için gerekli verileri girdiğimizde formumuzun nasıl göründüğünü ve geri bildirim simgelerinin buna göre değiştiğini aşağıdaki resimde görelim:
Birkaç dakika içinde, ilgili müşteri tarafı doğrulamaları ile bir giriş formu oluşturabildik. Önyükleme Doğrulayıcı.
4. Kayıt formu
Önceki durum basit ve oldukça kullanışlı ancak gelişmelerde mevcut olan tek durum değil, daha birçok alanı içeren kayıt formları var ve girilecek bilgilerle ilgili kısıtlamalar farklı.
Bu geçmişte bir sorun teşkil ediyordu çünkü alan sayısına bağlı olarak bir sayacın alan bazında yapılması ve doğrulanması gerekiyordu ve bu sayaç belirli bir sayıya ulaştığında hiçbir hata olmadığı anlamına geliyordu, bu bireysel doğrulamaları unutmadan yalnızca sayıları ve hatta alanın uzunluğunu kabul edecek olan tarih biçimleri gibi her alan.
İle birlikte Boostrap Doğrulayıcı ve önceden tanımlanmış doğrulayıcıları bu görevde bize basit ve hızlı bir şekilde yardımcı oluyor, bakalım:
İlk önce dosyaları ekleyeceğiz .css Y .js Bir önceki örnekte kullandığımız gibi, ek olarak kullanabilmek için bazı kütüphaneler ekleyeceğiz. tarih seçici nın-nin Boostrap:
Bu yapıldıktan sonra formumuzu oluşturuyoruz ve her alana uygun bir isim veriyoruz:
Bu formun tarayıcımızda nasıl göründüğüne bakalım:Kayıt formu
İsimlersoyadlarıE-postaParolaDoğum tarihi*****ErkekKadınsıTelefonCep telefonuGiriş
Doğrulamalara geçmeden önce tarih seçici bunun için dosyamıza sadece aşağıdaki kod satırlarını eklememiz gerekiyor validator.js ve alanımızın şu şekilde sahip olduğu kimliği verin:
$ (function () {$ ('# datetimepicker').datetimepicker ({pickTime: false});}); Bakalım bu eklenti nasıl görünüyor:
Gördüğümüz gibi, formda metin, şifre alanları, tarih saat seçici ve hatta radyo düğmeleri dahil olmak üzere karışık alanlar var, ancak bu bir sorun değil. Önyükleme Doğrulayıcı, aynı dosyamızı kullanacağız validator.js doğrulamalar için sadece yöntemin yeni bir örneğini gerçekleştirmemiz gerekiyor boostrapValidator yeni formun kimliğiyle ve aynısını içerir:
$ ('# kayıtForm'). bootstrapValidator ({feedbackIcons: {valid: 'glyphicon glyphicon-ok', geçersiz: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh'}, alanlar: {name: {doğrulayıcılar: {notEmpty: {message: 'Ad gereklidir'}}}, soyad: {doğrulayıcılar: {notEmpty: {message: 'Soyadı gereklidir'}}}, e-posta: {doğrulayıcılar: {notEmpty: {message: ' E-posta gerekli ve boş olamaz '}, emailAddress: {message:' E-posta geçerli değil '}}}, password: {validators: {notEmpty: {message:' Şifre gerekli ve boş olamaz ' }, stringLength: {min: 8, message: 'Parola en az 8 karakter içermelidir'}}}, datetimepicker: {validators: {notEmpty: {message: 'Doğum tarihi gerekli ve boş olamaz'} , tarih: {format: 'YYYY-AA-GG', mesaj: 'Doğum tarihi geçerli değil'}}}, *****: {doğrulayıcılar: {notEmpty: {mesaj: '**** * gereklidir '}}}, telefon: {mesaj:' Telefon veya geçerli değil ', doğrulayıcılar: {notEmpty: {message:' Telefon gereklidir ve boş olamaz '}, regexp: {regexp: / [0-9] + $ /, message:' Telefon yalnızca sayıları içerir'}}}, telefono_cel: {message: 'Telefon geçerli değil', doğrulayıcılar: {regexp: {regexp: / [0-9] + $ /, message: 'Telefon sadece sayıları içerebilir'} }},}}); İlk iki doğrulama için bir önceki örneğe benzer olduklarını görebiliyoruz ancak email alanını bulduğumuzda gerekli alanın ve ayrıca validator ile birlikte validasyona sahip olduğunu görüyoruz. e-posta adresi Bunun geçerli bir e-posta olduğunu doğrularız, bu doğrulamanın nasıl davrandığını görelim:
İle tarih seçici Tarih girerken sorun yaşamıyoruz, ancak bunu mümkün olan en temiz şekilde almak istiyorsak, biçimin doğrulanması gerektiğini belirttiğimiz aşağıdaki doğrulamada görebileceğimiz gibi biçimi doğrulayabiliriz. YYYY-AA-GG ne için geçerlidir:
Parolanın kaç karakter olabileceğini bile doğrulayabiliriz. IP uzunluğu ve seçeneği dk:
Bu eklentinin gücünü bitirmek ve göstermek için telefonu doğrulayacağız, sayı doğrulayıcıyı kullanabiliriz, ancak bu durumda normal bir ifade gibi daha karmaşık bir şey kullanacağız ve hepsinden iyisi, zaten bir doğrulayıcımız olması. bu: normal ifade, Formumuzda nasıl çalıştığını görelim:
Tüm doğrulamalarımızın doğru çalıştığını zaten test ettikten sonra, formumuzdaki tüm bilgileri düzelteceğiz ve uygun bilgilerle nasıl göründüğüne bakacağız:
Bununla, doğrulamalarını kullanmayı öğrendiğimiz bu öğreticiyi bitiriyoruz. Boostrap Doğrulayıcı, kurulum veya yapılandırma gerektirmeyen ve formlarımızı birkaç basit kod satırıyla hızlı ve kolay bir şekilde doğrulamamızı sağlayan güçlü bir eklenti.
