Doğrulama, verilerin doğru ve eksiksiz olmasını sağlayan süreçtir.
Gerçek dünya örneğinde, bu siteye tam erişim elde etmeden önce bir kayıt formu doldurulmasını gerektiren bir site varsayalım. Kayıt sayfasında kullanıcı adı, şifre, e-posta kimliği vb. İçin giriş alanları olacaktır.
Kullanıcı formu gönderdiğinde, normalde ayrıntılar sunucuya gönderilmeden önce bir doğrulama gerçekleşir. Bu doğrulama, mümkün olan en iyi ölçüde, giriş alanlarının ayrıntılarının doğru şekilde girilmesini sağlamaya çalışacaktır.
Örneğin, e-posta kimliği her zaman Bu e-posta adresi istenmeyen postalardan korunuyor şeklinde olmalıdır. Görüntülemek için JavaScript'in etkin olması gerekir. ; birisi e-posta kimliğine yalnızca kullanıcı adını girerse, ideal olarak doğrulama başarısız olmalıdır. Bu nedenle doğrulama, ayrıntılar daha fazla işlem için sunucuya gönderilmeden önce bu temel kontrolleri yapmaya bakar.
Bu eğitimde öğreneceksiniz-
- HTML5 kullanarak form doğrulama
- $ Dirty, $ valid, $ invalid, $ pristine kullanarak form doğrulama
- AngularJS Otomatik Doğrulama kullanarak form doğrulama
- Ladda düğmeleriyle kullanıcı geri bildirimi
HTML5 kullanarak form doğrulama
Form doğrulama, bir web formuna girilen bilgilerin sunucuya gönderilmeden önce kullanıcı tarafından ön doğrulama işlemidir. İstemci tarafındaki bilgileri doğrulamak her zaman daha iyidir. Bunun nedeni, girilen bilgilerin yanlış olması durumunda kullanıcıya formun tekrar sunulması gerektiğinde daha az ek yük eklemesidir.
HTML5'te form doğrulamanın nasıl yürütülebileceğine bir göz atalım.
Örneğimizde, kullanıcının bir kullanıcı adı, şifre, e-posta kimliği ve yaş gibi ayrıntıları girmesi gereken kullanıcıya basit bir kayıt formu göstereceğiz.
Form, kullanıcının bilgileri düzgün bir şekilde girmesini sağlamak için doğrulama kontrollerine sahip olacaktır.
Event Registration Guru99 Global Event
Kod Açıklaması:
- Metin giriş türü için 'gerekli' özelliğini kullanıyoruz. Bu, form gönderildiğinde metin kutusunun boş olamayacağı ve metin kutusunda bir tür metnin bulunması gerektiği anlamına gelir.
- Bir sonraki giriş türü paroladır. Giriş tipi şifre olarak işaretlendiğinden, kullanıcı alana herhangi bir metin girdiğinde maskelenecektir.
- Giriş türü e-posta olarak belirtildiğinden, kutudaki metnin kalıpla eşleşmesi gerekir Bu e-posta adresi istenmeyen postalardan korunuyor. Görüntülemek için JavaScript'in etkin olması gerekir. .
- Giriş türü bir sayı olarak işaretlendiğinde, bir kullanıcı klavye veya alfabeyi kullanarak herhangi bir karakter girmeye çalışırsa, metin kutusuna girilmeyecektir.
Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:
Form doğrulamayı çalışırken görmek için, ekrana herhangi bir bilgi girmeden Gönder düğmesine tıklayın.
Gönder düğmesi tıklandıktan sonra, alanın doldurulması gerektiğini belirten bir doğrulama hatasını gösteren bir açılır pencere gelecektir.
Dolayısıyla, gerekli olarak işaretlenen kontrol için doğrulama, kullanıcının metin alanına herhangi bir değer girmemesi durumunda hata mesajının gösterilmesine neden olur.
Kullanıcı şifre kontrolüne herhangi bir değer girdiğinde, girilen karakterleri maskelemek için kullanılan '*' sembolünü göreceksiniz.
Sonra yanlış e-posta kimliği girelim ve gönder düğmesine tıklayalım. Gönder düğmesi tıklandıktan sonra, alanda @ sembolünün olması gerektiğine dair bir doğrulama hatasını gösteren bir açılır pencere görünecektir.
Bu nedenle, bir e-posta denetimi olarak işaretlenen denetimin doğrulaması, kullanıcının metin alanına uygun bir e-posta kimliği girmemesi durumunda hata mesajının gösterilmesine neden olacaktır.
Son olarak yaş metin kontrolüne herhangi bir karakter girmeye çalıştığınızda ekrana girilmeyecektir. Kontrol, kontrole bir sayı girildiğinde yalnızca bir değerle doldurulacaktır.
$ Dirty, $ valid, $ invalid, $ pristine kullanarak form doğrulama
AngularJS, doğrulama için ek özelliklerini sağlar. AngularJS, doğrulama amacıyla kontroller için aşağıdaki özellikleri sağlar
- $ dirty - Kullanıcı kontrol ile etkileşim kurdu
- $ geçerli - Alan içeriği geçerlidir
- $ geçersiz - Alan içeriği geçersiz
- $ pristine - Kullanıcı henüz denetimle etkileşime girmedi
Açısal doğrulamayı gerçekleştirmek için izlenmesi gereken adımlar aşağıdadır.
Adım 1) Formu bildirirken no validate özelliğini kullanın. Bu özellik, HTML5'e doğrulamanın AngularJS tarafından yapılacağını söyler.
Adım 2) Formun kendisi için tanımlanmış bir adı olduğundan emin olun. Bunu yapmanın nedeni, Açısal doğrulama yapılırken form adının kullanılmasıdır.
Adım 3) Her kontrolün kendisi için tanımlanmış bir adı olduğundan emin olun. Bunu yapmanın nedeni, Açısal doğrulama yapılırken kontrol adının kullanılmasıdır.
Adım 4) Kontroller için $ dirty, $ invalid ve $ valid özelliklerini kontrol etmek için ng-show direktifini kullanın.
Yukarıda belirtilen adımları içeren bir örneğe bakalım.
Örneğimizde,
Kullanıcının metin kutusuna bir Konu adı girmesi gereken basit bir metin alanımız olacak. Bu yapılmazsa, bir doğrulama hatası tetiklenir ve kullanıcıya hata mesajı gösterilir.
Event Registration Guru99 Global Event
Kod Açıklaması:
- Form için "formum" olan bir isim verdiğimizi unutmayın. Bu, AngularJS doğrulama formundaki kontrollere erişirken gereklidir.
- HTML formunun AngularJS'nin doğrulamayı gerçekleştirmesine izin verdiğinden emin olmak için "novalidate" özelliğini kullanma.
- "$ Dirty" ve "$ geçersiz" özelliğini kontrol etmek için ng-show direktifini kullanıyoruz. Bu, metin kutusu değiştirilmişse "$ dirty" özellik değerinin doğru olacağı anlamına gelir. Ayrıca, metin kutusu değerinin boş olması durumunda "$ geçersiz" özelliği doğru olacaktır. Dolayısıyla, her iki özellik de doğruysa, kontrol için doğrulama başarısız olur. Bu nedenle, her iki değer de doğruysa, ng-gösterisi de gerçekleşecek ve kırmızı renkli karakterlerle aralık kontrolü görüntülenecektir.
- Bunda, doğru olarak değerlendirilen "$ error" özelliğini kontrol ediyoruz çünkü kontrol için kontrol için değerin girilmesi gerektiğinden bahsetmiştik. Böyle bir durumda, metin kutusuna veri girilmemişse, aralık kontrolü "Kullanıcı adı gerekli" metnini görüntüler.
- Metin kutusu kontrol değeri geçersizse, kullanıcının formu gönderememesi için gönder düğmesini de devre dışı bırakmak istiyoruz. Kontrolün "$ kirli" ve "$ geçersiz" özelliğinin koşullu değerine dayalı olarak bunu yapmak için kontrol için "ng-disabled" özelliğini kullanıyoruz.
- Denetleyicide, metin kutusu değerinin başlangıç değerini 'AngularJS' metnine ayarlıyoruz. Bu, form ilk görüntülendiğinde metin kutusuna bazı varsayılan değerler ayarlamak için yapılıyor. Metin kutusu alanı için doğrulamanın nasıl gerçekleştiğini daha iyi gösterir.
Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:
Form ilk görüntülendiğinde, metin kutusu "AngularJS" değerini görüntüler ve "gönder düğmesi" etkinleştirilir. Metni kontrolden çıkarır çıkarmaz, doğrulama hata mesajı etkinleştirilir ve Gönder düğmesi devre dışı bırakılır.
Yukarıdaki ekran görüntüsü iki şeyi gösteriyor
- Gönder düğmesi devre dışı
- Konu metin kutusunda konu adı yok. Bu nedenle, "Kullanıcı adı gerekli" hata mesajını tetikler.
AngularJS Otomatik Doğrulama kullanarak form doğrulama
AngularJS'de, doğrulama için özel kod yazmaya gerek kalmadan bir form üzerindeki tüm kontrolleri otomatik olarak doğrulayan bir tesis vardır. Bu, "jcs-AutoValidate" adlı özel bir modül eklenerek yapılabilir.
Bu modül yerinde olduğunda, doğrulamayı gerçekleştirmek veya hata mesajlarını göstermek için herhangi bir özel kod yerleştirmenize gerek yoktur. Bunların tümü JCS-AutoValidate içindeki kodla işlenir.
Bunun nasıl başarılacağına dair basit bir örneğe bakalım.
Bu örnekte,
Gerekli bir alan olan metin kutusu kontrolüne sahip basit bir forma sahip olacağız. Bu kontrol doldurulmazsa bir hata mesajı görüntülenmelidir.
Event Registration Guru99 Event
Kod Açıklaması:
- İlk olarak, tüm otomatik doğrulama işlevlerine sahip "jcs-auto-validate.js" komut dosyasını eklememiz gerekir.
- "Div etiketi" dahil her öğenin bir "form-group" sınıfına yerleştirildiğinden emin olmamız gerekir.
- Ayrıca, giriş denetimleri gibi her öğenin (giriş denetimi, aralık denetimi, div denetimi vb. Gibi bir HTML öğesi olan) form grubu sınıfına da yerleştirildiğinden emin olunması gerekir.
- AngularJS JS modülünüze jcs-autovalidate'i ekleyin.
Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:
Varsayılan olarak, kodunuzu çalıştırdığınızda yukarıdaki form HTML koduna göre gösterilecektir.
Formu Göndermeye çalışırsanız, "Bu alan gereklidir" şeklinde bir hata mesajı açılır. Bütün bunlar JCS-AutoValidate seçeneği ile yapılır.
Ladda düğmeleriyle kullanıcı geri bildirimleri
"Ladda" düğmeleri, düğmelere basıldığında onlara görsel bir efekt vermek için JavaScript'in üstündeki düğmeler için oluşturulmuş özel bir çerçevedir.
Bu nedenle, bir düğmeye "ladda" niteliği verilirse ve basılırsa, bir döndürme efekti gösterilecektir. Ayrıca, düğmenin ek görsel efektler sağlaması için farklı veri stilleri vardır.
"Ladda" düğmelerinin nasıl çalıştığını görmenin bir örneğine bakalım. Gönder düğmesi olan basit bir form göreceğiz. Düğmeye basıldığında, düğme üzerinde bir döndürme efekti gösterilecektir.
Event Registration Guru99 Event
Kod Açıklaması:
- "Gönderme" adlı bir işlevi çağırmak için "ng-submit" direktifini kullanıyoruz. Bu işlev, gönder düğmesinin ladda özniteliğini değiştirmek için kullanılacaktır.
- Ladda niteliği, ladda çerçevesinin özel bir niteliğidir. Döndürme efektini kontrole ekleyen bu özelliktir. Ladda özniteliğinin değerini gönderim değişkenine ayarlıyoruz.
- Veri stili özelliği yine ladda çerçevesi tarafından sunulan ve gönder düğmesine farklı bir görsel efekt ekleyen ek bir özelliktir.
- Ladda çerçevesinin çalışması için AngularJS.JS uygulamasına 'AngularJS-ladda' modülünün eklenmesi gerekir.
- Başlangıçta, 'gönderme' adlı bir değişkenin değerini yanlış olarak tanımlıyor ve ayarlıyoruz. Bu değer, gönder düğmesinin ladda özelliği için ayarlanır. Başlangıçta bunu false olarak ayarlayarak, gönder düğmesinin henüz ladda etkisine sahip olmasını istemediğimizi söylüyoruz.
- Gönder düğmesine basıldığında çağrılan bir işlevi açıklıyoruz. Bu işlevde, 'boyun eğmeyi' doğru olarak ayarlıyoruz. Bu, ladda etkisinin gönder düğmesine uygulanmasına neden olacaktır.
Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:
Form ilk görüntülendiğinde, gönder düğmesi basit formunda gösterilir.
Gönder düğmesine basıldığında, denetleyicideki gönderme değişkeni doğru olarak ayarlanır. Bu değer, düğmenin döndürme etkisine neden olan gönder düğmesinin "ladda" özelliğine geçirilir.
Özet
- Metin kutusu HTML kontrolleri için doğrulama, 'gerekli' özniteliği kullanılarak yapılabilir.
- HTML5'te, kendi doğrulama setlerini sağlayan şifre, e-posta ve numara gibi yeni kontroller eklenmiştir.
- AngularJS'de form doğrulama, bir form kontrolünün $ dirty, $ valid, $ geçersiz ve $ bozulmamış değerlerine bakılarak halledilir.
- AngularJS uygulamalarında otomatik doğrulama, JCS-otomatik doğrulama modülü kullanılarak da gerçekleştirilebilir.
- Düğmeye basıldığında kullanıcıya biraz gelişmiş bir görsel his vermek için bir Angular.js uygulamasına Ladda düğmeleri eklenebilir.