En son web geliştirme öğreticiler
 

AngularJS Form Doğrulaması

❮ Önceki Sonraki Bölüm ❯

Angularjs giriş verilerini doğrulamak.

Form Doğrulama

Angularjs istemci tarafı form doğrulama sunmaktadır.

Angularjs formu ve giriş alanları (giriş, textarea, seçme) durumunu izler ve siz mevcut durumu hakkında kullanıcıyı bilgilendirmek sağlar.

Angularjs ayrıca dokundu veya değiştirilmiş ya da değil olup olmadığını hakkında bilgi sahibidir.

Standart HTML5 girişini doğrulamak için niteliklerini kullanabilir veya kendi doğrulama işlevlerini yapabilirsiniz.

Istemci tarafında doğrulama tek başına değil, güvenli bir kullanıcı girişi. Sunucu tarafı doğrulama da gereklidir.

gereklidir

Kullanım HTML5 özelliği required giriş alanı doldurulması gerektiğini belirtmek için:

Örnek

Giriş alanı gereklidir:

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Kendin dene "

E-mail

HTML5 tipi kullanın email değeri email olması gerektiğini belirtmek için:

Örnek

giriş alanı, bir e-posta olmak zorundadır:

<form name="myForm">
<input name="myInput" ng-model="myInput" type="email">
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Kendin dene "

Form Devlet ve giriş durumu

Angularjs sürekli form ve giriş alanları hem durumunu güncelliyor.

Giriş alanları aşağıdaki durumlarda:

  • $untouched alanında henüz dokunulmaz değil
  • $touched alan dokundu
  • $pristine alan henüz değiştirilmedi
  • $dirty alan modifiye edilmiş
  • $invalid alan içerik geçerli değil
  • $valid alan içerik geçerlidir

Bunlar giriş alanında tüm özelliklerinin, ve ya vardır true ya false .

Formlar aşağıdaki durumlarda:

  • $pristine Hayır alanları henüz değiştirilmiştir
  • $dirty Bir veya daha fazla modifiye edilmiş
  • $invalid biçimli içerik geçerli değil
  • $valid biçimli içerik geçerlidir
  • $submitted form gönderildiğinde

Onlar formun tüm özellikleri vardır ve ya vardır true ya false .

Sen kullanıcıya anlamlı mesajlar göstermek için bu durumlarını kullanabilirsiniz. Bir alan gereklidir ve kullanıcı boş bırakırsa Örnek, sen kullanıcıya bir uyarı vermelidir:

Örnek

Alan dokundu VE boş olup olmadığını bir hata mesajı göster:

<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>
Kendin dene "

CSS Sınıfları

Angularjs onların devletleri bağlı formları ve giriş alanlarında CSS sınıfları ekler.

Aşağıdaki sınıflar ilave ya da giriş alanları kaldırılır:

  • ng-untouched alan henüz dokunulmaz değil
  • ng-touched alanı değinilmiştir
  • ng-pristine alan henüz modifiye edilmemiştir
  • ng-dirty alan modifiye edilmiş
  • ng-valid alan içerik geçerlidir
  • ng-invalid alan içerik geçerli değildir
  • ng-valid- key her doğrulama için bir anahtar. Örnek: ng-valid-required , yararlı birden fazla şey varken valide edilmesi gerektiğini
  • ng-invalid- key Örnek: ng-invalid-required

Aşağıdaki sınıflar formlarından ilave ya da kaldırılır:

  • ng-pristine Hayır alanları henüz değiştirilmedi
  • ng-dirty Bir veya daha fazla alanlar değiştirildi
  • ng-valid bir şekilde içerik geçerlidir
  • ng-invalid biçimli içerik geçerli değildir
  • ng-valid- key her doğrulama için bir anahtar. Örnek: ng-valid-required , yararlı birden fazla şey varken valide edilmesi gerektiğini
  • ng-invalid- key Örnek: ng-invalid-required

Temsil ettiği bir değer ise sınıfları kaldırılır false .

uygulamanıza daha iyi ve daha sezgisel bir kullanıcı arayüzü vermek için bu sınıflar için stilleri ekleyin.

Örnek

Standart CSS kullanarak, stilleri uygulayın:

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>
Kendin dene "

Formlar ayrıca tarz olabilir:

Örnek

Değiştirilmemiş için stilleri uygulayın (pristine) formları ve modifiye formlar için:

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>
Kendin dene "

Özel Doğrulama

Kendi doğrulama işlevi oluşturmak için biraz daha karmaşıktır. Eğer uygulamanın yeni bir yönerge ekleyin ve belirli belirtilen bağımsız değişken içeren bir işlev içinde doğrulama ile uğraşmak zorunda.

Örnek

Özel bir doğrulama işlevi içeren, kendi yönergesini oluşturun ve kullanarak başvurmak my-directive .

Değeri karakteri içeriyorsa alanı sadece geçerli olacaktır "e" :

<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>

<script>
var app = angular. module('myApp', []) ;
app. directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, mCtrl) {
      function myValidation(value) {
        if (value. indexOf("e") > -1) {
          mCtrl.$ setValidity('charE', true) ;
        } else {
          mCtrl.$ setValidity('charE', false) ;
        }
        return value;
      }
      mCtrl.$parsers. push(myValidation) ;
    }
  };
});
</script>
Kendin dene "

Örnek Açıklaması:

HTML'de, yeni direktif özelliğini kullanarak anılacaktır my-directive .

JavaScript biz adlı yeni yönergesini ekleyerek başlayın myDirective .

Bir yönergeyi adlandırırken, bir deve vaka adını kullanması gerektiğini hatırlayın myDirective ama bunu çağrılırken, kullanmak gerekir - ayrılmış ad, my-directive .

Eğer biz gerektiren belirtmek nereye Sonra, bir nesneyi döndürmek ngModel ngModelController olduğunu.

Dördüncü argüman, bazı argümanları alır bir bağlantı işlevi olun mCtrl olduğu ngModelController ,

Sonra adında bu durumda, bir işlev belirtmek myValidation bir argüman alır, bu argüman giriş öğesinin değeridir.

Deney değeri harfini içeriyorsa "e" ve birine modeli kontrolörün geçerliliğini ayarlamak true veya false .

Sonunda, mCtrl.$parsers. push(myValidation) ; mCtrl.$parsers. push(myValidation) ; katacak myValidation her seferinde giriş değeri değişiklikleri çalıştırılacaktır diğer fonksiyonların bir dizi, işlevi.

Doğrulama Örnek

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<h2>Validation Example</h2>

<form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>

<p>Username:<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>Email:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">Email is required.</span>
  <span ng-show="myForm.email.$error.email">Invalid email address.</span>
  </span>
</p>

<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = '[email protected]';
});
</script>

</body>
</html>
Kendin dene "

HTML form nitelik novalidate varsayılan tarayıcı doğrulama devre dışı bırakmak için kullanılır.

Örnek Açıklaması

Angularjs yönergesi ng model model giriş elemanları bağlanır.

Kullanıcı ve e-posta: Model nesnesi iki özelliğe sahiptir.

Çünkü ng-show, renk ile açıklıklı: kullanıcı veya e-posta kirli ve $ geçersiz $ olduğunda kırmızı yalnızca görüntülenir.


❮ Önceki Sonraki Bölüm ❯