AngularJS ile veri girişini doğrulayın

Tek sayfalık uygulamalar oluşturmaya çalışırken, vurgulayabileceğimiz noktalardan biri veri girişidir, bu tür işlevler genellikle bir biçimAçıkçası, bir kullanıcıdan veri talep edeceksek, bunların hatalarla gelmediğini doğrulamamız gerekir.
neyse ki AngularJS Basit bir şekilde doğrulama yapmamızı sağlayan bazı dahili mekanizmalara sahiptir, böylece formun yalnızca veri formatı koşulları karşılandığında gönderilmesine izin verir.
İhtiyacımız olan ilk şey, bir biçim, bazı alanlar yerleştireceğiz, örneğin ad, soyad ve e-posta alanı, genellikle bunlar en çok kullanılan alan türleridir ve bu bize doğrulama oluşturma fırsatı verecektir. Sahip olduğumuz ilk kodu görelim:

İsim:Soyadı:E-posta:Yaş:Göndermek

Eğer bakarsak, özelliklerini kullandık HTML alanları doğrulamak için, örneğin özelliği yerleştirerek gereklidir gerekli alanlar için bunun yalnızca daha yeni veya uyumlu tarayıcılarda çalışacağını düşüneceklerdir. HTML5 sadece, ama kullandığımız zaman AngularJS, uygulamayı uyumlu olmayan bir tarayıcıda açarsak, bu alternatif doğrulamaları dolduracaktır. HTML5.
Yaş alanının, tip doğrulama dışında iki özelliği olduğunu görüyoruz. AngularJS alan uzunluğu içindir, bu, toplamda yalnızca 1 ile 3 basamak arasındaki sayıları yerleştirebileceğimiz anlamına gelir.
Şimdiye kadar alıştırmamızla iyi gidiyoruz, ancak yine de verileri göndermek için her şeyin doğrulanması gerektiğini doğrulamalıyız, bunun için bunu yapmamıza izin veren bir denetleyici oluşturmalıyız, bunun için forma hangisini belirteceğiz? denetleyici kullanacak, satırı değiştireceğiz:

Aşağıdakiler tarafından:

Denetleyicinin içinde adlı bir özelliğe erişebiliriz. $ geçerli, formumuzun veri gönderebilmek için geçerli olup olmadığını gösterecek olan, bunun için veri gönder düğmesinin satırını aşağıdaki ile değiştirmeliyiz:

Göndermek

Değişikliğin yapılması aşağıdaki gibi olmalıdır:

Göndermek

Son olarak, verilerimizi işleyeceğimiz AngularJS'de denetleyicimizi oluşturabiliriz:

 function AddControllerUser ($ kapsam) {$ kapsam.message = ''; $scope.addUser = function () {$scope.message = 'Teşekkürler,' + $scope.user.name + ', eklendi!'; }; } 

Bu bize tarayıcımızda aşağıdaki gibi bir sonuç vermelidir:

Veri olmadığı için gönder butonunun devre dışı olduğunu görüyoruz, aşağıdaki resimde gördüğümüz gibi uygun verileri doldurduğumuzda bu değişecek:

Yanlış formatta bir e-posta yerleştirmiş olsaydık, düğme etkinleştirilmeyecekti, o zaman nasıl olduğunu görüyoruz. AngularJS Bir form kadar basit bir şey geliştirmemizi kolaylaştırdı ve bununla bu öğreticiyi bitirdik, yalnızca özelliklerini kullanarak bir formu eksiksiz bir şekilde doğrulayabildik. HTML5 Ve biraz AngularJS.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.