AngularJS Form Gönderiminde Doğrulama: $dirty, $valid ve $invalid

⚡ Akıllı Özet

AngularJS'de form doğrulama, bir forma girilen verilerin sunucuya ulaşmadan önce doğru ve eksiksiz olup olmadığını kontrol eder. Burada, düz HTML5 özniteliklerinden kapsam özelliklerine ve otomatik doğrulama modüllerine kadar dört yaklaşım ele alınmaktadır.

🧩 HTML5 Nitelikleri: Gerekli özellik ve e-posta, parola ve sayı giriş türleri, herhangi bir betik yazmaya gerek kalmadan tarayıcıya özgü kontroller sağlar.
🔍 Devlet Mülkleri: AngularJS, adlandırılmış bir formun içindeki her adlandırılmış kontrol için `$dirty`, `$pristine`, `$valid` ve `$invalid` değişkenlerini kullanıma sunar.
???? ️ İsimlendirme Şartı: Hem formun hem de her bir kontrolün bir ad özniteliğine ihtiyacı vardır, çünkü doğrulama durumu formName.controlName şeklinde belirtilir.
???? Yerel Açılır Pencereleri Engelle: Forma `novalidate` eklemek, tarayıcının gönderimi engellemesini durdurur, böylece AngularJS bunu işleyebilir.
💬 Mesaj Ekranı: ngMessages modülü, üst üste yığılmış ng-show yönergelerinin yerini alır ve hataları öncelik sırasına göre tek tek gösterir.
⚙️ Otomatik Doğrulama: jcs-autoValidate modülü, herhangi bir özel işaretleme gerektirmeden her kontrol için hata mesajları oluşturur.
🔘 Gönderim Geri Bildirimi: Ladda butonu, gönderim işlemi devam ederken bir dönen simge uygulayarak kullanıcıya ilerlemeyi gösterir.

Devamını Oku

AngularJS'de Form Doğrulama

Form Doğrulama AngularJS'de doğrulama, bir forma girilen verilerin doğru ve eksiksiz olup olmadığını doğrulama işlemidir. Kullanıcı formu gönderdiğinde, bilgiler sunucuya gönderilmeden önce doğrulama işlemi gerçekleşir. Doğrulama işlemi, giriş alanlarının mümkün olan en iyi şekilde doğru doldurulmasını sağlar.

Gerçek dünyadan bir örnek olarak, tam erişim izni verilmeden önce bir kayıt formunun doldurulmasını gerektiren bir siteyi ele alalım. Kayıt sayfasında kullanıcı adı, şifre, e-posta adresi vb. için giriş alanları bulunacaktır.

Örneğin, e-posta adresi her zaman şu formatta olmalıdır: kullanıcıadı@site.alan adıEğer biri sadece kullanıcı adını girerse, doğrulama başarısız olur. Doğrulama, bilgiler daha fazla işlem için sunucuya gönderilmeden önce bu temel kontrolleri gerçekleştirir.

⚠️ Sürüm notu: AngularJS (1.x dalı) 31 Aralık 2021 tarihinde kullanım ömrünün sonuna ulaştı ve artık güvenlik yamaları almıyor. Aşağıdaki teknikler eski uygulamalar için geçerliliğini koruyor; modern Angular aynı işi şablon tabanlı veya reaktif formlarla hallediyor.

HTML5 kullanarak form doğrulama

Form doğrulama, bir web formuna girilen bilgilerin sunucuya gönderilmeden önce önceden doğrulanması işlemidir. İstemci tarafında doğrulama yapmak tercih edilir, çünkü bu işlem, formun gidiş-dönüş işleminden sonra tekrar sunulmasına kıyasla çok daha az ek yük getirir.

Aşağıdaki örnekte, kullanıcının kullanıcı adı, şifre, e-posta adresi ve yaşını girdiği basit bir kayıt formu gösterilmektedir. Form, bilgilerin doğru girildiğinden emin olmak için doğrulama kontrolleri içermektedir.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<h1>Guru99 Global Event</h1>

<form>
    Enter your user name:
    <input type="text" name="name" required><br><br>

    Enter your password:
    <input type="password" name="password"><br><br>

    Enter your email:
    <input type="email" name="email"><br><br>

    Enter your age:
    <input type="number" name="age"><br><br>

    <input type="submit" value="Submit">
</form>
</body>
</html>

⚠️ Bu sayfadaki tüm ilanlarda düzeltmeler yapılmıştır. Orijinaller ilan edildi chrset="UTF 8"Bu, ne geçerli bir özellik ne de geçerli bir kodlamadır ve AngularJS üç kez yüklendi. angular-route.js Öncelikle, rota modülünün henüz yüklenmemiş bir çerçeveye kaydolması nedeniyle hata oluşuyor, ardından angular.min.js hem de angular.jsAynı kütüphaneyi iki kez ziyaret ettiler. Ayrıca şunları da çektiler: bootstrap.css bir ile <script> Etiket kullanılmadığı için hiçbir stil uygulanmadı. Artık her liste bir kütüphane (sürüm 1.8.3) yüklüyor ve stil sayfasını doğru şekilde bağlıyor. Düzen dolgusu tekrarlanan öğelerden oluşturuldu.   Varlıklar kaldırıldı.

Code açıklama

Metin giriş türü için, required Bu özellik, form gönderildiğinde metin kutusunun boş bırakılamayacağı anlamına gelir.
Bir sonraki giriş türü paroladır. Tür parola olarak işaretlendiği için alana girilen metin gizlenir.
Giriş türü e-posta olarak belirtildiğinden, kutudaki metnin kalıpla eşleşmesi gerekir. isim@site.alan adı.
Giriş türü sayı olarak işaretlendiğinde, klavyeden yazılan karakterler alan tarafından kabul edilmez.

Çıktı

Doğrulama işleminin nasıl çalıştığını görmek için, hiçbir şey girmeden Gönder düğmesine tıklayın.

Açılan pencerede alanın doldurulması gerektiği belirtiliyor, bu nedenle zorunlu olarak işaretlenen kontrol boş bırakıldığında gönderimi engelliyor.

Parola kontrol alanına bir değer girildiğinde, karakterler '*' sembolüyle gizlenmiş olarak görünür.

Hatalı bir e-posta adresi girip Gönder'e tıkladığınızda, @ sembolünü isteyen bir açılır pencere belirir. Son olarak, yaş kontrolüne yazılan karakterler asla görünmez, çünkü alan yalnızca sayıları kabul eder.

Tarayıcı açılır pencerelerinin kurulumu hızlıdır, ancak metinleri ve stilleri değiştirilemez. İşte bu noktada AngularJS doğrulama özellikleri devreye giriyor.

$dirty, $valid, $invalid, $pristine kullanarak form doğrulama

angularjs Doğrulama için kendi özelliklerini sağlar. Her adlandırılmış denetimde aşağıdaki özellikler gösterilir:

$kirli – Kullanıcı kontrolle etkileşime girdi
$geçerli – Alan içeriği geçerlidir
$geçersiz – Alan içeriği geçersiz
$bozulmamış – Kullanıcı henüz kontrolle etkileşime girmedi

Aşağıda AngularJS doğrulama işlemini gerçekleştirmek için izlenecek adımlar yer almaktadır.

) 1 Adım Kullan novalidate Formu tanımlarken bu özelliği kullanın. Bu, tarayıcıya doğrulamanın AngularJS tarafından yapılacağını bildirir.

) 2 Adım Formun bir adı tanımlanmış olduğundan emin olun, çünkü bu ad doğrulama aşamasına ulaşmak için kullanılır.

) 3 Adım Her bir kontrolün ayrıca şunlara sahip olduğundan emin olun: name Aynı nedenden dolayı, özellik için de aynı şey geçerli. Adı olmayan bir kontrol, formda asla kaydedilmez.

) 4 Adım Kullan ng-gösteri $dirty, $invalid ve $valid özelliklerini kontrol etme yönergesi.

Aşağıdaki örnekte, kullanıcının Konu adı girdiği tek bir metin alanı bulunmaktadır. Bu alan boş bırakılırsa, doğrulama hatası tetiklenir ve mesaj gösterilir.

<form ng-app="DemoApp" ng-controller="DemoController"
      name="myForm" novalidate>
    <p>Topic Name:<br>
        <input type="text" name="user" ng-model="user" required>

        <span style="color:red"
              ng-show="myForm.user.$dirty && myForm.user.$invalid">
            <span ng-show="myForm.user.$error.required">Username is required</span>
        </span>
    </p>
    <p>
        <input type="submit" ng-disabled="myForm.$invalid">
    </p>
</form>

<script>
    var app = angular.module("DemoApp", []);

    app.controller("DemoController", function($scope) {
        // Seed the textbox so the form starts in a valid state
        $scope.user = "AngularJS";
    });
</script>

⚠️ İki mantık hatası düzeltildi. Orijinal sürüm, düğmeyi devre dışı bırakmıştı. ng-disabled="myForm.user.$dirty && myForm.user.$invalid". çünkü $dirty Kullanıcı alana dokunana kadar yanlış değer alır, düğme aynı kalır. etkin Dokunulmamış, boş bir form üzerinde, tam olarak engellemesi amaçlanan durum; myForm.$invalid Her ikisini de kapsar. Orijinal metin ayrıca varsayılan değeri de içerir. $scope.Display = function () { $scope.user = 'Angular'; }Hiçbir zaman çağrılmayan bir fonksiyon olduğundan, metin kutusu "AngularJS" yazmasına rağmen boş açılıyordu. Atama artık doğrudan, değer olarak tırnak içindeki metin kullanılarak yapılıyor.

Code açıklama

Forma “myForm” adı verilmiştir. Bu, doğrulama kontrollerine erişebilmek için gereklidir.
MKS novalidate Bu özellik, tarayıcının doğrulama işlemini durdurmasını sağlar, böylece AngularJS bunun yerine doğrulama işlemini yapabilir.
`ng-show` yönergesi “$dirty” ve “$invalid” özelliklerini kontrol eder. Metin kutusu değiştirilmişse, `$dirty` değeri true olur; değeri boşsa, `$invalid` değeri true olur. Her ikisi de true olduğunda, kırmızı metinli `span` etiketi görüntülenir.
İç içe geçmiş kontrol, gerekli bir denetimin değeri olmadığında doğru olan "$error.required" özelliğini okur ve "Kullanıcı adı gereklidir" mesajını görüntüler.
Gönder düğmesi şu şekilde devre dışı bırakıldı: ng-disabled Formun tamamının geçersiz olduğu durumlarda.
Denetleyici, başlangıç metin kutusu değerini "AngularJS" olarak ayarlar, böylece form geçerli bir durumda açılır ve metin silindikçe doğrulama daha kolay gözlemlenebilir.

Çıktı

Form ilk görüntülendiğinde, metin kutusunda "AngularJS" yazısı görünür ve gönder düğmesi etkinleşir. Metin silindiği anda hata mesajı görünür ve düğme devre dışı kalır.

Yukarıdaki ekran görüntüsü iki şeyi gösteriyor:

Gönder düğmesi devre dışı bırakıldı.
Konu metin kutusunda konu adı bulunmadığı için "Kullanıcı adı gereklidir" hata mesajı gösteriliyor.

ngMessages ile Doğrulama Hataları Nasıl Gösterilir?

Yukarıdaki model işe yarıyor, ancak ölçeklenebilir değil. Dört kısıtlamaya sahip bir alan, dört iç içe geçmiş kısıtlamaya ihtiyaç duyar. ng-show Bu aralıklar arasında birkaç arıza meydana geldiğinde, tüm mesajlar birlikte görünür. ngMessages AngularJS ekibi tarafından ayrı olarak sunulan modül, her iki sorunu da çözüyor: mesajları yazılma sırasına göre, her seferinde yalnızca bir mesaj gösteriyor.

Modülü yükleyin ve bağımlılık olarak ekleyin.

<script src="https://code.angularjs.org/1.8.3/angular-messages.js"></script>
<script>
    angular.module("DemoApp", ["ngMessages"]);
</script>

Bu durumda işaretleme, bir dizi koşul yerine bir kurallar listesi olarak okunur.

<input type="text" name="user" ng-model="user"
       required ng-minlength="4" ng-maxlength="20">

<div style="color:red" ng-messages="myForm.user.$error"
     ng-if="myForm.user.$dirty">
    <div ng-message="required">A topic name is required</div>
    <div ng-message="minlength">Use at least 4 characters</div>
    <div ng-message="maxlength">Use no more than 20 characters</div>
</div>

Bu sistemin pratikte iyi çalışmasını sağlayan üç detay var. ng-messages Öznitelik, kontrolün işaret ettiği noktalara dikkat çekiyor. $error Bir boolean değer yerine bir nesne olduğundan, hiçbir koşulun tekrarlanmasına gerek yoktur. Sadece ilk eşleşen değer seçilir. ng-message Bu, boş bir alanın uzunluğuyla ilgili şikayet etmek yerine, gerekli olduğunu bildirmesi anlamına gelir. ng-messages-multiple Her hatanın gerçekten listelenmesi gerektiğinde bu davranış tersine döner.

Şalping blokta ng-if="myForm.user.$dirty" Kullanıcı bir şey yazana kadar formu sessiz tutar. Yerine koyma $touched için $dirty Bu durum, dikkat dağılana kadar mesajın iletilmesini daha da geciktirir; bu da uzun bir kayıt formunda genellikle daha dostane bir tercihtir.

Bir uyarı: ngMessages Paketler ayrı bir dosya olarak gönderildiğinden, script etiketini veya modül bağımlılığını unutmak, bloğun hiçbir şey oluşturmamasına ve bunu açıklayacak herhangi bir konsol hatası olmamasına neden olur.

Mesajları elle yazmak hassas ancak tekrarlayıcıdır. Bir sonraki bölümde, bunları otomatik olarak oluşturan bir modül ele alınacaktır.

AngularJS Otomatik Doğrulama kullanarak form doğrulama

AngularJS, doğrulama veya hata mesajları için özel kod yazmaya gerek kalmadan, bir formdaki tüm kontrolleri otomatik olarak doğrulayabilir. Bu, "jcs-autoValidate" adlı bir topluluk modülünün dahil edilmesiyle yapılır.

Bu modül sayesinde, doğrulama işlemini çalıştırmak veya mesajları görüntülemek için özel bir koda gerek kalmaz; her şey jcs-autoValidate içinde halledilir.

Aşağıdaki örnekte, tek bir zorunlu metin kutusu içeren basit bir form bulunmaktadır. Kontrol kutusu doldurulmazsa bir hata mesajı görüntülenir.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="lib/jcs-auto-validate.min.js"></script>
</head>
<body>
<h1>Guru99 Event</h1>

<div ng-app="DemoApp">
    <form name="myForm" novalidate>
        <div class="form-group">
            <label for="user">Topic Name:</label>
            <input class="form-control" type="text"
                   id="user" name="user" ng-model="user" required>
        </div>
        <div class="form-group">
            <input type="submit">
        </div>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', ['jcs-autoValidate']);
</script>
</body>
</html>

⚠️ Düzeltme: Orijinal metinde kontrol grubu şu şekilde tanımlanmıştır: id="user" Sadece. jcs-autoValidate, form aracılığıyla denetime ulaşır, bu nedenle name Bu özellik zorunludur ve bu özellik olmadan mesaj asla görünmedi. Orijinalinde ayrıca iki farklı AngularJS sürümü de yüklendi, 1.6.4 sürümünden itibaren. Google CDN, 1.6.9 ile birlikte kullanıldı ve hiçbir zaman bağlantı kurulmadı. Bootstrap Örnek, kendisine bağlı olsa bile form-group hem de form-control Hata metnini konumlandırmak için kullanılan sınıflar.

💡 Not: jcs-autoValidate bir topluluk projesidir ve artık aktif olarak bakımı yapılmamaktadır. Mevcut AngularJS uygulamalarında kullanılabilir olmaya devam etmektedir, ancak yerleşik özelliği artık desteklenmemektedir. ngMessages Daha önce gösterilen yaklaşım, yeni her şey için daha güvenli bir seçimdir.

Code açıklama

Otomatik doğrulama işlevlerinin tamamını içeren “jcs-auto-validate.js” betiği de dahil edilmiştir.
Her bir kontrol ve onu çevreleyen div, modülün mesajını ilettiği "form-group" sınıfının içine yerleştirilir.
Kontrol hem bir kimlik hem de bir değer taşır. name, ve Bootstrap sağlar form-control stil.
“jcs-autoValidate” modülü, AngularJS modülünün bir bağımlılığı olarak listelenmiştir.

Çıktı

Varsayılan olarak form, yazıldığı gibi aynen görüntülenir.

Boş formu göndermek, tamamen jcs-autoValidate tarafından oluşturulan "Bu alan zorunludur" mesajını görüntüler. Form doğrulandıktan sonra, kullanıcının form gönderilirken gördüğü şey geriye kalan sorudur.

Ladda düğmeleriyle kullanıcı geri bildirimleri

"Ladda" butonları, şu yapı üzerine inşa edilmiş bir çerçevedir: JavaSenaryo Bu, düğmelere basıldığında görsel bir efekt sağlayan bir özelliktir.

Bir butona “ladda” özelliği verilip basıldığında, dönme efekti gösterilir. Ek görsel efektler için farklı veri stilleri mevcuttur.

Aşağıdaki örnekte, gönder düğmesi bulunan basit bir form gösterilmektedir. Düğmeye basıldığında, üzerinde dönme efekti belirir.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="lib/angular-ladda.min.js"></script>
</head>
<body>
<h1>Guru99 Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <form name="myForm" novalidate ng-submit="submit()">
        <button class="btn btn-primary" type="submit"
                ladda="submitting" name="sbutton"
                data-style="expand-right">Submit</button>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', ['angular-ladda']);

    app.controller('DemoController', function($scope) {
        $scope.submitting = false;

        $scope.submit = function() {
            $scope.submitting = true;
        };
    });
</script>
</body>
</html>

⚠️ Düzeltme: orijinal yüklendi angular-ladda.js hem de angular-ladda.min.js Bu işlem, aynı modülü iki kez kaydederek iki farklı AngularJS sürümünü de beraberinde getirdi. Ayrıca, aynı modülün iki kez kaydedilmesine ve iki farklı AngularJS sürümünün de dahil edilmesine neden oldu. jcs-autoValidate Bu örnekte asla kullanılmayan bir bağımlılık olarak. Her kütüphanenin bir kopyası buraya yüklenir.

Code açıklama

"ng-gönder"" yönergesi, düğmenin ladda özelliğini değiştiren "submit" adlı bir işlevi çağırır.
Ladda özniteliği Ladda çerçevesine aittir ve dönme efektini ekler. Değeri şunlara bağlıdır: submitting değişkeni.
`data-style` özelliği, farklı bir görsel efekt seçen başka bir Ladda özelliğidir.
Çerçevenin çalışması için 'angular-ladda' modülünün AngularJS uygulamasına eklenmesi gerekmektedir.
MKS submitting Değişken false olarak başlatıldığı için düğme dönme efekti olmadan çalışmaya başlar.
Gönderme işlevi ayarlar submitting Bu değer true olarak ayarlanır ve etkiyi uygular. Gerçek bir uygulamada, sunucu yanıt verdiğinde false olarak sıfırlanır, aksi takdirde düğme sonsuza kadar döner.

Çıktı

Form ilk görüntülendiğinde, gönder düğmesi sade haliyle gösterilir.

Düğmeye basıldığında, submitting Değişken true olarak ayarlanmıştır. Bu değer, düğmenin "ladda" özelliğine ulaşarak dönme efekti oluşturur.

SSS

Değer değiştiğinde `$dirty` true olur. Alan odak kaybettiğinde `$touched` true olur. Kullanıcı başka bir alana geçene kadar hatayı geciktirmek için `$touched` kullanın; bu, `$dirty`'ye kıyasla daha az agresif bir yaklaşım hissi verir.ping.

Örneğin ng-pattern=”/^[0-9]{6}$/” şeklinde bir normal ifadeyle ng-pattern yönergesini ekleyin. Hata daha sonra $error.pattern olarak ortaya çıkar ve ngMessages bunu herhangi bir yerleşik kısıtlama gibi raporlayabilir.

Evet. Yapay zeka araçları işaretlemeyi okur ve eşleşen gerekli, ng-pattern ve ngMessages bloklarını üretir. Oluşturulan e-posta ve telefon kalıpları genellikle geçerli girdileri reddettiği için düzenli ifadeleri her zaman gözden geçirin.

Yapay zekâ asistanları, üç yaygın nedeni hızlıca kontrol eder: formda veya denetimde eksik bir ad özniteliği, eksik bir ng-model ve tarayıcının gönderimi önce yakalaması için novalidate'in devre dışı bırakılması.

Hayır. Kullanıcı deneyimini iyileştirir ve gidiş-dönüş işlemlerini azaltır, ancak herkes geliştirici araçlarıyla bunu atlatabilir. Tarayıcıda uygulanan her kural, sunucuda da tekrar uygulanmalıdır.

AngularJS Form Gönderiminde Doğrulama: $dirty, $valid ve $invalid

AngularJS'de Form Doğrulama

HTML5 kullanarak form doğrulama

Code açıklama

Çıktı

$dirty, $valid, $invalid, $pristine kullanarak form doğrulama

Code açıklama

Çıktı

ngMessages ile Doğrulama Hataları Nasıl Gösterilir?

AngularJS Otomatik Doğrulama kullanarak form doğrulama

Code açıklama

Çıktı

Ladda düğmeleriyle kullanıcı geri bildirimleri

Code açıklama

Çıktı

SSS

Bu yazıyı şu şekilde özetleyin:

Haber bültenine kaydolun

AngularJS'de Form Doğrulama

HTML5 kullanarak form doğrulama

Code açıklama

Çıktı

İLGİLİ MAKALELER

$dirty, $valid, $invalid, $pristine kullanarak form doğrulama

Code açıklama

Çıktı

ngMessages ile Doğrulama Hataları Nasıl Gösterilir?

AngularJS Otomatik Doğrulama kullanarak form doğrulama

Code açıklama

Çıktı

Ladda düğmeleriyle kullanıcı geri bildirimleri

Code açıklama

Çıktı

SSS

Bu yazıyı şu şekilde özetleyin:

Haber bültenine kaydolun