Validasi berdasarkan karakter adalah informasi dari form input berdasarkan karakter yang kita tentukan. Contoh sederhananya mungkin teman-teman pernah menemukan ketika sedang melakukan input alamat email saat sedang registrasi atau buat akun. Dimana format yang harus kita masukkan harus berupa email. Dan pada kesembpatan kali ini saya akan membuat validasi untuk email berdasarkan karakter ‘@’ pada artikel tentang Cara Membuat Validasi Berdasarkan Karakter Dengan AngularJs.
Langkah pertama Cara Membuat Validasi Berdasarkan Karakter Dengan AngularJs saya akan membuat script angularjsnya terlebih dahulu sebagai berikut.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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("@") > -1) { mCtrl.$setValidity('charE', true); } else { mCtrl.$setValidity('charE', false); } return value; } mCtrl.$parsers.push(myValidation); } }; }); </script> |
Script di atas saya membuat module angularjs terlebih dahulu untuk dapat membuat fungsi directive dengan dua parameter. Parameter pertama adalah ‘myDirective’ dan parameter kedua berisi sebuah fungsi untuk return atau mengembalikan sebuah nilai. Dan didalamnya terdapat fungsi lagi dengan nama myValidation dengan satu parameter dimana didalamnya terdapat suatu kondisi untuk melakukan pengecekkan terhadap parameter value menggunakan indexOf yang didalamnya adalah karakter yang kita tentukan. Dimana jika terdapat karakter ‘@’ maka akan bernilai true dan jika tidak maka akan bernilai false.
Jika sudah selesai maka kita akan lanjutkan untuk membuat struktur htmlnya seperti berikut ini.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> </head> <body ng-app="myApp"> <p>Cara Membuat Validasi Berdasarkan Karakter Dengan AngularJs</p> <form name="myForm"> Email : <input name="myInput" ng-model="myInput" required my-directive> </form> <h1>{{myForm.myInput.$valid}}</h1> <p>Input harus mengandung karakter "@" agar bernilai true atau benar.</p> </body> </html> |
Struktur html di atas saya sediakan input type text untuk menuliskan alamat email dimana terdapat ng-model=”myInput” untuk menampung emailnya dan saya berikan attribute my-directive untuk saya gunakan di parameter directive. Jika teman teman buka di browser maka tampilannya akan seperti pada gambar di bawah ini.
Nilai akan bernilai true jika ada karakter dari ‘@’.
Dan nilai akan bernilai false jika tidak ada karatkter ‘@’.
Demikian artikel tentang Cara Membuat Validasi Berdasarkan Karakter Dengan AngularJs. Semoga dapat bermanfaat dan selamat mencoba.