Meskipun saya bukan programmer front-end, saya mengerti betapa pentingnya melakukan pekerjaan verifikasi yang baik di front-end.
Karena dengan cara ini, backend dapat mengambil lebih banyak napas, dan dibandingkan dengan backend, frontend memang dapat meningkatkan rasa kebahagiaan pengguna.
AngularJS menyediakan fungsi verifikasi bentuk yang sangat nyaman, catat di sini.
Mulailah pertama dengan kode berikut
Salinan kode adalah sebagai berikut:
<bentuk ng-app = "myapp" ng-controller = "validationController" name = "MainForm" novalidate>
<p> Email:
<input type = "email" name = "email" ng-model = "email" diperlukan>
<span style = "color: red" ng-show = "MainForm.email. $ Dirty && MainForm.email. $ Invalid">
<span ng-show = "MainForm.email. $ error.Required"> Email diperlukan. </span>
<span ng-show = "MainForm.email. $ error.email"> Alamat email yang tidak valid. </span>
</span>
</p>
<p>
<input type = "kirim" ng-disabled = "MainForm. $ Invalid">
</p>
</form>
<script>
angular.module ('myapp', [])
.controller ('validationController', ['$ scope', function ($ scope) {
$ scope.user = 'kavlez';
$ scope.email = '[email protected]';
}]);
</script>
Beberapa opsi verifikasi untuk tag input biasanya digunakan dengan tag HTML5.
Diperlukan
<input type = "text" diperlukan />
panjang
Gunakan arahan NG-minlength/ng-maxlength
<input type = "text" ng-minlength = "5" />
Format spesifik
Misalnya, email, URL, dan nomor, cukup atur tipe ke tipe yang sesuai, misalnya:
Salinan kode adalah sebagai berikut:
<input type = "email" name = "email" ng-model = "user.email" />
<input type = "number" name = "use" ng-model = "user.age" />
<input type = "url" name = "homePage" ng-model = "user.facebook_url" />
Pencocokan pola
Gunakan pola NG arahan, misalnya:
Salinan kode adalah sebagai berikut:
<input type = "text" ng-pola = "[az]" />
Bentuk properti, properti ini memudahkan untuk beroperasi pada formulir
murni/kotor
Menunjukkan apakah telah dimodifikasi, mis.
Salinan kode adalah sebagai berikut:
<Form name = "MainForm" ng-controller = "orderController">
<input type = "email" name = "useremail" ng-model = "myemail" />
{{MainForm.useremail. $ pristine}}
{{MainForm.useremail. $ Dirty}}
</form>
Diakses di FormName.FieldName. $ Mode Pristine, Input harus memiliki deklarasi model-NG.
Salinan kode adalah sebagai berikut:
valid/tidak valid
Menunjukkan apakah itu melewati verifikasi.
Salinan kode adalah sebagai berikut:
$ error
Informasi verifikasi formulir, dan informasi yang sesuai dikembalikan jika verifikasi gagal.
AngularJS menyediakan kelas CSS yang sesuai untuk status formulir
Salinan kode adalah sebagai berikut:
.ng-pristine
.ng-Dirty
.ng-valid
.ng-invalid
Misalnya, biarkan verifikasi berlalu hijau dan gagal merah:
Salinan kode adalah sebagai berikut:
input.ng-valid {
Warna: Hijau;
}
input.ng-invalid {
Warna: Hijau;
}
Dalam contoh yang diberikan, hanya satu verifikasi email ditulis begitu banyak. Jika Anda menambahkan beberapa bidang, tambahkan beberapa petunjuk berbeda, dan tambahkan beberapa acara, kode akan menjadi berantakan.
Bahkan, tidak disarankan untuk melakukan ini, kami memiliki cara yang lebih baik.
Itu adalah menggunakan Angular-messages.js
Pertama -tama, jangan lupa dua langkah ini
Salinan kode adalah sebagai berikut:
<Script src = "Angular-messages.js"> </script>
angular.module ('myapp', ['ngMessages'])
Oke, pertama-tama ganti duplikat tersebut dengan pesan NG dan pesan NG, dan contoh di atas menjadi:
Salinan kode adalah sebagai berikut:
<bentuk ng-controller = "validationController" name = "MainForm">
<p> Email:
<input
type = "email" name = "email" ng-model = "myemail" ng-minlength = "3" ng-maxlength = "50" Diperlukan />
<Div style = "color: red" ng-messages = "mainform.email. $ error" ng-messages-multiple>
<p ng-message = "wajib"> email diperlukan. </p>
<p ng-message = "email"> alamat email yang tidak valid. </p>
<p ng-message = "MinLength"> Min length 10 </p>
<p ng-message = "maxlength"> Max Length 50 </p>
</div>
</p>
<p>
<input type = "kirim" ng disabled = "MainForm. $ tidak valid" />
</p>
</form>
Tidak ada perubahan fungsi, hanya kode duplikat yang telah dihapus.
Perhatikan membedakan antara NG-Messasges dan NG-Message. Apakah rasanya sedikit seperti dengan ()? Multiple NG-Messages di belakangnya digunakan untuk membuat beberapa petunjuk muncul pada saat yang sama.
Tapi ini masih tidak cukup baik. Bahkan jika konten dalam pesan NG dihilangkan, masih akan ada duplikasi ketika verifikasi yang diperlukan ada di berbagai bidang.
Selain itu, akan ada lebih banyak petunjuk verifikasi berulang jika formulir pada halaman yang berbeda melibatkan konten yang sama.
Untuk mengatasi masalah ini, kita dapat menggunakan arahan NG-Messages-termasuk.
Petunjuk ini digunakan untuk referensi templat, misalnya, contoh di atas menjadi:
Salinan kode adalah sebagai berikut:
<bentuk ng-controller = "validationController" name = "MainForm">
<p> Email:
<input
type = "email" name = "email" ng-model = "myemail" ng-minlength = "3" ng-maxlength = "50" Diperlukan />
<Div style = "color: red" ng-messages = "MainForm.email. $ error" ng-messages-multiple ng-messages-include = "validateTemplate/email.html">
</div>
</p>
<p>
<input type = "kirim" ng disabled = "MainForm. $ tidak valid" />
</p>
</form>
Ini tidak rumit, mari kita tambahkan sesuatu.
Untuk membuat petunjuk lebih ramah (?), Kami mencoba mencapai efek petunjuk yang muncul setelah kursor pergi.
Pada saat ini, akan jauh lebih nyaman untuk menggunakan arahan. Di sini kami pertama -tama melibatkan beberapa informasi yang terkait dengan instruksi.
Jalankan dulu dan kemudian bicarakan:
Salinan kode adalah sebagai berikut:
var myapp = angular.module ('myapp', [])
.controller ('validationController', ['$ scope', function ($ scope) {
$ scope.user = 'kavlez';
$ scope.email = '[email protected]';
}])
.directive ('hintonblur', [function () {
kembali {
membutuhkan: 'ngmodel',
Link: function (scope, elemen, attrs, ctrl) {
ctrl.focused = false;
element.bind ('focus', function (evt) {
scope. $ apply (function () {ctrl.focused = true;});
}). bind ('blur', function (evt) {
scope. $ apply (function () {ctrl.focused = false;});
});
}
}
}]);
Di sini kami menggunakan fokus untuk menentukan apakah kursor ada di properti tertentu. Ketika peristiwa fokus atau blur terjadi pada objek menggunakan arahan Hintonblur, keadaan fokus berubah.
Formulir akan diubah sebagai berikut:
Salinan kode adalah sebagai berikut:
<bentuk ng-controller = "validationController" name = "MainForm">
<p> Email:
<input type = "email" name = "email" ng-model = "myemail" ng
<div style = "color: red" ng-messages = "MainForm.email. $ error" ng-show = "! Mainform.email.fokus" NG-messages-multiple ng-messages-include = "validateTemplate/email.html">
</div>
</p>
<p>
<input type = "kirim" ng disabled = "MainForm. $ tidak valid" />
</p>
</form>
Tambahkan penilaian fokus dalam-show, dan prompt muncul saat salah.
Sepertinya itu sekarang.
Kustomisasi metode verifikasi dan validitas, yang juga menggunakan arahan.
Pastikan email yang Anda isi telah ditempati. Ini simulasi sederhana:
Salinan kode adalah sebagai berikut:
.directive ('isalreadytaken', function () {
kembali {
membutuhkan: 'ngmodel',
Link: Function (SCOPE, ELE, ATRS, CTRL) {
ctrl. $ parsers.push (function (val) {
ctrl. $ setValidity ('emailVailable', false);
var emailTable = [
untuk (var i = 0; i <emailtable.length; i+= 1)
if (val == emailTable [i])
kembali;
ctrl. $ setValidity ('emailvailable', true);
return val;
})
}
}
})
Tambahkan atribut IS-Already-Taken ke elemen input dan tambahkan pesan NG lain:
Salinan kode adalah sebagai berikut:
<p ng-message = "emailvailable"> sudah mengambil! Coba alamat email lainnya! </p>