Verifikasi Formulir AngularJS

Hal Sebelumnya Formulir AngularJS
Hal Berikutnya API AngularJS

AngularJS dapat memverifikasi data input.

Verifikasi Formulir

AngularJS menyediakan verifikasi formulir klien.

AngularJS mengawasi status formulir dan field input (input, textarea, select) dan memungkinkan Anda memberitahu pengguna tentang status saat ini.

AngularJS juga menyediakan informasi tentang apakah mereka telah diSentuh atau diubah.

Anda dapat menggunakan atribut HTML5 standar untuk memverifikasi masukkan, atau membuat fungsi verifikasi sendiri.

Verifikasi klien tidak dapat melindungi masukkan pengguna sendiri. Verifikasi server juga diperlukan.

required

Gunakan atribut HTML5 required Input field yang ditentukan harus diisi:

instansi

Field masukkan ini wajib diisi:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" required>  
</form>  
<p>Status keberalihan input adalah:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Coba Sendiri

email

Gunakan tipe HTML5 email Nilai yang ditentukan harus berupa email:

instansi

Masukkan field ini harus berupa email:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" type="email">  
</form>  
<p>Status keberalihan input adalah:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Coba Sendiri

Status formulir dan status input

AngularJS akan mengupdate secara terus-lanjut status formulir dan field input.

Field input memiliki status berikut:

$untouched Field ini belum disentuh
$touched Field ini telah disentuh
$pristine Field ini belum diubah
$dirty Field ini telah diubah
$invalid Konten field tidak valid
$valid Konten field valid

Mereka semua adalah properti field input, dapat saja benar atau salah.

Formulir memiliki status berikut:

$pristine Tidak ada field yang diubah
$dirty Satu atau beberapa field telah diubah
$invalid Konten formulir tidak valid
$valid Konten formulir valid
$subscribed Formulir telah disubmit

Mereka semua adalah properti formulir, dapat saja benar atau salah.

Anda dapat menggunakan status ini untuk menampilkan pesan yang berarti kepada pengguna. Contoh, jika suatu field wajib diisi dan pengguna meninggalkannya kosong, maka harus memberikan peringatan kepada pengguna:

instansi

Jika field ini telah disentuh dan kosong, tampilkan pesan kesalahan:

<input name="myName" ng-model="myName" required>  
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">Nama adalah wajib diisi.</span>

Coba Sendiri

Kelas CSS

AngularJS menambahkan kelas CSS ke formulir dan field input berdasarkan statusnya.

Berikut adalah kelas yang ditambahkan ke field input atau dihapus dari field input:

ng-untouched Field ini belum disentuh
ng-touched Field ini telah disentuh
ng-pristine Field ini belum diubah
ng-dirty Field ini telah diubah
ng-valid Konten field valid
ng-invalid Konten field tidak valid
ng-valid-key Verifikasi satu kunci dalam setiap kali. Contoh:ng-valid-requiredsangat berguna saat ada beberapa konten yang harus diverifikasi.
ng-invalid-key Contoh:ng-invalid-required

Berikut adalah kelas yang ditambahkan ke formulir atau dihapus dari formulir:

ng-pristine Tidak ada field yang belum diubah
ng-dirty Satu atau beberapa field telah diubah
ng-valid Konten formulir valid
ng-invalid Konten formulir tidak valid
ng-valid-key Verifikasi satu kunci dalam setiap kali. Contoh:ng-valid-requiredsangat berguna saat ada beberapa konten yang harus diverifikasi.
ng-invalid-key Contoh:ng-invalid-required

Jika nilai yang diwakili oleh kelas ini adalah falsejika kelas ini dihapus.

Tambahkan gaya untuk kelas ini, untuk memberikan antarmuka pengguna yang lebih baik dan yang dapat diintui untuk aplikasi Anda.

instansi

Gunakan gaya CSS standar untuk aplikasi:

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

Coba Sendiri

Juga dapat diatur gaya formulir.

instansi

Aplikasikan gaya untuk formulir yang belum diubah (asli) dan formulir yang diubah:

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

Coba Sendiri

Verifikasi Khusus

membuat fungsi verifikasi sendiri memerlukan kemampuan yang bagus; Anda harus menambahkan direktif baru ke aplikasi dan menggunakan beberapa parameter penanganan spesifik untuk verifikasi di dalam fungsi.

instansi

buat direktif sendiri, termasuk fungsi verifikasi khusus, dan gunakan my-directive merujuk kepadanya.

bidang ini hanya berlaku jika nilai mengandung huruf "e":

<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>
<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
  kembalikan {
    require: 'ngModel',
    link: function(scope, element, attr, mCtrl) {
      fungsi myValidation(nilai) {
        jika (nilai.indexOf("e") > -1) {
          mCtrl.$setValidity('charE', true);
        } else {
          mCtrl.$setValidity('charE', false);
        };
        kembalikan nilai;
      };
      mCtrl.$parsers.push(myValidation);
    };
  };
});
</script>

Coba Sendiri

Contoh Dijelaskan:

dalam HTML, direktif baru akan dijalankan melalui penggunaan atribut my-directive untuk merujuk.

dalam JavaScript, kita pertama-tama menambahkan nama myDirective dalam direktif yang baru.

ingat, ketika menamai sebuah direktif, Anda harus menggunakan penamaan kapital dengan huruf kecil, seperti myDirectivetetapi ketika memanggilnya, Anda harus menggunakan nama yang dipisahkan dengan tanda hubung, seperti my-directive.

kemudian, kembalikan sebuah objek yang menentukan yang kita butuhkan ngModelyaitu ngModelController.

buat sebuah fungsi penghubung yang menerima beberapa parameter, parameter keempat mCtrl adalah ngModelController.

kemudian tentukan sebuah fungsi, dalam contoh ini dinamai myValidationyang menerima satu parameter, parameter ini adalah nilai elemen input.

tes apakah nilai ini mengandung huruf "e" dan atur keberlanjutan kontrol model true atau false.

akhirnya,mCtrl.$parsers.push(myValidation); akan myValidation Fungsi penambahan ke dalam array lainnya, fungsi ini akan dijalankan setiap nilai input berubah.

Contoh Verifikasi

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<h2>Contoh Verifikasi</h2>
<form ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Nama pengguna：<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">Nama pengguna wajib diisi。</span>
  </span>
</p>
<p>Alamat 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">Alamat email wajib diisi.</span>
  <span ng-show="myForm.email.$error.email">Alamat email yang tidak valid.</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>

Coba Sendiri

Atribut formulir HTML novalidate untuk menonaktifkan verifikasi browser standar.

Contoh penjelasan:

Instruksi AngularJS ng-model ikat elemen input ke model.

Objek model memiliki dua properti:user dan email.

karena ng-showhanya saat user atau email adalah $dirty dan $invalid jika ada span dengan warna: red.

Hal Sebelumnya Formulir AngularJS
Hal Berikutnya API AngularJS

Jadwal Kursus

Tutoriale

instansi

Panduan Referensi

Kursus Pilihan

Rekomendasi Kursus:

Verifikasi Formulir AngularJS