tutorial pengembangan web terbaru
 

AngularJS Form Validasi

❮ Sebelumnya Berikutnya Bab ❯

AngularJS dapat memvalidasi input data.

Form Validasi

AngularJS menawarkan sisi klien validasi form.

AngularJS memonitor keadaan bentuk dan masukan bidang (input, textarea, pilih), dan memungkinkan Anda memberitahu pengguna tentang keadaan saat ini.

AngularJS juga menyimpan informasi tentang apakah mereka telah menyentuh, atau diubah, atau tidak.

Anda dapat menggunakan standar HTML5 atribut untuk memvalidasi masukan, atau Anda dapat membuat fungsi validasi Anda sendiri.

Catatan Sisi klien validasi tidak bisa sendirian input pengguna aman. sisi server validasi juga diperlukan.

Wajib

Gunakan atribut HTML5 required untuk menentukan bahwa kolom input harus diisi:

Contoh

Kolom input diperlukan:

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

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

E-mail

Gunakan jenis HTML5 email untuk menentukan bahwa nilai harus e-mail:

Contoh

Kolom input harus e-mail:

<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>
Cobalah sendiri "

Form Negara dan Input Negara

AngularJS terus-menerus memperbarui keadaan baik bentuk dan field input.

field input memiliki status berikut:

  • $untouched Bidang belum tersentuh belum
  • $touched bidang telah tersentuh
  • $pristine Bidang belum diubah belum
  • $dirty lapangan telah dimodifikasi
  • $invalid Isi lapangan tidak valid
  • $valid Isi lapangan berlaku

Mereka semua properti dari field input, dan baik true atau false .

Bentuk memiliki status berikut:

  • $pristine ada field telah dimodifikasi belum
  • $dirty Satu atau lebih telah dimodifikasi
  • $invalid Isi formulir tidak valid
  • $valid Isi formulir berlaku
  • $submitted Bentuknya yang disampaikan

Mereka semua sifat-sifat bentuk, dan baik true atau false .

Anda dapat menggunakan negara-negara ini untuk menunjukkan pesan yang bermakna bagi pengguna. Misalnya, jika lapangan diperlukan, dan pengguna daun itu kosong, Anda harus memberikan pengguna peringatan:

Contoh

Tampilkan pesan kesalahan jika lapangan telah menyentuh DAN kosong:

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

CSS Kelas

AngularJS menambahkan kelas CSS untuk bentuk dan bidang masukan tergantung pada negara-negara mereka.

Kelas berikut ditambahkan ke, atau dihapus dari, field input:

  • ng-untouched lapangan belum tersentuh belum
  • ng-touched lapangan telah menyentuh
  • ng-pristine Bidang belum diubah belum
  • ng-dirty lapangan telah dimodifikasi
  • ng-valid Isi lapangan berlaku
  • ng-invalid Isi field tidak valid
  • ng-valid- key Salah satu kunci untuk setiap validasi. Contoh: ng-valid-required , berguna ketika ada lebih dari satu hal yang harus divalidasi
  • ng-invalid- key Contoh: ng-invalid-required

Kelas berikut ditambahkan ke, atau dihapus dari, bentuk:

  • ng-pristine ada bidang belum diubah belum
  • ng-dirty Satu atau lebih field telah dimodifikasi
  • ng-valid Isi formulir berlaku
  • ng-invalid Isi formulir tidak valid
  • ng-valid- key Salah satu kunci untuk setiap validasi. Contoh: ng-valid-required , berguna ketika ada lebih dari satu hal yang harus divalidasi
  • ng-invalid- key Contoh: ng-invalid-required

Kelas dihapus jika nilai mereka mewakili adalah false .

Tambahkan gaya untuk kelas-kelas ini untuk memberikan aplikasi Anda antarmuka pengguna yang lebih baik dan lebih intuitif.

Contoh

Menerapkan gaya, menggunakan CSS standar:

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

Formulir juga dapat ditata:

Contoh

Terapkan gaya untuk dimodifikasi bentuk (murni), dan untuk bentuk dimodifikasi:

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

Validasi kustom

Untuk membuat fungsi validasi sendiri adalah sedikit lebih rumit. Anda harus menambahkan direktif baru untuk aplikasi Anda, dan berurusan dengan validasi dalam fungsi dengan argumen tertentu tertentu.

Contoh

Buat direktif Anda sendiri, yang berisi fungsi validasi kustom, dan menyebutnya dengan menggunakan my-directive .

lapangan hanya akan berlaku jika nilai berisi karakter "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>
Cobalah sendiri "

Contoh Dijelaskan:

Dalam HTML, direktif baru akan disebut dengan menggunakan atribut my-directive .

Dalam JavaScript kita mulai dengan menambahkan direktif baru bernama myDirective .

Ingat, ketika penamaan direktif, Anda harus menggunakan nama camelcase, myDirective , tapi ketika memohon itu, Anda harus menggunakan - nama dipisahkan, my-directive .

Kemudian, kembali objek di mana Anda menentukan bahwa kita memerlukan ngModel , yang merupakan ngModelController.

Membuat fungsi menghubungkan yang mengambil beberapa argumen, di mana argumen keempat, mCtrl , adalah ngModelController ,

Kemudian tentukan fungsi, dalam hal ini bernama myValidation , yang mengambil satu argumen, argumen ini adalah nilai dari elemen input.

Uji apakah nilai mengandung huruf "e", dan mengatur keabsahan model controller untuk baik true atau false .

Akhirnya, mCtrl.$parsers.push(myValidation); Akan menambahkan myValidation fungsi untuk berbagai fungsi lainnya, yang akan dieksekusi setiap kali perubahan nilai input.

validasi Contoh

<!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>
Cobalah sendiri "
Catatan HTML bentuk atribut novalidate digunakan untuk menonaktifkan browser default validasi.

misalnya Dijelaskan

The AngularJS direktif ng-model yang mengikat elemen masukan untuk model.

Model objek memiliki dua sifat: user dan email.

Karena ng-acara, bentang dengan warna: merah ditampilkan hanya ketika pengguna atau email adalah $ kotor dan $ valid.


❮ Sebelumnya Berikutnya Bab ❯