HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

AngularJS Form Doğrulaması

❮ Öncesi Sonraki ❯

AngularJS, giriş verilerini doğrulayabilir.

Form Doğrulama

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

AngularJS, formun ve giriş alanlarının (input, textarea, select) durumunu izler ve kullanıcıyı mevcut durum hakkında bilgilendirmenizi sağlar.

AngularJS ayrıca bunlara dokunulup dokunulmadığı veya değiştirilip değiştirilmediği hakkında da bilgi tutar.

Girişi doğrulamak için standart HTML5 niteliklerini kullanabilir veya kendi doğrulama işlevlerinizi oluşturabilirsiniz.

İstemci tarafı doğrulama, kullanıcı girişini tek başına güvence altına alamaz. Sunucu tarafı doğrulaması da gereklidir.

Gerekli

requiredGiriş alanının doldurulması gerektiğini belirtmek için HTML5 niteliğini kullanın :

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

e-posta

emailDeğerin bir e-posta olması gerektiğini belirtmek için HTML5 türünü kullanın :

Örnek

Giriş alanı bir e-posta olmalıdı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>

Form Durumu ve Giriş Durumu

AngularJS, hem form hem de giriş alanlarının durumunu sürekli olarak güncelliyor.

Giriş alanları aşağıdaki durumlara sahiptir:

  • $untouchedHenüz alana dokunulmadı
  • $touchedAlana dokunuldu
  • $pristineAlan henüz değiştirilmedi
  • $dirty Alan değiştirildi
  • $invalid Alan içeriği geçerli değil
  • $valid Alan içeriği geçerli

Bunların tümü giriş alanının özellikleridir ve ya true veya false.

Formlar aşağıdaki durumlara sahiptir:

  • $pristineHenüz hiçbir alan değiştirilmedi
  • $dirtyBir veya daha fazlası değiştirildi
  • $invalid Form içeriği geçerli değil
  • $valid Form içeriği geçerli
  • $submittedForm gönderildi

Bunların tümü formun özellikleridir ve ya true veya false.

Kullanıcıya anlamlı mesajlar göstermek için bu durumları kullanabilirsiniz. Örneğin, bir alan gerekliyse ve kullanıcı onu boş bırakırsa, kullanıcıya bir uyarı vermelisiniz:

Örnek

Alana dokunulduysa VE boşsa 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>

CSS Sınıfları

AngularJS, durumlarına bağlı olarak formlara ve giriş alanlarına CSS sınıfları ekler.

Aşağıdaki sınıflar giriş alanlarına eklenir veya bunlardan kaldırılır:

  • ng-untouchedHenüz alana dokunulmadı
  • ng-touchedAlana dokunuldu
  • ng-pristine Alan henüz değiştirilmedi
  • ng-dirty Alan değiştirildi
  • ng-valid Alan içeriği geçerli
  • ng-invalid Alan içeriği geçerli değil
  • ng-valid-keyHer doğrulama için bir anahtar . Örnek: ng-valid-required, doğrulanması gereken birden fazla şey olduğunda kullanışlıdır
  • ng-invalid-key Örnek: ng-invalid-required

Aşağıdaki sınıflar formlara eklenir veya formlardan çıkarılır:

  • ng-pristine Henüz hiçbir alan değiştirilmedi
  • ng-dirty Bir veya daha fazla alan değiştirildi
  • ng-valid Form içeriği geçerli
  • ng-invalid Form içeriği geçerli değil
  • ng-valid-keyHer doğrulama için bir anahtar . Örnek: ng-valid-required, doğrulanması gereken birden fazla şey olduğunda kullanışlıdır
  • ng-invalid-key Örnek: ng-invalid-required

Temsil ettikleri değer ise sınıflar kaldırılır false.

Uygulamanıza daha iyi ve daha sezgisel bir kullanıcı arabirimi sağlamak için bu sınıflara stiller ekleyin.

Örnek

Standart CSS kullanarak stilleri uygulayın:

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

Formlar ayrıca stillendirilebilir:

Örnek

Değiştirilmemiş (bozulmamış) formlar ve değiştirilmiş formlar için stiller uygulayın:

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

Özel Doğrulama

Kendi doğrulama işlevinizi oluşturmak biraz daha zor; Uygulamanıza yeni bir yönerge eklemeniz ve belirli belirli argümanlarla bir işlevin içindeki doğrulama ile ilgilenmeniz gerekir.

Örnek

Özel bir doğrulama işlevi içeren kendi yönergenizi oluşturun ve my-directive.

Alan yalnızca değer "e" karakterini içeriyorsa geçerli olacaktır:

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

Örnek Açıklama:

HTML'de, yeni yönergeye öznitelik kullanılarak başvurulacaktır my-directive.

JavaScript'te adlı yeni bir yönerge ekleyerek başlıyoruz myDirective.

Bir yönergeyi adlandırırken bir deve vakası adı kullanmanız gerektiğini myDirective, ancak onu çağırırken -ayrı bir ad kullanmanız gerektiğini unutmayın, my-directive.

Ardından, ihtiyacımız olduğunu belirttiğiniz  ngModelngModelController olan bir nesneyi döndürün.

Dördüncü argümanın , olduğu bazı argümanları alan bir bağlantı işlevi yapın mCtrl.ngModelController

Ardından, bir argüman alan, bu durumda adında bir fonksiyon belirtin myValidation, bu argüman giriş öğesinin değeridir.

Değerin "e" harfini içerip içermediğini test edin ve model denetleyicisinin geçerliliğini ya trueveya olarak ayarlayın false.

Sonunda, işlevi, giriş değeri her değiştiğinde yürütülecek olan bir dizi başka işleve ekleyecektir mCtrl.$parsers.push(myValidation);. myValidation

Doğrulama Örneği

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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>

HTML form özniteliği novalidate , varsayılan tarayıcı doğrulamasını devre dışı bırakmak için kullanılır.

Örnek Açıklama

AngularJS yönergesi ng-model , girdi öğelerini modele bağlar.

Model nesnesinin iki özelliği vardır: user ve email .

ng-show nedeniyle, color:red içeren aralıklar yalnızca kullanıcı veya e-posta $dirty ve $invalid olduğunda görüntülenir .


❮ Öncesi Sonraki ❯