AngularJS melaksanakan form validation_AngularJS

Walaupun saya bukan pengaturcara bahagian hadapan, saya faham betapa pentingnya melakukan pengesahan pada bahagian hadapan.

Oleh kerana dengan cara ini bahagian belakang boleh berehat, dan berbanding dengan bahagian belakang, bahagian hadapan sebenarnya boleh meningkatkan kegembiraan pengguna.

AngularJS menyediakan fungsi pengesahan bentuk yang sangat mudah, yang direkodkan di sini.

Mula-mula mula dengan kod berikut

Salin kod Kod adalah seperti berikut:

E-mel:
          
          
                               E-mel diperlukan.
                Alamat e-mel tidak sah.
                                                                                              

          

angular.module('myApp',[])
.controller('validationController', ['$scope',function($skop) {
$scope.user = 'Kavlez';
$scope.email =
'sweet_dreams@aliyun.com'; }]);

Beberapa pilihan pengesahan untuk teg input, biasanya digunakan bersama dengan teg HTML5.

Diperlukan

Panjang

Gunakan arahan ng-minlength/ng-maxlength

Format khusus
Contohnya, e-mel, URL, nombor, hanya tetapkan jenis kepada jenis yang sepadan, contohnya:

Salin kod Kod adalah seperti berikut:

Padanan corak

Gunakan corak ng arahan, contohnya:

Salin kod Kod adalah seperti berikut:

Borang sifat yang memudahkan untuk beroperasi pada borang

suci/kotor

Menunjukkan sama ada ia telah diubah suai, seperti

Salin kod Kod adalah seperti berikut:

{{mainForm.userEmail.$pristine}}
{{mainForm.userEmail.$dirty}}

Diakses dalam mod formName.fieldName.$pristine, input mesti mempunyai pengisytiharan model ng.

Salin kod Kod adalah seperti berikut:

sah/tidak sah

menunjukkan sama ada pengesahan telah diluluskan.

Salin kod Kod adalah seperti berikut:

$error

Maklumat pengesahan borang, maklumat yang sepadan akan dikembalikan apabila pengesahan gagal.

AngularJS menyediakan kelas css yang sepadan untuk status borang

Salin kod Kod adalah seperti berikut:

.ng-murni
.ng-kotor
.ng-sah
.ng-invalid

Contohnya, jadikan lulus pengesahan hijau dan merah kegagalan:

Salin kod Kod adalah seperti berikut:

input.ng-sah {
Warna: hijau;
}
input.ng-invalid {
Warna: hijau;
}

Dalam contoh yang diberikan, hanya satu pengesahan e-mel ditulis Jika anda menambah beberapa medan, beberapa gesaan berbeza dan beberapa acara, kod akan menjadi tidak kemas.

Ini sebenarnya tidak disyorkan, kami ada cara yang lebih baik.
Hanya gunakan angular-messages.js

Pertama sekali, jangan lupa dua langkah ini

Salin kod Kod adalah seperti berikut:

angular.module('myApp', ['ngMessages'])

Baiklah, mula-mula gantikan pendua tersebut dengan ng-message dan ng-message Contoh di atas menjadi:

Salin kod Kod adalah seperti berikut:

E-mel:
                                 type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" diperlukan />
            

                 

E-mel diperlukan.

               

Alamat e-mel tidak sah.

                

min length 10

                        

max length 50

                                                                                              

           

Tiada perubahan dalam fungsi, cuma semua kod pendua telah dialih keluar.

Beri perhatian untuk membezakan antara ng-message dan ng-message Adakah ianya agak seperti dengan()?

Tetapi ini masih tidak cukup baik Walaupun kandungan dalam ng-mesej diabaikan, masih terdapat pendua apabila pengesahan yang diperlukan wujud dalam berbilang medan.

Lebih-lebih lagi, jika borang pada halaman berbeza semuanya melibatkan kandungan yang sama, akan terdapat lebih banyak gesaan pengesahan berulang.
Untuk menyelesaikan masalah ini, kita boleh menggunakan arahan ng-message-include.
Arahan ini digunakan untuk merujuk templat Contohnya, contoh di atas menjadi:

Salin kod Kod adalah seperti berikut:

E-mel:
                                  type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" diperlukan />
           

                                                                                              

           

Ia tidak rumit, mari tambah beberapa perkara lagi.
Untuk menjadikan gesaan lebih mesra(?), mari kita cuba mencapai kesan gesaan yang muncul selepas kursor keluar.
Pada masa ini, adalah lebih mudah untuk menggunakan arahan. Mari kita mula-mula membahas beberapa kandungan yang berkaitan dengan arahan.

Mari kita jalankan dahulu:

Salin kod Kod adalah seperti berikut:

var myApp = angular.module('myApp',[])
.controller('validationController', ['$scope',function($skop) {
          $scope.user = 'Kavlez';
$scope.email = 'sweet_dreams@aliyun.com';
}])
.directive('hintOnBlur', [function() {
         kembali {
             memerlukan: 'ngModel',
               pautan: fungsi (skop, elemen, attr, ctrl) {
                ctrl.focused = palsu;
                      element.bind('focus', function(evt) {
skop.$apply(function() {ctrl.focused = true;});
                    }).bind('blur', function(evt) {
skop.$apply(function() {ctrl.focused = false;});
                });
            }
}
}]);

Di sini kami menggunakan fokus untuk menentukan sama ada kursor berada pada atribut tertentu Apabila fokus atau peristiwa kabur berlaku pada objek menggunakan arahan hintOnBlur, keadaan fokus berubah.

Borang juga akan diubah mengikut kaedah penggunaan adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

E-mel:
           

                                                                                              

           

Tambahkan pertimbangan fokus pada ng-show, dan gesaan akan muncul apabila ia palsu.

Nampaknya begitu sekarang.

Sesuaikan kaedah pengesahan dan kesahihan, yang juga menggunakan arahan.

Sahkan sama ada alamat e-mel yang diisi sudah diisi Berikut ialah simulasi mudah:

Salin kod Kod adalah seperti berikut:

.directive('isAlreadyTaken', function() {
    kembali {
        memerlukan: 'ngModel',
        pautan: fungsi(skop, ele, attrs, ctrl) {
            ctrl.$parsers.push(function(val) {
                ctrl.$setValidity('emailAvailable', false);
                var emailTable = [
                    'K@gmail.com',
                    'a@gmail.com',
                    'v@gmail.com',
                    'l@gmail.com',
                    'e@gmail.com',
                    'z@gmail.com'];
                untuk (var i=0;i                     if(val==emailTable[i])
                        kembali;
                ctrl.$setValidity('emailAvailable', true);
                pulangkan val;
            })
        }
    }
})

Input元素中加上sudah-diambil属性，并且再加一个ng-mesej:

复制代码 代码如下:

Sudah diambil! cuba alamat e-mel lain!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：js untuk menentukan butang kiri, tengah atau kanan tetikus yang telah diklik kemahiran javascriptArtikel seterusnya：js untuk menentukan butang kiri, tengah atau kanan tetikus yang telah diklik kemahiran javascript

Artikel berkaitan

Lihat lagi

• Analisis mendalam bagi komponen kumpulan senarai Bootstrap
• Penjelasan terperinci tentang fungsi JavaScript kari
• Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
• Angularjs menyepadukan UI WeChat (weui)
• Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kitaPenafianSitemap

© php.cn All rights reserved