AngularJS Form Doğrulama

AngularJS, girdi verilerini doğrulayabilir.

Form Doğrulama

AngularJS, istemci tabanlı form doğrulaması sunar.

AngularJS, form ve girdi alanlarının (input, textarea, select) durumunu izler ve kullanıcıya mevcut durumu bildirmenize olanak tanır.

AngularJS, bu unsurların dokunulup dokunulmadığı veya değiştirilip değiştirilmediği hakkında bilgi içerir.

Girdiyi doğrulamak için standart HTML5 özelliklerini kullanabilir veya kendi doğrulama fonksiyonunuzu oluşturabilirsiniz.

İstemci doğrulama, kullanıcı girdisini tek başına koruyamamaktadır. Sunucu tarafı doğrulama da gereklidir.

zorunlu

HTML5 özelliklerini kullanın zorunlu Bu girdi alanını doldurmak zorunludur：

örnek

Bu girdi alanı zorunludur：

<form name="myForm">  
  <input name="myInput" ng-model="myInput" required>  
</form>  
<p>Girdi geçerlilik durumu:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Kendi kendine deneyin

email

HTML5 türünü kullanın email Bu değeri belirlemek e-posta olmalıdır：

örnek

Bu girdi alanı e-posta olmalıdır：

<form name="myForm">  
  <input name="myInput" ng-model="myInput" type="email">  
</form>  
<p>Girdi geçerlilik durumu:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Kendi kendine deneyin

Form durumları ve girdi durumları

AngularJS, form ve girdi alanlarının durumunu sürekli olarak günceller.

Girdi alanlarının aşağıdaki durumları vardır:

  • $untouched Bu alan henüz dokunulmamıştır
  • $touched Bu alan dokunulmuştur
  • $pristine Bu alan henüz değiştirilmemiştir
  • $dirty Bu alan değiştirilmiştir
  • $invalid Alan içeriği geçersiz
  • $valid Alan içeriği geçerli

Bu da tüm girdi alanlarının özellikleridir ve doğru veya yanlış olabilir.

Formun aşağıdaki durumları vardır:

  • $pristine Hiçbir alan henüz değiştirilmemiştir
  • $dirty Bir veya daha fazla alan değiştirilmiştir
  • $invalid Form içeriği geçersiz
  • $valid Form içeriği geçerli
  • $subscribed Form gönderilmiştir

Bunlar tüm formun özellikleridir ve doğru veya yanlış olabilir.

Bu durumları kullanarak kullanıcıya anlamlı mesajlar gösterebilirsiniz. Örneğin, bir alan zorunludur ve kullanıcı boş bırakırsa, kullanıcıya uyarı vermelisiniz:

örnek

Bu alan dokunulmuş ve boşsa, hata mesajı gösterin:

<input name="myName" ng-model="myName" required>  
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">İsim zorunludur.</span>

Kendi kendine deneyin

CSS sınıfları

AngularJS, form ve girdi alanlarının durumuna göre bu sınıfları ekler.

Aşağıdaki sınıflar girdi alanına eklenmiştir veya girdi alanından kaldırılmıştır:

  • ng-untouched Bu alan henüz dokunulmamıştır
  • ng-touched Bu alan dokunulmuştur
  • ng-pristine Bu alan henüz değiştirilmemiştir
  • ng-dirty Bu alan değiştirilmiştir
  • ng-valid Alan içeriği geçerli
  • ng-invalid Alan içeriği geçersiz
  • ng-valid-key Her seferinde bir anahtar doğrulayın. Örneğin:ng-valid-requiredbirden fazla zorunlu doğrulama içeren durumlar için çok faydalıdır
  • ng-invalid-key Örneğin:ng-invalid-required

Aşağıdaki sınıflar form veya formdan kaldırılmıştır:

  • ng-pristine Hiçbir alan henüz değiştirilmemiştir
  • ng-dirty Bir veya daha fazla alan değiştirilmiştir
  • ng-valid Form içeriği geçerli
  • ng-invalid Form içeriği geçersiz
  • ng-valid-key Her seferinde bir anahtar doğrulayın. Örneğin:ng-valid-requiredbirden fazla zorunlu doğrulama içeren durumlar için çok faydalıdır
  • ng-invalid-key Örneğin:ng-invalid-required

Sınıfın temsil ettiği değer falseise bu sınıflar silinecektir.

Bu sınıflara stil ekleyin, uygulamanıza daha iyi ve daha doğrusal bir kullanıcı arayüzü sağlayın.

örnek

Standart CSS ile stil uygulayın:

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

Kendi kendine deneyin

Formun stiline de ayarlayabilirsiniz.

örnek

Değiştirilmemiş (orijinal) form ve değiştirilmiş formlara stil uygula:

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

Kendi kendine deneyin

Özel Doğrulama

Kendi bir doğrulama fonksiyonu oluşturmak için bazı ipuçlarına ihtiyacınız olacak; yeni bir yönerge eklemelisiniz ve belirli belirtilmiş parametre işlevlerini kullanarak fonksiyon içeriğindeki doğrulamayı işlemelisiniz.

örnek

Kendi yönergenizi oluşturun, özelleştirilmiş bir doğrulama fonksiyonu içerir ve my-directive onun referansını alın.

Sadece değer "e" karakterini içerdiğinde bu alan geçerli olur:

<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>

Kendi kendine deneyin

Örnek Açıklanıyor:

HTML'de, yeni yönerge, my-directive adını

JavaScript'te, önce myDirective yeni yönergesi.

Unutmayın, bir yönerge adlandırırken, at koyuklu adlandırma kullanmanız gerekir, örneğin myDirectiveama onu çağırırken, tire ile ayrılmış adı kullanmanız gerekir, örneğin my-directive.

Ardından, ihtiyacımız olanları belirtilen bir nesneyi döndüren bir nesne döndürün ngModelyani ngModelController.

bir bağlantı fonksiyonu oluşturun, bu fonksiyon bazı parametreler alır, dördüncü parametre mCtrl dır ngModelController.

Ardından, adı myValidationkabul eder, bu da bir parametre alır ve bu parametre, giriş öğesinin değeridir.

Bu değeri "e" harfini içerip içermediğini test edin ve model kontrolcüsünün geçerliliğini true veya false.

Son olarak,mCtrl.$parsers.push(myValidation); olacaktır}} myValidation Fonksiyon eklenir, bu fonksiyonlar her input değeri değiştiğinde çalışır.

Doğrulama Örneği

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<h2>Doğrulama Örneği</h2>
<form ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Kullanıcı adı：<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">Kullanıcı adı zorunludur。<
  </span>
</p>
<p>Elektronik posta：<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">E-posta zorunludur.</span>
  <span ng-show="myForm.email.$error.email">Geçersiz e-posta adresi.</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 = 'Bill Gates';
  $scope.email = 'bill.gates@gmail.com';
});
</script>
</body>
</html>

Kendi kendine deneyin

HTML Formu Özellikleri novalidate Varsayılan tarayıcı doğrulamasını devre dışı bırakmak için kullanılır.

Örnek açıklaması:

AngularJS Düzenleyicileri ng-model Giriş elementini modelle bağlamak için.

Model nesnesi iki özelliklidir:user ve email.

Neden ng-showoldukça, yalnızca user veya email $dirty ve $invalid color:red ile span'ların görüntüleneceği zaman.